Usage

Basic Example

import Trustchex from '@trustchex/react-native-sdk';

<Trustchex
  baseUrl="https://your-api.com"
  sessionId="session-123"
  onCompleted={() => console.log('Done')}
  onError={(error) => console.error(error)}
/>

Props

Prop	Type	Required	Description
baseUrl	string	✅	Your API base URL
sessionId	string	❌	Session identifier
branding	object	❌	Colors and logo
locale	'en' | 'tr'	❌	Language
onCompleted	() => void	❌	Success callback
onError	(error) => void	❌	Error callback
onDocumentRead	(result: DocumentReadResult) => void	❌	Called when document is read (NFC or OCR)

Document Read Event

The onDocumentRead callback fires as soon as document data is available — immediately after a successful NFC chip read or after a successful camera OCR scan. It receives a unified DocumentReadResult object regardless of source.

import Trustchex, { type DocumentReadResult } from '@trustchex/react-native-sdk';

<Trustchex
  baseUrl="https://your-api.com"
  sessionId="session-123"
  onDocumentRead={(result: DocumentReadResult) => {
    const { document } = result;

    console.log(document.documentType);   // "P" (passport) | "I" (ID card)
    console.log(document.issuingCountry); // "DEU"
    console.log(document.nationality);    // "DEU"
    console.log(document.documentNumber); // "C01X00T478"
    console.log(document.personalNumber); // "8512310074" | null
    console.log(document.lastName);       // "MÜLLER"
    console.log(document.firstName);      // "JÜRGEN KARL"
    console.log(document.sex);            // "M" | "F" | "X" | "U"
    console.log(document.dateOfBirth);    // "1985-03-10" (ISO 8601)
    console.log(document.dateOfExpiry);   // "2030-11-05" (ISO 8601)
  }}
  onCompleted={() => console.log('Done')}
  onError={(error) => console.error(error)}
/>

DocumentReadResult

interface DocumentReadResult {
  document: {
    documentType: string;        // "P" (passport) | "I" (ID card)
    issuingCountry: string;      // 3-letter ICAO country code, e.g. "TUR"
    nationality: string;
    documentNumber: string;
    personalNumber: string | null;
    lastName: string;            // Best available name, e.g. "MÜLLER"
    firstName: string;           // Best available name, e.g. "JÜRGEN"
    sex: 'M' | 'F' | 'X' | 'U';
    dateOfBirth: string | null;  // ISO 8601, e.g. "1990-05-15"
    dateOfExpiry: string | null; // ISO 8601, e.g. "2028-03-01"
  };
  name: {
    rawLast: string;             // MRZ ASCII surname
    rawFirst: string;            // MRZ ASCII given name
    displayLast: string;         // Best Unicode form, e.g. "MÜLLER"
    displayFirst: string;        // Best Unicode form, e.g. "JÜRGEN"
    source: 'dg11' | 'reverse_table' | 'raw';
  };
  face?: {
    data: string;                // Base64-encoded image
    mimeType: string;            // e.g. "image/jpeg"
  };
}

Name Sources

Source	Description
dg11	Exact printed name read from the NFC chip's DG11 file (UTF-8). Highest accuracy.
reverse_table	Reconstructed via ICAO 9303 reverse transliteration (e.g. OE→Ö, UE→Ü). Applied for known countries.
raw	No conversion — display equals the raw MRZ ASCII value.

With Branding

<Trustchex
  baseUrl="https://your-api.com"
  sessionId="session-123"
  branding={{
    logoUrl: 'https://your-logo.png',
    primaryColor: '#1E40AF',
    secondaryColor: '#F8FAFC',
    tertiaryColor: '#DC2626'
  }}
  locale="en"
  onCompleted={() => console.log('Done')}
/>

Deep Links (Optional)

Deep link functionality is an optional feature if you want to publish a standalone app. To process deep links with the SDK, you need to configure deep links in your app and set up the required hooks to handle incoming URLs.

1. Configure Deep Link Schemes

iOS - Add to Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>yourapp</string>
    </array>
  </dict>
</array>

Android - Add to AndroidManifest.xml:

<activity android:name=".MainActivity">
  <intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="yourapp" />
  </intent-filter>
</activity>

2. Set Up Deep Link Handling

Import and use the handleDeepLink function to process incoming URLs:

import React from 'react';
import { AppState, Linking } from 'react-native';
import Trustchex, { handleDeepLink } from '@trustchex/react-native-sdk';

const App = () => {
  const [baseUrl, setBaseUrl] = React.useState<string | undefined>();
  const [sessionId, setSessionId] = React.useState<string>('');

  React.useEffect(() => {
    const handleInitialDeepLink = async () => {
      const url = await Linking.getInitialURL();
      if (url) {
        const [bUrl, sId] = handleDeepLink({ url });
        if (bUrl && sId) {
          setBaseUrl(bUrl);
          setSessionId(sId);
        }
      }
    };

    const handleIncomingLink = ({ url }: { url: string }) => {
      const [bUrl, sId] = handleDeepLink({ url });
      if (bUrl && sId) {
        setBaseUrl(bUrl);
        setSessionId(sId);
      }
    };

    Linking.addEventListener('url', handleIncomingLink);
    handleInitialDeepLink();

    const subscription = AppState.addEventListener('change', (nextAppState) => {
      handleInitialDeepLink();
    });

    return () => {
      Linking.removeAllListeners('url');
      subscription.remove();
    };
  }, []);

  return (
    <Trustchex
      baseUrl={baseUrl}
      sessionId={sessionId}
      onCompleted={() => console.log('Done')}
      onError={(error) => console.error(error)}
    />
  );
};

The handleDeepLink function parses URLs with the format:

scheme://app-url/your-api.com/verification-session/session-123

And returns [baseUrl, sessionId] that you can use with the Trustchex component.

Sessions

Create sessions using the REST API.

Session Access Methods

The SDK provides multiple ways for users to access their verification session:

1. Deep Link (Recommended)

Users click a link that opens the app directly with the session:

// Deep link format: yourapp://app-url/your-api.com/verification-session/session-123
<Trustchex
  baseUrl="https://your-api.com"
  sessionId="session-123" // From deep link
  onCompleted={() => console.log('Done')}
/>

Benefits:

• Seamless user experience - one tap to start
• Direct navigation to verification
• No manual input required
• Works great for email and SMS campaigns

2. QR Code Scanning (Recommended)

Users scan a QR code that contains the session information. The SDK includes a built-in QR scanner accessible from the welcome screen.

Benefits:

• Quick and contactless
• No typing required
• Ideal for in-person verification
• Built-in scanner included in SDK

3. Session Code Entry (Alternative)

Users can manually enter an 8-character alphanumeric code:

<Trustchex
  baseUrl="https://your-api.com"
  // No sessionId prop needed - user enters code manually
  onCompleted={() => console.log('Done')}
/>

When no sessionId is provided, the SDK displays a screen where users can:

• Enter the 8-character session code
• Scan a QR code

Use Cases:

• Fallback when QR/deep link unavailable
• Phone/voice support scenarios
• Print media without QR capability

Creating Sessions

When creating a session via the REST API, you'll receive access methods in the response:

const response = await fetch('https://your-api.com/api/v1/verification-sessions', {
  method: 'POST',
  headers: { 'x-api-key': 'YOUR_API_KEY' },
  body: JSON.stringify({
    workflowId: 'workflow-123',
    email: '[email protected]'
  })
});

const { deepLink, qrCodeLink, sessionCode } = await response.json();

// Use deepLink for direct app navigation (recommended)
// Use qrCodeLink to generate QR code (recommended)
// Use sessionCode as alternative access method