> ## Documentation Index
> Fetch the complete documentation index at: https://documentacao.legitimuz.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native

> Abra o fluxo de verificação num app React Native ou Expo.

Ao final deste guia o fluxo abre dentro do seu app React Native, com os eventos chegando ao seu
código JavaScript.

## Pré-requisitos

* Uma `access_credential` emitida pelo seu backend, como em
  [criar verificação](/api/create-verification).
* O bundle das **duas** plataformas registrado e verificado em
  [Integrações → Segurança](/platform/domains#app-bundles). `applicationId` no Android,
  bundle identifier no iOS.

## Disponibilidade

<Warning>
  O SDK React Native ainda **não está publicado** num registro que você possa instalar. Fale com o
  [suporte](https://painel.legitimuz.com/support) para receber o pacote e as instruções da versão
  de preview.

  Até lá, um app React Native pode abrir a verificação pelo módulo nativo de cada plataforma.
  [Android](/sdks/android) e [iOS](/sdks/ios), ou por
  [link](/guides/first-verification#passo-7-abra-a-jornada), que não exige biblioteca.
</Warning>

O restante desta página descreve o contrato previsto, para você dimensionar a integração.

## Configure as permissões

<CodeGroup>
  ```xml title="android/app/src/main/AndroidManifest.xml" theme={null}
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.CAMERA" />
  ```

  ```xml title="ios/SeuApp/Info.plist" theme={null}
  <key>NSCameraUsageDescription</key>
  <string>Precisamos da câmera para fotografar seu documento e confirmar que é você.</string>
  ```
</CodeGroup>

No Expo, declare no `app.json` em vez de editar os projetos nativos.

## Abra a sessão

```tsx title="TelaVerificacao.tsx" theme={null}
import { useEffect, useState } from "react";
import { LegitimuzVerification } from "@legitimuz/react-native-sdk";

export function TelaVerificacao({ refId }: { refId: string }) {
  const [credencial, setCredencial] = useState<string | null>(null);

  useEffect(() => {
    fetch("https://seu-backend.exemplo.com.br/verificacoes", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ ref_id: refId }),
    })
      .then((r) => r.json())
      .then(({ entry }) => setCredencial(entry.access_credential));
  }, [refId]);

  if (!credencial) return null;

  return (
    <LegitimuzVerification
      accessCredential={credencial}
      onEvent={(evento) => console.log(evento.type)}
      onComplete={() => {
        // O titular terminou de interagir. O desfecho vem pelo webhook.
        navegarParaAguarde();
      }}
      onError={(erro) => console.warn(erro.code, erro.message)}
    />
  );
}
```

<Warning>
  A chave de API nunca vai para o app, nem no `.env` do React Native, que acaba no bundle. O app
  recebe só a `access_credential`, do **seu** backend.
</Warning>

## Peça a câmera antes

Nas duas plataformas, peça a permissão antes de montar o componente. Se o titular chega na captura
sem a permissão concedida, o fluxo trava.

## Próximo passo

<Columns cols={2}>
  <Card title="Eventos" icon="bolt" href="/guides/web/best-practices/events">
    O catálogo e os payloads.
  </Card>

  <Card title="Receber a decisão" icon="webhook" href="/webhooks/introduction">
    Onde o desfecho realmente chega.
  </Card>
</Columns>