TransferGratis KYC SDK

A comprehensive React Native SDK for identity verification (KYC - Know Your Customer) with Expo support, featuring advanced camera capabilities powered by react-native-vision-camera.

🚀 Features

✅ Advanced Camera Integration with react-native-vision-camera
✅ Selfie Capture with face detection and overlay
✅ Document Capture with auto-focus and quality controls
✅ Orientation Video Processing for liveness detection
✅ File Upload with validation
✅ Custom Overlays and instructions
✅ Permission Management with graceful fallbacks
✅ Multi-Platform Support (iOS, Android, Web)
✅ TypeScript Support with full type definitions
✅ Expo Config Plugin for easy setup
✅ JSON Template System for configurable KYC flows
✅ Multilingual Support (French, English)
✅ GPS Location Capture
✅ Country Selection with region mapping
✅ Reusable UI Components

📦 Installation

Installing Dependencies

npm install @transfergratis/react-native-sdk react-native-vision-camera expo-location expo-image-manipulator react-native-svg

Expo Configuration (app.json / app.config.js)

Add the plugin to your Expo configuration file:

{
  "expo": {
    "plugins": [
      [
        "react-native-vision-camera",
        {
          "cameraPermissionText": "This app uses the camera for KYC identity verification.",
          "enableMicrophonePermission": true,
          "microphonePermissionText": "This app uses the microphone for video recording."
        }
      ],
      [
        "@transfergratis/react-native-sdk/plugin",
        {
          "visionCamera": {
            "cameraPermissionText": "This app uses the camera for KYC identity verification.",
            "microphonePermissionText": "This app uses the microphone for video recording."
          },
          "location": {
            "locationPermissionText": "This app uses location to verify your identity and location.",
            "locationWhenInUsePermissionText": "This app uses location to verify your identity and location.",
            "enableBackgroundLocation": false
          }
        }
      ]
    ]
  }
}

Android Setup

The config plugin automatically handles Android permissions. No additional setup required.

iOS Setup

iOS permissions are also automatically handled by the Expo plugin.

🎯 Quick Start

Using JSON Templates (Recommended)

The recommended approach is to use the JSON template system to configure your KYC flow:

import React from 'react';
import { LauchTransferGratisKYC } from '@transfergratis/react-native-sdk';

export default function App() {
  return (
    <LauchTransferGratisKYC
          onComplete={(data:VerificationState) => {
            Alert.alert('Template KYC completed');
            setShowTemplateKYC(false);
            console.log('Template KYC completed', JSON.stringify(data, null, 2));
          }}
          onCancel={() => {
            setShowTemplateKYC(false);
            Alert.alert('Template KYC cancelled');
          }}
          onError={(error) => {
            Alert.alert('Template KYC error', error);
            setShowTemplateKYC(false);
          }}
          language="en"
          API_KEY={undefined} // for test env leave this blanc
        />
  );
}

🛠️ Development

Building the SDK

cd transfergratis-sdk
npm install
npm run build

Running the Example

cd transfergratis-sdk/example
npm install
npm run ios # or npm run android

Testing

npm test

Linting

npm run lint

🚀 npm Publishing

Prerequisites

• npm account with publish rights for the @transfergratis/react-native-sdk package
• Node 18+ and npm 9+

Release Steps

1. Install and clean

cd transfergratis-sdk
npm ci
npm run clean

2. Build the SDK

npm run build

3. Verify content to be published

npm publish --dry-run
npm pack
tar -tf transfergratis-react-native-sdk-*.tgz | cat

4. Bump version

# patch | minor | major | prerelease
npm version patch -m "release: %s"

5. npm login (if needed)

npm whoami || npm login

6. Publish to npm (public)

npm publish --access public

• With 2FA:

npm publish --access public --otp=123456

• Publish a pre-release (beta tag):

npm publish --tag beta --access public

7. Push git tags

git push && git push --tags

8. Verify published version

npm info @transfergratis/react-native-sdk version

📝 Supported Document Types

The SDK supports several government document types:

• identity_card - Identity card
• passport - Passport
• drivers_licence - Driver's license
• health_insurance_card - Health insurance card
• permanent_residence - Permanent residence permit
• national_id - National ID card
• work_permit - Work permit

🌍 Multilingual Support

The SDK currently supports French and English. Texts can be customized via the JSON template system using LocalizedText objects:

{
  labels: {
    en: "Upload your ID card",
    fr: "Téléversez votre carte d'identité"
  }
}

🚨 Breaking Changes

v0.1.10

• JSON Template System: New JSON-based configuration system
• Specialized KYC Components: New components for each KYC flow step
• Web Support: Added support for web applications
• Liveness Detection Improvements: Enhanced orientation video processing
• Multilingual Support: Improved support for multiple languages

v0.1.0

• Camera Implementation: Switched from custom native views to react-native-vision-camera
• Permissions: Now requires both camera and microphone permissions
• Component Props: Updated prop interfaces for better type safety
• Config Plugin: New plugin required for automatic permissions setup

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support, email [email protected] or open an issue on GitHub.

📚 Additional Resources

• Vision Camera Documentation
• Expo Documentation
• GitHub Repository

Built with ❤️ by the TransferGratis Team