> ## Documentation Index > Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt > Use this file to discover all available pages before exploring further. # Mobile SDK - React Native **Repositório no Github:** [https://github.com/KlipFit/kleep-rn](https://github.com/KlipFit/kleep-rn) Um wrapper WebView simplificado em torno do `drawer.kleep.ai`. O SDK expõe um componente + dois métodos, espelhando a superfície iOS. ## Instalação *** Cada versão é publicada como um tarball npm no `cdn.kleep.ai`. Dois formatos de URL estão disponíveis: **Versão estável mais recente** (atualiza automaticamente a cada novo lançamento estável — pré-lançamentos nunca movem este ponteiro): ```bash theme={null} npm install https://cdn.kleep.ai/react-native-sdk/latest.tgz \ react-native-webview \ @react-native-async-storage/async-storage ``` **Fixar uma versão específica** (recomendado para produção — totalmente imutável): ```bash theme={null} npm install https://cdn.kleep.ai/react-native-sdk/releases/v1.0.0/kleep-react-native-1.0.0.tgz \ react-native-webview \ @react-native-async-storage/async-storage ``` Substitua `v1.0.0` e `1.0.0` pela tag de lançamento desejada. Os dois pacotes listados são dependências peer — o SDK os requer, mas permite que você controle a versão. O tarball publicado inclui um SHA-256 ao lado (`.sha256` / `latest.tgz.sha256`) se você quiser verificar a integridade antes de instalar. ### Expo Ambas as dependências peer já estão incluídas no Expo Go (SDK 54+). Nenhuma configuração extra é necessária em desenvolvimento. Para builds de produção, `expo prebuild` as detecta automaticamente. ### React Native Bare ```bash theme={null} cd ios && pod install ``` ## Permissões *** Para o fluxo de calçados (escaneamento por câmera), adicione ao `ios//Info.plist`: ```xml theme={null} NSCameraUsageDescription Used to scan your shoe size ``` E ao `android/app/src/main/AndroidManifest.xml`: ```xml theme={null} ``` ## Configurar uma vez na inicialização do aplicativo *** ```tsx theme={null} import { Kleep } from '@kleep/react-native'; Kleep.configure({ publicId: 'YOUR_KLEEP_PUBLIC_ID', // UUID provided by Kleep language: 'fr', // optional, default UI language }); ``` | Campo | Obrigatório | Descrição | | ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------- | | `publicId` | sim | UUID identificando seu varejista (fornecido pelo Kleep) | | `language` | não | `'fr' \| 'en' \| 'de' \| 'it' \| 'es' \| 'nl' \| 'pt' \| 'ja' \| 'ko' \| 'pl' \| 'br' \| 'dk' \| 'fi' \| 'se' \| 'gb'` | ## Uso *** ### Método 1: `Kleep.checkProduct` Chame isso na montagem da PDP. O resultado controla o CTA "Encontrar meu tamanho" — se deve ser renderizado e qual rótulo exibir. | parâmetro | prioridade | descrição | | ----------- | ------------- | ------------------------------ | | `productId` | *obrigatório* | ID do seu produto no varejista | **Retorna** ```ts theme={null} { recommendable: boolean; productFound: boolean; category?: 'clothing' | 'lingerie' | 'footwear' | 'children'; recommendedSize?: string; // e.g. "M", "38" } ``` **Esquema de lógica** | `recommendable` | `recommendedSize` | O que renderizar | | --------------- | ----------------- | ----------------------------------------------------- | | `false` | — | **Ocultar o CTA** (produto não elegível para o Kleep) | | `true` | ausente | CTA: **"Trouver ma taille"** | | `true` | `"M"` | CTA: **"Taille recommandée: M"** | O SDK armazena em cache o resultado por 5 min em memória, com chave em `(publicId, productId)` para o gate e `(publicId, productId, mid)` para o tamanho recomendado. Re-renderizar a PDP ou navegar de volta é gratuito. **Exemplo de implementação** ```tsx theme={null} import { useEffect, useState } from 'react'; import { Pressable, Text } from 'react-native'; import { Kleep, KleepFindSizeView, type KleepCheckProductResult } from '@kleep/react-native'; function ProductPage({ product }) { const [check, setCheck] = useState(null); const [open, setOpen] = useState(false); useEffect(() => { Kleep.checkProduct({ productId: product.id }).then(setCheck); }, [product.id]); if (!check?.recommendable) return ; return ( <> setOpen(true)}> {check.recommendedSize ? `Taille recommandée : ${check.recommendedSize}` : 'Trouver ma taille'} cart.add(e.variantId)} onSelectSize={(e) => pdp.setSize(e.size)} onDismiss={() => setOpen(false)} /> ); } ``` ### Método 2: `` Monte este componente para abrir o drawer de busca de tamanho em um Modal+WebView em tela cheia. Padrão de componente controlado: você possui o estado `visible`, o SDK solicita fechamento via `onDismiss`. | prop | prioridade | descrição | | -------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | `visible` | *obrigatório* | Controla a visibilidade do Modal | | `productId` | *obrigatório* | Igual ao do `checkProduct` | | `onDismiss` | *obrigatório* | Disparado quando o usuário fecha o drawer (X / swipe / voltar). O host DEVE definir `visible` como `false` | | `variantId` | *opcional* | Pré-seleciona uma variante para a recomendação | | `customerId` | *opcional* | Identificador CRM para vinculação entre sessões | | `language` | *opcional* | Substitui o idioma definido no SDK para esta abertura | | `countryCode` | *opcional* | Ex.: `"FR"`, `"US"` — define o sistema de unidades + padrões de tamanho de sutiã | | `stocks` | *opcional* | `{ [variantId]: number \| boolean }` — o drawer renderiza UI de indisponível / estoque parcial | | `mock` | *opcional* | `true` → o drawer pula chamadas reais de API de recomendação (apenas para QA) | | `forceState` | *opcional* | `'outOfRange' \| 'unavailable' \| 'error' \| 'qrcode'` — hatch de QA para renderizar um estado final diretamente | | `warmRestore` | *opcional* | `{ mid, uid }` — pré-carrega uma medição existente (pula o fluxo inicial). A restauração no mesmo dispositivo já é automática via AsyncStorage | | `extraParams` | *opcional* | `Record` bruto anexado à URL do drawer (escape hatch) | | `onAddToCart` | *opcional* | `(event: { variantId, size? }) => void` — usuário tocou no CTA "Adicionar ao carrinho" dentro do drawer. **O host adiciona a variante ao carrinho** | | `onSelectSize` | *opcional* | `(event: { size }) => void` — usuário escolheu um tamanho na tela de Resultado. **O host deve sincronizar seu seletor de tamanho da PDP** | | `onMessage` | *opcional* | Hook de depuração — dispara para cada postMessage recebido do drawer | | `style` | *opcional* | `StyleProp` — substituição de estilo do contêiner | | `webViewProps` | *opcional* | Repassado ao `react-native-webview` para personalização avançada | **Configurado automaticamente pelo SDK (você não precisa fazer nada):** * Conecta o `window.parent.postMessage` estilo iframe do drawer à bridge do React Native * Persiste `mid` / `uid` no AsyncStorage quando o drawer os envia * Responde às postMessages `getMid` / `getUid` / `getSizes` do drawer * Chama `Kleep.checkProduct` na abertura para resolver o fluxo (roupas / lingerie / calçados / infantil) — usa o mesmo cache de 5 min da sua chamada do CTA, então é gratuito se você já invocou `checkProduct` ### Método 3: `Kleep.track` Analytics do tipo fire-and-forget. Nunca lança exceções. | parâmetro | prioridade | descrição | | -------------------- | ------------- | ------------------------------------------------------- | | `eventName` | *obrigatório* | Nome do evento | | `options.customerId` | *opcional* | Identificador CRM | | `options.parameters` | *opcional* | `Record` — dados arbitrários do evento | ```tsx theme={null} import { Kleep } from '@kleep/react-native'; await Kleep.track('product_viewed', { parameters: { productId: product.id }, }); await Kleep.track('product_added_to_cart', { customerId: user.id, parameters: { productId: product.id, variantId: selectedVariant.id, cart: cart.items, }, }); await Kleep.track('checkout_completed', { customerId: user.id, parameters: { orderId: order.id, cart: order.items }, }); ``` Queremos rastrear 3 eventos: | eventName | Acionador | | ----------------------- | ------------------------------------ | | `product_viewed` | Ao visualizar a PDP | | `product_added_to_cart` | Ao adicionar produto ao carrinho | | `checkout_completed` | Ao confirmar pedido após o pagamento | **Exemplo de `product_viewed`** ```jsx theme={null} { productId: "123ABC456" } ``` **Exemplo de `product_added_to_cart`** ```jsx theme={null} { productId: "123ABC456", variantId: "123ABC456-00R", cart: [ { productId: "123ABC456", variantId: "123ABC456-00R", sku: "XYZ", size: "S", quantity: 2, price: { amount: "50", currencyCode: "EUR" } } ] } ``` **Exemplo de `checkout_completed`** ```jsx theme={null} { orderId: "000001", cart: [ { lineItemId: "000001#1", productId: "123ABC456", variantId: "123ABC456-00R", sku: "XYZ", size: "S", quantity: 2, price: { amount: "50", currencyCode: "EUR" } } ] } ``` ## Invalidação de cache *** O SDK mantém dois caches em memória (TTL de 5 min cada): * **Gate de produto** — `(publicId, productId) → { recommendable, category, productFound }` * **Tamanho recomendado** — `(publicId, productId, mid) → rótulo de tamanho` Ambos são invalidados automaticamente. Se você precisar forçar uma atualização (usuário desconectou, varejista trocado, botão de atualização manual): ```tsx theme={null} Kleep.clearCheckProductCache(); ```