React Native

npm install @okyc/react-native react-native-webview
npx expo install expo-screen-capture   # optional: screenshot blocking
cd ios && pod install

<key>NSCameraUsageDescription</key>
<string>The camera is used to capture your ID document and a selfie for identity verification.</string>

<uses-permission android:name="android.permission.INTERNET" />
<!-- Document + selfie capture: react-native-webview asks for the runtime permission when the page calls getUserMedia. -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false" />

export function makeConfig(sessionUrl: string): OkycConfig {
  return {
    sessionUrl, // the `url` returned by POST /v1/sessions
    locale: 'en', // optional; defaults to the session's language
    theme: 'system', // 'light' | 'dark' | 'system'
    allowedHosts: [], // extra hosts, only when self-hosting
    blockScreenshots: true, // needs expo-screen-capture
    autoCloseDelay: 2000, // ms the result screen stays visible after `complete`
  };
}

export function App() {
  return (
    <OkycProvider>
      <VerifyButton />
    </OkycProvider>
  );
}

function VerifyButton() {
  const start = async () => {
    const sessionUrl = await fetchSessionUrlFromYourBackend();
    const result = await Okyc.start(makeConfig(sessionUrl), { onEvent });
    handleResult(result);
  };
  return <Button title="Verify identity" onPress={start} />;
}

export function VerifyScreen({ sessionUrl }: { sessionUrl: string }) {
  const [visible, setVisible] = useState(true);
  const done = (result: OkycResult) => {
    setVisible(false);
    handleResult(result);
  };
  return (
    <View style={{ flex: 1 }}>
      <Text>Verification</Text>
      <OkycModal
        visible={visible}
        config={makeConfig(sessionUrl)}
        onEvent={onEvent}
        onComplete={done}
        onCancel={done}
        onError={done}
      />
    </View>
  );
}

function handleResult(result: OkycResult) {
  switch (result.type) {
    case 'completed':
      // UX only: confirm the decision on your backend (webhook or GET /v1/sessions/:id).
      console.log('finished', result.sessionId, result.status);
      break;
    case 'cancelled':
      console.log('user closed the flow');
      break;
    case 'failed':
      console.warn('verification failed', result.code, result.message);
      break;
  }
}

function onEvent(event: OkycEvent) {
  // Payloads carry ids and statuses only — never personal data.
  track(`okyc_${event.type}`, { sessionId: event.sessionId, ...event.payload });
}