React Native SDK for KYC Integration

Our React Native SDK (@authenticalls/react-native-kyc-sdk) streamlines mobile KYC implementations by providing a customizable modal component that handles session initialization, camera-based document scanning, and result callbacks—all within your app. It integrates seamlessly with react-native-vision-camera and react-native-reanimated to deliver a smooth, native experience. (npmjs.com)

---

1. Installation

Install the SDK as a dependency in your React Native project:

npm install @authenticalls/react-native-kyc-sdk

Ensure you have the necessary native dependencies and rebuild your app. (npmjs.com)

---

2. Configuration

2.1 Babel Plugins

Add the following plugins to your babel.config.js:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    ['react-native-reanimated/plugin', { processNestedWorklets: true }],
    ['react-native-worklets-core/plugin'],
  ],
};

2.2 Fonts Asset Linking

Include the SDK’s bundled fonts in your project by adding to react-native.config.js:

module.exports = {
  assets: ['./node_modules/@authenticalls/react-native-kyc-sdk/src/assets/fonts/'],
};

2.3 Permissions

Android (AndroidManifest.xml):

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />

iOS (Info.plist):

<key>NSCameraUsageDescription</key>
<string>YourApp needs camera access for identity verification.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>YourApp needs photo library access to store captured images.</string>

---

3. Usage

Import and render the modal in your component tree:

import React, { useState } from 'react';
import AuthenticallsModal from '@authenticalls/react-native-kyc-sdk';

function KycScreen() {
  const [visible, setVisible] = useState(false);

  const handleClose = ({ status, validationID }) => {
    setVisible(false);
    if (status === 'APPROVED') {
      // Fetch detailed verdict or update UI
      console.log('Validation ID:', validationID);
    }
  };

  return (
    <>
      <Button title="Start KYC" onPress={() => setVisible(true)} />
      <AuthenticallsModal
        user={{
          country: 'RO',
          documentNumber: '123456789',
          documentType: 'ID_CARD',
          firstName: 'Jane',
          lastName: 'Doe',
        }}
        apiKey="YOUR_API_KEY"
        lang="en"
        maxFailures={3}
        timeout={120000}
        visible={visible}
        onClose={handleClose}
      />
    </>
  );
}

Component Props (required) (npmjs.com):

Prop	Type	Description
user	{ country, documentNumber, documentType, firstName, lastName }	Customer details for verification
apiKey	string	Your KYC API key
lang	'en' | 'ro' | 'fr'	UI language
maxFailures	number	Max unsuccessful attempts
timeout	number (ms)	Request timeout
visible	boolean	Show/hide the modal
onClose	(result?: { status: 'PENDING' | 'REJECTED' | 'APPROVED'; validationID?: string })	Callback with verification outcome