@test-web/react-native-sdk 1.0.1 → 2.1.0

package/README.md

@@ -1,58 +1,575 @@
 # React Native IDM Scan SDK
 
-Complete identity verification SDK with 18 screens, 10 themes, and optimized performance.
+A fully dynamic, production-ready React Native SDK for identity verification with document scanning, selfie capture, and API-driven configuration.
 
-## Features
+## 🌟 Features
 
-✅ 18 verification screens  
-✅ 10 pre-built themes  
-✅ Camera & location permissions  
-✅ Document scanning  
-✅ Selfie capture  
-✅ Responsive design  
-✅ TypeScript support  
-✅ 60-80% optimized performance
+- ✅ **Fully Dynamic** - All configuration driven by API and metadata
+- ✅ **Smart Document Flow** - Automatically determines required capture steps
+- ✅ **18 Verification Screens** - Complete identity verification flow
+- ✅ **Document Scanning** - Support for ID cards, passports, driver licenses
+- ✅ **Selfie Capture** - Live selfie verification with camera integration
+- ✅ **MRZ & Barcode Scanning** - Machine-readable zone and barcode support
+- ✅ **10 Pre-built Themes** - Customizable UI themes
+- ✅ **Camera & Location Permissions** - Built-in permission handling
+- ✅ **TypeScript Support** - Full type definitions included
+- ✅ **Responsive Design** - Works on all screen sizes
+- ✅ **Optimized Performance** - Memoization and efficient state management
 
-## Installation
+---
+
+## 📱 Requirements
+
+- React Native >= 0.64.0
+- iOS >= 11.0
+- Android >= API 21 (Android 5.0)
+- Node.js >= 14.x
+
+---
+
+## 📦 Installation
+
+### Step 1: Install the SDK
+
+```bash
+npm install @test-web/react-native-sdk
+```
+
+or with Yarn:
+
+```bash
+yarn add @test-web/react-native-sdk
+```
+
+### Step 2: Install Required Dependencies
 
 ```bash
-npm install test-react-native-sdk
 npm install @react-navigation/native @react-navigation/native-stack
 npm install react-native-screens react-native-safe-area-context
+npm install react-native-vision-camera react-native-image-resizer react-native-fs
 ```
 
-**iOS:**
+### Step 3: Install Optional Dependencies (Recommended)
+
+```bash
+npm install react-native-device-info react-native-geolocation-service
+```
+
+### Step 4: Install iOS Pods (iOS only)
+
 ```bash
 cd ios && pod install && cd ..
 ```
 
-## Quick Start
+### Step 5: Rebuild Your App
+
+```bash
+# For Android
+npx react-native run-android
+
+# For iOS
+npx react-native run-ios
+```
+
+---
+
+## ⚙️ Configuration
+
+### Android Setup
+
+#### 1. Add Permissions to AndroidManifest.xml
+
+Open `android/app/src/main/AndroidManifest.xml` and add:
+
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Camera Permission (Required) -->
+    <uses-permission android:name="android.permission.CAMERA" />
+    
+    <!-- Location Permissions (Required) -->
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    
+    <!-- Storage Permissions (Required for saving images) -->
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" 
+                     android:maxSdkVersion="28" />
+    
+    <!-- Internet Permission (Required for API calls) -->
+    <uses-permission android:name="android.permission.INTERNET" />
+    
+    <!-- Camera Features (Optional but recommended) -->
+    <uses-feature android:name="android.hardware.camera" android:required="false" />
+    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
+
+    <application>
+        <!-- Your app configuration -->
+    </application>
+
+</manifest>
+```
+
+#### 2. Update build.gradle
+
+Ensure your `android/app/build.gradle` has minimum SDK version 21:
+
+```gradle
+android {
+    defaultConfig {
+        minSdkVersion 21
+        targetSdkVersion 33
+    }
+}
+```
+
+---
+
+### iOS Setup
+
+#### 1. Add Privacy Permissions to Info.plist
+
+Open `ios/YourAppName/Info.plist` and add:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<string>We need camera access to scan your documents and capture selfie for identity verification</string>
+
+<key>NSLocationWhenInUseUsageDescription</key>
+<string>We need your location for identity verification purposes</string>
+
+<key>NSPhotoLibraryUsageDescription</key>
+<string>We need access to your photo library to save captured images</string>
+
+<key>NSPhotoLibraryAddUsageDescription</key>
+<string>We need permission to save captured images to your photo library</string>
+```
+
+#### 2. Update Podfile
+
+Ensure your `ios/Podfile` has minimum iOS version 11.0:
+
+```ruby
+platform :ios, '11.0'
+```
+
+---
+
+## 🚀 Usage
+
+### Basic Implementation
+
+```typescript
+import React from 'react';
+import { IDMScan } from '@test-web/react-native-sdk';
+
+export default function App() {
+  const config = {
+    clientID: 'your-client-id',
+    clientSecret: 'your-client-secret',
+    environment: 'sandbox', // or 'production'
+    requestData: {
+      requestID: 'unique-request-id',
+      name: 'John Doe',
+      dateOfBirth: '1990-01-01',
+    },
+    theme: 'light',
+  };
+
+  return <IDMScan idmConf={config} />;
+}
+```
+
+### With Custom Configuration
 
 ```typescript
 import React from 'react';
-import { IDMScan } from 'test-react-native-sdk';
+import { IDMScan } from '@test-web/react-native-sdk';
+
+export default function App() {
+  const idmConfiguration = {
+    clientID: process.env.IDM_CLIENT_ID,
+    clientSecret: process.env.IDM_CLIENT_SECRET,
+    environment: 'sandbox',
+    requestData: {
+      requestID: generateUniqueId(),
+      name: 'John Doe',
+      dateOfBirth: '1990-01-01',
+      countryCode: 'US',
+      mobile: '+1234567890',
+      callbackURL: 'https://your-api.com/callback',
+    },
+    theme: 'ocean',
+  };
+
+  return <IDMScan idmConf={idmConfiguration} />;
+}
+```
+
+---
+
+## 🎨 Available Themes
+
+The SDK comes with 10 pre-built themes:
+
+| Theme Name | Usage |
+|------------|-------|
+| Light | `theme: 'light'` |
+| Dark | `theme: 'dark'` |
+| Ocean | `theme: 'ocean'` |
+| Sunset | `theme: 'sunset'` |
+| Forest | `theme: 'forest'` |
+| Pastel | `theme: 'pastel'` |
+| High Contrast | `theme: 'highContrast'` |
+| Professional | `theme: 'professional'` |
+| Sakura | `theme: 'sakura'` |
+| Midnight | `theme: 'midnight'` |
+
+### Custom Theme Example
+
+```typescript
+import { IDMScan } from '@test-web/react-native-sdk';
+
+const customTheme = {
+  colors: {
+    primary: '#FF6B6B',
+    secondary: '#4ECDC4',
+    background: '#FFFFFF',
+    text: '#2C3E50',
+    subtitle: '#7F8C8D',
+    border: '#BDC3C7',
+    error: '#E74C3C',
+    success: '#2ECC71',
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  },
+};
 
 export default function App() {
-  return <IDMScan idmConf={{ theme: 'light' }} />;
+  return <IDMScan idmConf={{ ...config, theme: customTheme }} />;
+}
+```
+
+---
+
+## 🔄 Dynamic Flow
+
+The SDK automatically determines the verification flow based on document metadata:
+
+### Flow Examples
+
+#### Example 1: Driver's License (Front Only)
+```json
+{
+  "document_flow": ["F"],
+  "barcode": "None"
+}
+```
+**Flow:** Selfie → Front Document → Complete
+
+#### Example 2: Passport (Front + MRZ)
+```json
+{
+  "document_flow": ["F"],
+  "barcode": "TD3"
+}
+```
+**Flow:** Selfie → Front Document → MRZ Scan → Complete
+
+#### Example 3: National ID (Front + Back + Barcode)
+```json
+{
+  "document_flow": ["F", "B"],
+  "barcode": "PDF417 B"
 }
 ```
+**Flow:** Selfie → Front Document → Back Document → Barcode Scan → Complete
 
-## Themes
+---
+
+## 📚 API Reference
+
+### IDMConf Interface
+
+```typescript
+interface IDMConf {
+  // Required
+  clientID: string;
+  clientSecret: string;
+  environment: 'sandbox' | 'production';
+  requestData: RequestData;
+
+  // Optional
+  theme?: 'light' | 'dark' | Theme;
+  userDetails?: UserDetails;
+  accessToken?: string;
+  verificationCode?: string;
+  configuration?: Configuration;
+  countryDetails?: CountryDetail[];
+  selectedCountryDetails?: SelectedCountryDetail;
+  requestConfiguration?: RequestConfiguration;
+}
+
+interface RequestData {
+  requestID: string;
+  name?: string;
+  dateOfBirth?: string;
+  countryCode?: string;
+  mobile?: string;
+  callbackURL?: string;
+  redirectURL?: string;
+}
+```
+
+### Exported Components
+
+```typescript
+import {
+  IDMScan,           // Main SDK component
+  Button,            // Themed button component
+  ThemedText,        // Themed text component
+  Loader,            // Loading indicator
+  Header,            // Header component
+  Footer,            // Footer component
+  CustomOverlay,     // Overlay component
+} from '@test-web/react-native-sdk';
+```
+
+### Exported Hooks
+
+```typescript
+import {
+  useTheme,          // Access current theme
+  useOrientation,    // Detect device orientation
+  useKeyboard,       // Keyboard visibility state
+  useIDM,            // Access IDM configuration
+} from '@test-web/react-native-sdk';
+```
+
+### Exported Utilities
+
+```typescript
+import {
+  debounce,                    // Debounce function calls
+  throttle,                    // Throttle function calls
+  memoize,                     // Memoize function results
+  base64Encode,                // Encode to base64
+  base64Decode,                // Decode from base64
+  getDocumentLabel,            // Get document type label
+  FlowManager,                 // Flow management class
+  createFlowManager,           // Create flow manager
+  processImageToBase64,        // Process images
+} from '@test-web/react-native-sdk';
+```
+
+### API Services
+
+```typescript
+import { ScanServices } from '@test-web/react-native-sdk';
+
+// Available APIs
+ScanServices.getUserDataAPI();
+ScanServices.generateAccessToken(config);
+ScanServices.generateRequest(config, requestData);
+ScanServices.getConfiguration(config, verificationCode);
+ScanServices.getCountries(config);
+ScanServices.captureDocumentFront(config, photoData);
+ScanServices.captureDocumentBack(config, photoData);
+ScanServices.captureBarcode(config, barcodeData);
+ScanServices.captureMRZ(config, mrzData);
+ScanServices.completeVerification(config);
+```
+
+---
+
+## 🔧 Troubleshooting
+
+### Common Issues
+
+#### 1. Camera Permission Denied
+
+**Problem:** Camera not working or permission denied error.
+
+**Solution:**
+- Ensure you've added camera permissions to `AndroidManifest.xml` (Android)
+- Ensure you've added `NSCameraUsageDescription` to `Info.plist` (iOS)
+- Request permissions at runtime before using the SDK
+
+#### 2. Location Not Available
+
+**Problem:** Location permission errors.
+
+**Solution:**
+- Check location permissions in manifest/plist
+- Ensure GPS is enabled on device
+- Verify react-native-geolocation-service is installed
+
+#### 3. Navigation Error
+
+**Problem:** `Couldn't find a navigation object` error.
+
+**Solution:**
+- Ensure all navigation dependencies are installed
+- Run `pod install` for iOS
+- Clean and rebuild the app
+
+#### 4. iOS Build Failed
+
+**Problem:** Build fails on iOS after installation.
+
+**Solution:**
+```bash
+cd ios && pod install && cd ..
+# Clean build folder in Xcode
+# Product → Clean Build Folder
+# Rebuild the app
+```
+
+#### 5. Android Build Failed
+
+**Problem:** Build fails on Android with dependency errors.
+
+**Solution:**
+```bash
+cd android && ./gradlew clean && cd ..
+# Rebuild the app
+```
+
+#### 6. Image Processing Fails
+
+**Problem:** Images not uploading or processing errors.
+
+**Solution:**
+- Ensure react-native-image-resizer is installed
+- Ensure react-native-fs is installed
+- Check storage permissions
+
+---
+
+## 🎯 Advanced Usage
+
+### Using Context
+
+```typescript
+import { useIDM } from '@test-web/react-native-sdk';
+
+function MyComponent() {
+  const { idmConf, updateIDMConf } = useIDM();
+  
+  // Access configuration
+  console.log(idmConf.verificationCode);
+  
+  // Update configuration
+  updateIDMConf({ theme: 'dark' });
+}
+```
+
+### Flow Manager
+
+```typescript
+import { createFlowManager } from '@test-web/react-native-sdk';
+
+const metadata = idmConf.selectedCountryDetails?.selectedMetaData;
+const flowManager = createFlowManager(metadata);
+
+// Check requirements
+const needsBack = flowManager.requiresBackCapture();
+const needsBarcode = flowManager.requiresBarcodeCapture();
+const needsMRZ = flowManager.requiresMRZCapture();
+
+// Get next screen
+const nextScreen = flowManager.getNextScreenAfterFront();
+```
+
+### Image Processing
 
 ```typescript
-import { IDMScan, themes } from 'test-react-native-sdk';
+import { processImageToBase64 } from '@test-web/react-native-sdk';
 
-<IDMScan idmConf={{ theme: themes.ocean }} />
-<IDMScan idmConf={{ theme: themes.dark }} />
-<IDMScan idmConf={{ theme: themes.sunset }} />
+const base64Image = await processImageToBase64(imagePath, {
+  width: 810,
+  height: 1080,
+  quality: 70,
+  format: 'JPEG',
+});
 ```
 
-Available: `light`, `dark`, `ocean`, `sunset`, `forest`, `pastel`, `highContrast`, `professional`, `sakura`, `midnight`
+---
+
+## 📊 Performance
+
+The SDK includes several performance optimizations:
+
+- **Memoization** - Components and calculations are memoized
+- **Lazy Loading** - Heavy dependencies loaded only when needed
+- **Image Optimization** - Images resized before upload (810x1080, 70% quality)
+- **Efficient State** - Minimal re-renders with optimized context
+- **API Caching** - Countries and configuration cached after first fetch
+
+---
+
+## 🔒 Security
+
+- OAuth2 authentication with client credentials
+- Secure token management
+- HTTPS for all API calls
+- No sensitive data stored locally
+- Proper error handling without exposing internals
+
+---
+
+## 📄 License
+
+MIT License
+
+Copyright (c) 2024 Your Company
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
+## 📞 Support
+
+- **Email:** hello@yourcompany.com
+- **GitHub:** https://github.com/yourcompany/react-native-sdk
+- **Documentation:** https://docs.yourcompany.com
+
+---
+
+## 🎉 What's New in v2.0.0
+
+### Major Changes
+- ✅ **Fully Dynamic** - All configuration driven by API
+- ✅ **Metadata-Driven Navigation** - Automatic flow determination
+- ✅ **Real API Integration** - All APIs implemented
+- ✅ **Enhanced Type System** - Complete TypeScript coverage
+- ✅ **Performance Optimizations** - Memoization and efficient rendering
+- ✅ **Image Processing** - Automatic resize and compression
+- ✅ **Flow Manager** - Smart navigation based on document type
+- ✅ **Better Error Handling** - Comprehensive error management
+- ✅ **Loading States** - User feedback throughout the flow
+
+### Breaking Changes from v1.x
+- `clientID`, `clientSecret`, `environment`, and `requestData` are now required
+- Static country data removed (now fetched from API)
+- Navigation flow is now metadata-driven
 
-## Documentation
+### Migration from v1.x
+See migration guide in the repository for detailed instructions.
 
-See [SETUP.md](./SETUP.md) for complete installation and integration guide.
+---
 
-## License
+**Made with ❤️ by Your Company**
 
-MIT
+**Version:** 2.0.0  
+**Status:** Production Ready  
+**Last Updated:** December 22, 2024

package/assets/images/Chrome-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" height="112" width="112"><defs><linearGradient id="a" x1="3.2173" y1="15" x2="44.7812" y2="15" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d93025"/><stop offset="1" stop-color="#ea4335"/></linearGradient><linearGradient id="b" x1="20.7219" y1="47.6791" x2="41.5039" y2="11.6837" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fcc934"/><stop offset="1" stop-color="#fbbc04"/></linearGradient><linearGradient id="c" x1="26.5981" y1="46.5015" x2="5.8161" y2="10.506" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1e8e3e"/><stop offset="1" stop-color="#34a853"/></linearGradient></defs><circle cx="24" cy="23.9947" r="12" style="fill:#fff"/><path d="M3.2154,36A24,24,0,1,0,12,3.2154,24,24,0,0,0,3.2154,36ZM34.3923,18A12,12,0,1,1,18,13.6077,12,12,0,0,1,34.3923,18Z" style="fill:none"/><path d="M24,12H44.7812a23.9939,23.9939,0,0,0-41.5639.0029L13.6079,30l.0093-.0024A11.9852,11.9852,0,0,1,24,12Z" style="fill:url(#a)"/><circle cx="24" cy="24" r="9.5" style="fill:#1a73e8"/><path d="M34.3913,30.0029,24.0007,48A23.994,23.994,0,0,0,44.78,12.0031H23.9989l-.0025.0093A11.985,11.985,0,0,1,34.3913,30.0029Z" style="fill:url(#b)"/><path d="M13.6086,30.0031,3.218,12.006A23.994,23.994,0,0,0,24.0025,48L34.3931,30.0029l-.0067-.0068a11.9852,11.9852,0,0,1-20.7778.007Z" style="fill:url(#c)"/></svg>