@test-web/react-native-sdk 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/README.md +824 -26
  2. package/assets/images/Chrome-logo.svg +1 -0
  3. package/assets/images/Firefox-logo.png +0 -0
  4. package/assets/images/IDM-logo.jpg +0 -0
  5. package/assets/images/MRZOverlay.png +0 -0
  6. package/assets/images/Safari-logo.png +0 -0
  7. package/assets/images/aadhar.png +0 -0
  8. package/assets/images/camera-bg.png +0 -0
  9. package/assets/images/card-overlay-back.png +0 -0
  10. package/assets/images/card-overlay.png +0 -0
  11. package/assets/images/card-scan-back-icon.jpg +0 -0
  12. package/assets/images/card-scan-front-icon.png +0 -0
  13. package/assets/images/card-scan-icon-aadhaar-1.png +0 -0
  14. package/assets/images/card-scan-icon-aadhaar-back.png +0 -0
  15. package/assets/images/card-scan-icon-aadhaar-scan-qr.png +0 -0
  16. package/assets/images/card-scan-icon-aadhaar.png +0 -0
  17. package/assets/images/card-scan-icon-can-pr.png +0 -0
  18. package/assets/images/card-scan-icon-default-back.png +0 -0
  19. package/assets/images/card-scan-icon-dl.png +0 -0
  20. package/assets/images/card-scan-icon-greencard-back.jpg +0 -0
  21. package/assets/images/card-scan-icon-greencard.jpg +0 -0
  22. package/assets/images/card-scan-icon-hc.png +0 -0
  23. package/assets/images/card-scan-icon-ni-argentina-back.jpg +0 -0
  24. package/assets/images/card-scan-icon-ni-argentina-old.png +0 -0
  25. package/assets/images/card-scan-icon-ni-argentina.jpg +0 -0
  26. package/assets/images/card-scan-icon-ni-barcode.jpg +0 -0
  27. package/assets/images/card-scan-icon-ni-brazil-back.jpg +0 -0
  28. package/assets/images/card-scan-icon-ni-brazil.jpg +0 -0
  29. package/assets/images/card-scan-icon-ni-dominican-republic-back.png +0 -0
  30. package/assets/images/card-scan-icon-ni-dominican-republic-front.png +0 -0
  31. package/assets/images/card-scan-icon-ni-dominican-republic-mrz.png +0 -0
  32. package/assets/images/card-scan-icon-ni-dominicanaRepublic-back.jpg +0 -0
  33. package/assets/images/card-scan-icon-ni-france-back.png +0 -0
  34. package/assets/images/card-scan-icon-ni-france-front.png +0 -0
  35. package/assets/images/card-scan-icon-ni-france-scan-mrz.png +0 -0
  36. package/assets/images/card-scan-icon-ni-germany-back.jpg +0 -0
  37. package/assets/images/card-scan-icon-ni-germany.jpg +0 -0
  38. package/assets/images/card-scan-icon-ni-paraguay-back.png +0 -0
  39. package/assets/images/card-scan-icon-ni-paraguay-front.png +0 -0
  40. package/assets/images/card-scan-icon-ni-paraguay-scan-mrz.png +0 -0
  41. package/assets/images/card-scan-icon-ni-uae-back.png +0 -0
  42. package/assets/images/card-scan-icon-ni-uae-front.png +0 -0
  43. package/assets/images/card-scan-icon-ni-uae-scan-mrz.png +0 -0
  44. package/assets/images/card-scan-icon-ni-uganda-front.png +0 -0
  45. package/assets/images/card-scan-icon-ni-uganda-scan-mrz.png +0 -0
  46. package/assets/images/card-scan-icon-ni-ukrain-back.png +0 -0
  47. package/assets/images/card-scan-icon-ni-ukrain-front.png +0 -0
  48. package/assets/images/card-scan-icon-ni-ukrain-scan-mrz.png +0 -0
  49. package/assets/images/card-scan-icon-ni.png +0 -0
  50. package/assets/images/card-scan-icon-old.jpg +0 -0
  51. package/assets/images/card-scan-icon-pan.png +0 -0
  52. package/assets/images/card-scan-icon-passport-card-back.jpg +0 -0
  53. package/assets/images/card-scan-icon-passport-card.jpg +0 -0
  54. package/assets/images/card-scan-icon-passport-old.png +0 -0
  55. package/assets/images/card-scan-icon-passport.png +0 -0
  56. package/assets/images/card-scan-icon-pr.png +0 -0
  57. package/assets/images/card-scan-icon.jpg +0 -0
  58. package/assets/images/check.png +0 -0
  59. package/assets/images/chrome-animation-GPS-permissions-setting.gif +0 -0
  60. package/assets/images/chrome-animation-camera-permissions-setting.gif +0 -0
  61. package/assets/images/denied.png +0 -0
  62. package/assets/images/dl.png +0 -0
  63. package/assets/images/driver-license.png +0 -0
  64. package/assets/images/firefox-animation-permissions-setting.gif +0 -0
  65. package/assets/images/flashlight_on.png +0 -0
  66. package/assets/images/gallery.png +0 -0
  67. package/assets/images/greencard.png +0 -0
  68. package/assets/images/header.jpg +0 -0
  69. package/assets/images/health-card.png +0 -0
  70. package/assets/images/ic_camera_front_white_36px.svg +4 -0
  71. package/assets/images/ic_camera_rear_white_36px.svg +4 -0
  72. package/assets/images/ic_fullscreen_exit_white_48px.svg +4 -0
  73. package/assets/images/ic_fullscreen_white_48px.svg +4 -0
  74. package/assets/images/ic_photo_camera_white_48px.svg +5 -0
  75. package/assets/images/id-card.png +0 -0
  76. package/assets/images/idcardimg.png +0 -0
  77. package/assets/images/idmval-barcode.png +0 -0
  78. package/assets/images/information.png +0 -0
  79. package/assets/images/loader.gif +0 -0
  80. package/assets/images/loading.svg +1 -0
  81. package/assets/images/logo.jpg +0 -0
  82. package/assets/images/logo.png +0 -0
  83. package/assets/images/mrz-back.png +0 -0
  84. package/assets/images/mrz-ni.png +0 -0
  85. package/assets/images/mrz.png +0 -0
  86. package/assets/images/mrz1.png +0 -0
  87. package/assets/images/mrz_old.png +0 -0
  88. package/assets/images/mrz_small.png +0 -0
  89. package/assets/images/national-id.png +0 -0
  90. package/assets/images/nationalID.png +0 -0
  91. package/assets/images/no-wifi.png +0 -0
  92. package/assets/images/passport-card.png +0 -0
  93. package/assets/images/passport.png +0 -0
  94. package/assets/images/permit-card.png +0 -0
  95. package/assets/images/photo-overlay.png +0 -0
  96. package/assets/images/placeholder.jpg +0 -0
  97. package/assets/images/qr-code.png +0 -0
  98. package/assets/images/right-checkmark.jpg +0 -0
  99. package/assets/images/selfie.jpg +0 -0
  100. package/assets/images/showing-sec.png +0 -0
  101. package/assets/images/spinner.gif +0 -0
  102. package/assets/images/splash-icon.png +0 -0
  103. package/assets/images/take-selfie.jpg +0 -0
  104. package/assets/images/torch_off.png +0 -0
  105. package/assets/images/warning-icon.jpg +0 -0
  106. package/assets/images/warning-stick.jpg +0 -0
  107. package/assets/images/wrong-checkmark.jpg +0 -0
  108. package/package.json +44 -8
  109. package/src/apis/index.ts +338 -17
  110. package/src/components/common/Loader.tsx +16 -2
  111. package/src/config/apiConfig.ts +6 -0
  112. package/src/index.tsx +123 -7
  113. package/src/screens/BarcodeCapture.tsx +154 -24
  114. package/src/screens/DocumentCaptureBack.tsx +133 -24
  115. package/src/screens/DocumentCaptureFront.tsx +146 -24
  116. package/src/screens/MrzCapture.tsx +205 -16
  117. package/src/screens/SelectDocuments.tsx +37 -56
  118. package/src/screens/SelfieCapture.tsx +114 -18
  119. package/src/screens/ThankYou.tsx +34 -1
  120. package/src/services/getUserData.ts +111 -0
  121. package/src/types/IDMConf.ts +81 -7
  122. package/src/utils/base64.ts +25 -0
  123. package/src/utils/flowManager.ts +138 -0
  124. package/src/utils/imageProcessor.ts +96 -0
  125. package/src/utils/index.ts +18 -0
package/README.md CHANGED
@@ -1,58 +1,856 @@
1
1
  # React Native IDM Scan SDK
2
2
 
3
- Complete identity verification SDK with 18 screens, 10 themes, and optimized performance.
3
+ A fully dynamic, production-ready React Native SDK for identity verification with document scanning, selfie capture, and API-driven configuration.
4
4
 
5
- ## Features
5
+ ## 🌟 Features
6
6
 
7
- 18 verification screens
8
- 10 pre-built themes
9
- Camera & location permissions
10
- ✅ Document scanning
11
- ✅ Selfie capture
12
- Responsive design
13
- TypeScript support
14
- 60-80% optimized performance
7
+ - **Fully Dynamic** - All configuration driven by API and metadata
8
+ - **Smart Document Flow** - Automatically determines required capture steps
9
+ - **18 Verification Screens** - Complete identity verification flow
10
+ - **Document Scanning** - Support for ID cards, passports, driver licenses
11
+ - **Selfie Capture** - Live selfie verification with camera integration
12
+ - **MRZ & Barcode Scanning** - Machine-readable zone and barcode support with Dynamsoft & ML Kit
13
+ - **Advanced Scanning** - Optional Dynamsoft barcode scanner and ML Kit text recognition
14
+ - **10 Pre-built Themes** - Customizable UI themes
15
+ - ✅ **Camera & Location Permissions** - Built-in permission handling
16
+ - ✅ **TypeScript Support** - Full type definitions included
17
+ - ✅ **Responsive Design** - Works on all screen sizes
18
+ - ✅ **Optimized Performance** - Memoization and efficient state management
15
19
 
16
- ## Installation
20
+ ---
21
+
22
+ ## 📱 Requirements
23
+
24
+ - React Native >= 0.64.0
25
+ - iOS >= 11.0
26
+ - Android >= API 21 (Android 5.0)
27
+ - Node.js >= 14.x
28
+
29
+ ---
30
+
31
+ ## 📦 Installation
32
+
33
+ ### Step 1: Install the SDK
34
+
35
+ ```bash
36
+ npm install @test-web/react-native-sdk
37
+ ```
38
+
39
+ or with Yarn:
40
+
41
+ ```bash
42
+ yarn add @test-web/react-native-sdk
43
+ ```
44
+
45
+ ### Step 2: Install Required Dependencies
17
46
 
18
47
  ```bash
19
- npm install test-react-native-sdk
20
48
  npm install @react-navigation/native @react-navigation/native-stack
21
49
  npm install react-native-screens react-native-safe-area-context
50
+ npm install react-native-vision-camera react-native-image-resizer react-native-fs
51
+ ```
52
+
53
+ ### Step 3: Install Optional Dependencies (Recommended)
54
+
55
+ ```bash
56
+ npm install react-native-device-info react-native-geolocation-service
57
+ ```
58
+
59
+ ### Step 4: Install Scanning Libraries (Optional but Recommended)
60
+
61
+ For enhanced barcode and MRZ scanning capabilities:
62
+
63
+ ```bash
64
+ # Dynamsoft Capture Vision for barcode scanning
65
+ npm install dynamsoft-capture-vision-react-native
66
+
67
+ # ML Kit for MRZ text recognition
68
+ npm install @react-native-ml-kit/text-recognition
22
69
  ```
23
70
 
24
- **iOS:**
71
+ **Note:** Without these libraries, the SDK will use fallback simulation for barcode and MRZ scanning. For production use, we strongly recommend installing these libraries for accurate scanning.
72
+
73
+ ### Step 5: Install iOS Pods (iOS only)
74
+
25
75
  ```bash
26
76
  cd ios && pod install && cd ..
27
77
  ```
28
78
 
29
- ## Quick Start
79
+ ### Step 6: Rebuild Your App
80
+
81
+ ```bash
82
+ # For Android
83
+ npx react-native run-android
84
+
85
+ # For iOS
86
+ npx react-native run-ios
87
+ ```
88
+
89
+ ---
90
+
91
+ ## ⚙️ Configuration
92
+
93
+ ### Android Setup
94
+
95
+ #### 1. Add Permissions to AndroidManifest.xml
96
+
97
+ Open `android/app/src/main/AndroidManifest.xml` and add:
98
+
99
+ ```xml
100
+ <manifest xmlns:android="http://schemas.android.com/apk/res/android">
101
+
102
+ <!-- Camera Permission (Required) -->
103
+ <uses-permission android:name="android.permission.CAMERA" />
104
+
105
+ <!-- Location Permissions (Required) -->
106
+ <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
107
+ <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
108
+
109
+ <!-- Storage Permissions (Required for saving images) -->
110
+ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
111
+ <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
112
+ android:maxSdkVersion="28" />
113
+
114
+ <!-- Internet Permission (Required for API calls) -->
115
+ <uses-permission android:name="android.permission.INTERNET" />
116
+
117
+ <!-- Camera Features (Optional but recommended) -->
118
+ <uses-feature android:name="android.hardware.camera" android:required="false" />
119
+ <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
120
+
121
+ <application>
122
+ <!-- Your app configuration -->
123
+ </application>
124
+
125
+ </manifest>
126
+ ```
127
+
128
+ #### 2. Update build.gradle
129
+
130
+ Ensure your `android/app/build.gradle` has minimum SDK version 21:
131
+
132
+ ```gradle
133
+ android {
134
+ defaultConfig {
135
+ minSdkVersion 21
136
+ targetSdkVersion 33
137
+ }
138
+ }
139
+ ```
140
+
141
+ ---
142
+
143
+ ### iOS Setup
144
+
145
+ #### 1. Add Privacy Permissions to Info.plist
146
+
147
+ Open `ios/YourAppName/Info.plist` and add:
148
+
149
+ ```xml
150
+ <key>NSCameraUsageDescription</key>
151
+ <string>We need camera access to scan your documents and capture selfie for identity verification</string>
152
+
153
+ <key>NSLocationWhenInUseUsageDescription</key>
154
+ <string>We need your location for identity verification purposes</string>
155
+
156
+ <key>NSPhotoLibraryUsageDescription</key>
157
+ <string>We need access to your photo library to save captured images</string>
158
+
159
+ <key>NSPhotoLibraryAddUsageDescription</key>
160
+ <string>We need permission to save captured images to your photo library</string>
161
+ ```
162
+
163
+ #### 2. Update Podfile
164
+
165
+ Ensure your `ios/Podfile` has minimum iOS version 11.0:
166
+
167
+ ```ruby
168
+ platform :ios, '11.0'
169
+ ```
170
+
171
+ ---
172
+
173
+ ### Dynamsoft Barcode Scanner Setup (Optional)
174
+
175
+ If you installed `dynamsoft-capture-vision-react-native`, follow these additional steps:
176
+
177
+ #### Android Configuration
178
+
179
+ 1. Add to `android/app/build.gradle`:
180
+
181
+ ```gradle
182
+ android {
183
+ defaultConfig {
184
+ minSdkVersion 21
185
+ // Add this for Dynamsoft
186
+ ndk {
187
+ abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
188
+ }
189
+ }
190
+ }
191
+ ```
192
+
193
+ 2. Get your Dynamsoft license key from [Dynamsoft Customer Portal](https://www.dynamsoft.com/customer/license/trialLicense)
194
+
195
+ 3. Initialize the license in your app (before using the SDK):
196
+
197
+ ```typescript
198
+ import { DCVBarcodeReader } from 'dynamsoft-capture-vision-react-native';
199
+
200
+ // Initialize Dynamsoft license (do this once at app startup)
201
+ await DCVBarcodeReader.initLicense('YOUR_DYNAMSOFT_LICENSE_KEY');
202
+ ```
203
+
204
+ #### iOS Configuration
205
+
206
+ 1. Add to `ios/Podfile`:
207
+
208
+ ```ruby
209
+ platform :ios, '11.0'
210
+
211
+ target 'YourApp' do
212
+ # ... other pods
213
+
214
+ # Add this for Dynamsoft
215
+ pod 'DynamsoftCaptureVisionRouter', '~> 2.0'
216
+ pod 'DynamsoftBarcodeReader', '~> 10.0'
217
+ end
218
+ ```
219
+
220
+ 2. Run `pod install`:
221
+
222
+ ```bash
223
+ cd ios && pod install && cd ..
224
+ ```
225
+
226
+ **Note:** The SDK will automatically detect if Dynamsoft is available and use it for barcode scanning. If not installed, it will fall back to simulation mode.
227
+
228
+ ---
229
+
230
+ ### ML Kit Text Recognition Setup (Optional)
231
+
232
+ If you installed `@react-native-ml-kit/text-recognition`, follow these additional steps:
233
+
234
+ #### Android Configuration
235
+
236
+ ML Kit will be automatically configured on Android. No additional setup required.
237
+
238
+ #### iOS Configuration
239
+
240
+ 1. Add to `ios/Podfile`:
241
+
242
+ ```ruby
243
+ platform :ios, '11.0'
244
+
245
+ target 'YourApp' do
246
+ # ... other pods
247
+
248
+ # ML Kit is automatically linked
249
+ end
250
+ ```
251
+
252
+ 2. Run `pod install`:
253
+
254
+ ```bash
255
+ cd ios && pod install && cd ..
256
+ ```
257
+
258
+ **Note:** The SDK will automatically detect if ML Kit is available and use it for MRZ text recognition. If not installed, it will fall back to simulation mode.
259
+
260
+ ---
261
+
262
+ ## 🚀 Usage
263
+
264
+ ### Basic Implementation
30
265
 
31
266
  ```typescript
32
267
  import React from 'react';
33
- import { IDMScan } from 'test-react-native-sdk';
268
+ import { IDMScan } from '@test-web/react-native-sdk';
34
269
 
35
270
  export default function App() {
36
- return <IDMScan idmConf={{ theme: 'light' }} />;
271
+ const config = {
272
+ clientID: 'your-client-id',
273
+ clientSecret: 'your-client-secret',
274
+ environment: 'sandbox', // or 'production'
275
+ requestData: {
276
+ requestID: 'unique-request-id',
277
+ name: 'John Doe',
278
+ dateOfBirth: '1990-01-01',
279
+ },
280
+ theme: 'light',
281
+ };
282
+
283
+ return <IDMScan idmConf={config} />;
284
+ }
285
+ ```
286
+
287
+ ### With Custom Configuration
288
+
289
+ ```typescript
290
+ import React from 'react';
291
+ import { IDMScan } from '@test-web/react-native-sdk';
292
+
293
+ export default function App() {
294
+ const idmConfiguration = {
295
+ clientID: process.env.IDM_CLIENT_ID,
296
+ clientSecret: process.env.IDM_CLIENT_SECRET,
297
+ environment: 'sandbox',
298
+ requestData: {
299
+ requestID: generateUniqueId(),
300
+ name: 'John Doe',
301
+ dateOfBirth: '1990-01-01',
302
+ countryCode: 'US',
303
+ mobile: '+1234567890',
304
+ callbackURL: 'https://your-api.com/callback',
305
+ },
306
+ theme: 'ocean',
307
+ };
308
+
309
+ return <IDMScan idmConf={idmConfiguration} />;
310
+ }
311
+ ```
312
+
313
+ ---
314
+
315
+ ## 🎨 Available Themes
316
+
317
+ The SDK comes with 10 pre-built themes:
318
+
319
+ | Theme Name | Usage |
320
+ |------------|-------|
321
+ | Light | `theme: 'light'` |
322
+ | Dark | `theme: 'dark'` |
323
+ | Ocean | `theme: 'ocean'` |
324
+ | Sunset | `theme: 'sunset'` |
325
+ | Forest | `theme: 'forest'` |
326
+ | Pastel | `theme: 'pastel'` |
327
+ | High Contrast | `theme: 'highContrast'` |
328
+ | Professional | `theme: 'professional'` |
329
+ | Sakura | `theme: 'sakura'` |
330
+ | Midnight | `theme: 'midnight'` |
331
+
332
+ ### Custom Theme Example
333
+
334
+ ```typescript
335
+ import { IDMScan } from '@test-web/react-native-sdk';
336
+
337
+ const customTheme = {
338
+ colors: {
339
+ primary: '#FF6B6B',
340
+ secondary: '#4ECDC4',
341
+ background: '#FFFFFF',
342
+ text: '#2C3E50',
343
+ subtitle: '#7F8C8D',
344
+ border: '#BDC3C7',
345
+ error: '#E74C3C',
346
+ success: '#2ECC71',
347
+ },
348
+ spacing: {
349
+ xs: 4,
350
+ sm: 8,
351
+ md: 16,
352
+ lg: 24,
353
+ xl: 32,
354
+ },
355
+ };
356
+
357
+ export default function App() {
358
+ return <IDMScan idmConf={{ ...config, theme: customTheme }} />;
359
+ }
360
+ ```
361
+
362
+ ---
363
+
364
+ ## 📸 Scanning Capabilities
365
+
366
+ ### Barcode Scanning
367
+
368
+ The SDK supports barcode scanning with two modes:
369
+
370
+ #### 1. Production Mode (Recommended)
371
+
372
+ Install Dynamsoft Capture Vision for accurate barcode scanning:
373
+
374
+ ```bash
375
+ npm install dynamsoft-capture-vision-react-native
376
+ ```
377
+
378
+ **Supported Barcode Types:**
379
+ - PDF417 (Driver's License, ID Cards)
380
+ - QR Code
381
+ - Code 128
382
+ - Code 39
383
+ - EAN-13
384
+ - UPC-A
385
+ - And more...
386
+
387
+ **Initialize License:**
388
+
389
+ ```typescript
390
+ import { DCVBarcodeReader } from 'dynamsoft-capture-vision-react-native';
391
+
392
+ // At app startup
393
+ await DCVBarcodeReader.initLicense('YOUR_LICENSE_KEY');
394
+ ```
395
+
396
+ Get your free trial license from [Dynamsoft Customer Portal](https://www.dynamsoft.com/customer/license/trialLicense).
397
+
398
+ #### 2. Fallback Mode
399
+
400
+ Without Dynamsoft installed, the SDK will use simulation mode for testing purposes. This is useful for development but not recommended for production.
401
+
402
+ ### MRZ Scanning
403
+
404
+ The SDK supports MRZ (Machine Readable Zone) scanning with two modes:
405
+
406
+ #### 1. Production Mode (Recommended)
407
+
408
+ Install ML Kit Text Recognition for accurate MRZ scanning:
409
+
410
+ ```bash
411
+ npm install @react-native-ml-kit/text-recognition
412
+ ```
413
+
414
+ **Supported MRZ Types:**
415
+ - TD1 (ID Cards)
416
+ - TD2 (Travel Documents)
417
+ - TD3 (Passports)
418
+ - MRVA (Visa Type A)
419
+ - MRVB (Visa Type B)
420
+
421
+ The SDK automatically detects the MRZ type based on document metadata.
422
+
423
+ #### 2. Fallback Mode
424
+
425
+ Without ML Kit installed, the SDK will use simulation mode for testing purposes. This is useful for development but not recommended for production.
426
+
427
+ ### Scanning Flow
428
+
429
+ The SDK automatically determines which scanning methods are required based on document metadata:
430
+
431
+ ```typescript
432
+ // Example metadata from API
433
+ {
434
+ "document_flow": ["F", "B"], // Front and Back required
435
+ "barcode": "PDF417 B" // Barcode on back side
436
+ }
437
+ ```
438
+
439
+ **Flow:** Selfie → Front → Back → Barcode Scan → Complete
440
+
441
+ ```typescript
442
+ // Example metadata for passport
443
+ {
444
+ "document_flow": ["F"], // Front only
445
+ "barcode": "TD3" // MRZ scanning required
446
+ }
447
+ ```
448
+
449
+ **Flow:** Selfie → Front → MRZ Scan → Complete
450
+
451
+ ---
452
+
453
+ ## 🔄 Dynamic Flow
454
+
455
+ The SDK automatically determines the verification flow based on document metadata:
456
+
457
+ ### Flow Examples
458
+
459
+ #### Example 1: Driver's License (Front Only)
460
+ ```json
461
+ {
462
+ "document_flow": ["F"],
463
+ "barcode": "None"
464
+ }
465
+ ```
466
+ **Flow:** Selfie → Front Document → Complete
467
+
468
+ #### Example 2: Passport (Front + MRZ)
469
+ ```json
470
+ {
471
+ "document_flow": ["F"],
472
+ "barcode": "TD3"
473
+ }
474
+ ```
475
+ **Flow:** Selfie → Front Document → MRZ Scan → Complete
476
+
477
+ #### Example 3: National ID (Front + Back + Barcode)
478
+ ```json
479
+ {
480
+ "document_flow": ["F", "B"],
481
+ "barcode": "PDF417 B"
37
482
  }
38
483
  ```
484
+ **Flow:** Selfie → Front Document → Back Document → Barcode Scan → Complete
485
+
486
+ ---
487
+
488
+ ## 📚 API Reference
489
+
490
+ ### IDMConf Interface
491
+
492
+ ```typescript
493
+ interface IDMConf {
494
+ // Required
495
+ clientID: string;
496
+ clientSecret: string;
497
+ environment: 'sandbox' | 'production';
498
+ requestData: RequestData;
499
+
500
+ // Optional
501
+ theme?: 'light' | 'dark' | Theme;
502
+ userDetails?: UserDetails;
503
+ accessToken?: string;
504
+ verificationCode?: string;
505
+ configuration?: Configuration;
506
+ countryDetails?: CountryDetail[];
507
+ selectedCountryDetails?: SelectedCountryDetail;
508
+ requestConfiguration?: RequestConfiguration;
509
+ }
510
+
511
+ interface RequestData {
512
+ requestID: string;
513
+ name?: string;
514
+ dateOfBirth?: string;
515
+ countryCode?: string;
516
+ mobile?: string;
517
+ callbackURL?: string;
518
+ redirectURL?: string;
519
+ }
520
+ ```
521
+
522
+ ### Exported Components
523
+
524
+ ```typescript
525
+ import {
526
+ IDMScan, // Main SDK component
527
+ Button, // Themed button component
528
+ ThemedText, // Themed text component
529
+ Loader, // Loading indicator
530
+ Header, // Header component
531
+ Footer, // Footer component
532
+ CustomOverlay, // Overlay component
533
+ } from '@test-web/react-native-sdk';
534
+ ```
535
+
536
+ ### Exported Hooks
537
+
538
+ ```typescript
539
+ import {
540
+ useTheme, // Access current theme
541
+ useOrientation, // Detect device orientation
542
+ useKeyboard, // Keyboard visibility state
543
+ useIDM, // Access IDM configuration
544
+ } from '@test-web/react-native-sdk';
545
+ ```
546
+
547
+ ### Exported Utilities
548
+
549
+ ```typescript
550
+ import {
551
+ debounce, // Debounce function calls
552
+ throttle, // Throttle function calls
553
+ memoize, // Memoize function results
554
+ base64Encode, // Encode to base64
555
+ base64Decode, // Decode from base64
556
+ getDocumentLabel, // Get document type label
557
+ FlowManager, // Flow management class
558
+ createFlowManager, // Create flow manager
559
+ processImageToBase64, // Process images
560
+ } from '@test-web/react-native-sdk';
561
+ ```
39
562
 
40
- ## Themes
563
+ ### API Services
41
564
 
42
565
  ```typescript
43
- import { IDMScan, themes } from 'test-react-native-sdk';
566
+ import { ScanServices } from '@test-web/react-native-sdk';
567
+
568
+ // Available APIs
569
+ ScanServices.getUserDataAPI();
570
+ ScanServices.generateAccessToken(config);
571
+ ScanServices.generateRequest(config, requestData);
572
+ ScanServices.getConfiguration(config, verificationCode);
573
+ ScanServices.getCountries(config);
574
+ ScanServices.captureDocumentFront(config, photoData);
575
+ ScanServices.captureDocumentBack(config, photoData);
576
+ ScanServices.captureBarcode(config, barcodeData);
577
+ ScanServices.captureMRZ(config, mrzData);
578
+ ScanServices.completeVerification(config);
579
+ ```
580
+
581
+ ---
582
+
583
+ ## 🔧 Troubleshooting
584
+
585
+ ### Common Issues
586
+
587
+ #### 1. Camera Permission Denied
588
+
589
+ **Problem:** Camera not working or permission denied error.
590
+
591
+ **Solution:**
592
+ - Ensure you've added camera permissions to `AndroidManifest.xml` (Android)
593
+ - Ensure you've added `NSCameraUsageDescription` to `Info.plist` (iOS)
594
+ - Request permissions at runtime before using the SDK
595
+
596
+ #### 2. Location Not Available
44
597
 
45
- <IDMScan idmConf={{ theme: themes.ocean }} />
46
- <IDMScan idmConf={{ theme: themes.dark }} />
47
- <IDMScan idmConf={{ theme: themes.sunset }} />
598
+ **Problem:** Location permission errors.
599
+
600
+ **Solution:**
601
+ - Check location permissions in manifest/plist
602
+ - Ensure GPS is enabled on device
603
+ - Verify react-native-geolocation-service is installed
604
+
605
+ #### 3. Navigation Error
606
+
607
+ **Problem:** `Couldn't find a navigation object` error.
608
+
609
+ **Solution:**
610
+ - Ensure all navigation dependencies are installed
611
+ - Run `pod install` for iOS
612
+ - Clean and rebuild the app
613
+
614
+ #### 4. iOS Build Failed
615
+
616
+ **Problem:** Build fails on iOS after installation.
617
+
618
+ **Solution:**
619
+ ```bash
620
+ cd ios && pod install && cd ..
621
+ # Clean build folder in Xcode
622
+ # Product → Clean Build Folder
623
+ # Rebuild the app
48
624
  ```
49
625
 
50
- Available: `light`, `dark`, `ocean`, `sunset`, `forest`, `pastel`, `highContrast`, `professional`, `sakura`, `midnight`
626
+ #### 5. Android Build Failed
627
+
628
+ **Problem:** Build fails on Android with dependency errors.
629
+
630
+ **Solution:**
631
+ ```bash
632
+ cd android && ./gradlew clean && cd ..
633
+ # Rebuild the app
634
+ ```
635
+
636
+ #### 6. Image Processing Fails
637
+
638
+ **Problem:** Images not uploading or processing errors.
639
+
640
+ **Solution:**
641
+ - Ensure react-native-image-resizer is installed
642
+ - Ensure react-native-fs is installed
643
+ - Check storage permissions
644
+
645
+ #### 7. Barcode Scanning Not Working
646
+
647
+ **Problem:** Barcode scanning shows simulation or doesn't detect barcodes.
648
+
649
+ **Solution:**
650
+ - Install `dynamsoft-capture-vision-react-native` for real barcode scanning
651
+ - Initialize Dynamsoft license key before using the SDK
652
+ - Ensure camera permissions are granted
653
+ - Test with a real PDF417 barcode (driver's license back)
654
+ - Check console logs for Dynamsoft initialization errors
655
+
656
+ #### 8. MRZ Scanning Not Working
657
+
658
+ **Problem:** MRZ scanning shows simulation or doesn't detect MRZ codes.
659
+
660
+ **Solution:**
661
+ - Install `@react-native-ml-kit/text-recognition` for real MRZ scanning
662
+ - Ensure camera permissions are granted
663
+ - Test with a real passport or ID card with MRZ
664
+ - Ensure good lighting and steady camera position
665
+ - Check console logs for ML Kit errors
666
+
667
+ ---
668
+
669
+ ## 🧪 Testing Scanning Features
670
+
671
+ ### Testing Barcode Scanning
672
+
673
+ #### With Dynamsoft (Production)
674
+
675
+ 1. Install Dynamsoft:
676
+ ```bash
677
+ npm install dynamsoft-capture-vision-react-native
678
+ ```
679
+
680
+ 2. Get a trial license from [Dynamsoft](https://www.dynamsoft.com/customer/license/trialLicense)
681
+
682
+ 3. Initialize in your app:
683
+ ```typescript
684
+ import { DCVBarcodeReader } from 'dynamsoft-capture-vision-react-native';
685
+
686
+ await DCVBarcodeReader.initLicense('YOUR_LICENSE_KEY');
687
+ ```
688
+
689
+ 4. Test with a real driver's license or ID card with PDF417 barcode
690
+
691
+ #### Without Dynamsoft (Development)
692
+
693
+ The SDK will automatically use simulation mode. After 3 seconds, it will generate a simulated barcode result.
694
+
695
+ ### Testing MRZ Scanning
696
+
697
+ #### With ML Kit (Production)
698
+
699
+ 1. Install ML Kit:
700
+ ```bash
701
+ npm install @react-native-ml-kit/text-recognition
702
+ ```
703
+
704
+ 2. Test with a real passport or ID card with MRZ zone
705
+
706
+ 3. Ensure good lighting and hold the document steady
707
+
708
+ #### Without ML Kit (Development)
709
+
710
+ The SDK will automatically use simulation mode. After 3 seconds, it will generate a simulated MRZ result.
711
+
712
+ ### Checking Scanner Status
713
+
714
+ The SDK logs which scanning mode is being used:
715
+
716
+ ```
717
+ // Console output examples:
718
+ "Dynamsoft Barcode Scanner initialized" // Production mode
719
+ "Dynamsoft not available, using fallback" // Simulation mode
720
+
721
+ "ML Kit text recognition initialized" // Production mode
722
+ "ML Kit not available, using fallback" // Simulation mode
723
+ ```
724
+
725
+ ---
726
+
727
+ ## 🎯 Advanced Usage
728
+
729
+ ### Using Context
730
+
731
+ ```typescript
732
+ import { useIDM } from '@test-web/react-native-sdk';
733
+
734
+ function MyComponent() {
735
+ const { idmConf, updateIDMConf } = useIDM();
736
+
737
+ // Access configuration
738
+ console.log(idmConf.verificationCode);
739
+
740
+ // Update configuration
741
+ updateIDMConf({ theme: 'dark' });
742
+ }
743
+ ```
744
+
745
+ ### Flow Manager
746
+
747
+ ```typescript
748
+ import { createFlowManager } from '@test-web/react-native-sdk';
749
+
750
+ const metadata = idmConf.selectedCountryDetails?.selectedMetaData;
751
+ const flowManager = createFlowManager(metadata);
752
+
753
+ // Check requirements
754
+ const needsBack = flowManager.requiresBackCapture();
755
+ const needsBarcode = flowManager.requiresBarcodeCapture();
756
+ const needsMRZ = flowManager.requiresMRZCapture();
757
+
758
+ // Get next screen
759
+ const nextScreen = flowManager.getNextScreenAfterFront();
760
+ ```
761
+
762
+ ### Image Processing
763
+
764
+ ```typescript
765
+ import { processImageToBase64 } from '@test-web/react-native-sdk';
766
+
767
+ const base64Image = await processImageToBase64(imagePath, {
768
+ width: 810,
769
+ height: 1080,
770
+ quality: 70,
771
+ format: 'JPEG',
772
+ });
773
+ ```
774
+
775
+ ---
776
+
777
+ ## 📊 Performance
778
+
779
+ The SDK includes several performance optimizations:
780
+
781
+ - **Memoization** - Components and calculations are memoized
782
+ - **Lazy Loading** - Heavy dependencies loaded only when needed
783
+ - **Image Optimization** - Images resized before upload (810x1080, 70% quality)
784
+ - **Efficient State** - Minimal re-renders with optimized context
785
+ - **API Caching** - Countries and configuration cached after first fetch
786
+
787
+ ---
788
+
789
+ ## 🔒 Security
790
+
791
+ - OAuth2 authentication with client credentials
792
+ - Secure token management
793
+ - HTTPS for all API calls
794
+ - No sensitive data stored locally
795
+ - Proper error handling without exposing internals
796
+
797
+ ---
798
+
799
+ ## 📄 License
800
+
801
+ MIT License
802
+
803
+ Copyright (c) 2024 Your Company
804
+
805
+ 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:
806
+
807
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
808
+
809
+ 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.
810
+
811
+ ---
812
+
813
+ ## 📞 Support
814
+
815
+ - **Email:** hello@yourcompany.com
816
+ - **GitHub:** https://github.com/yourcompany/react-native-sdk
817
+ - **Documentation:** https://docs.yourcompany.com
818
+
819
+ ---
820
+
821
+ ## 🎉 What's New in v2.0.0
822
+
823
+ ### Major Changes
824
+ - ✅ **Fully Dynamic** - All configuration driven by API
825
+ - ✅ **Metadata-Driven Navigation** - Automatic flow determination
826
+ - ✅ **Real API Integration** - All APIs implemented
827
+ - ✅ **Enhanced Type System** - Complete TypeScript coverage
828
+ - ✅ **Performance Optimizations** - Memoization and efficient rendering
829
+ - ✅ **Image Processing** - Automatic resize and compression
830
+ - ✅ **Flow Manager** - Smart navigation based on document type
831
+ - ✅ **Better Error Handling** - Comprehensive error management
832
+ - ✅ **Loading States** - User feedback throughout the flow
833
+ - ✅ **Dynamsoft Integration** - Professional barcode scanning (optional)
834
+ - ✅ **ML Kit Integration** - Accurate MRZ text recognition (optional)
835
+
836
+ ### Scanning Features
837
+ - **Dynamsoft Capture Vision** - Industry-leading barcode scanning for PDF417, QR codes, and more
838
+ - **ML Kit Text Recognition** - Google's ML Kit for accurate MRZ detection on passports and ID cards
839
+ - **Fallback Mode** - Simulation mode for development without external libraries
840
+ - **Auto-Detection** - SDK automatically uses available scanning libraries
841
+
842
+ ### Breaking Changes from v1.x
843
+ - `clientID`, `clientSecret`, `environment`, and `requestData` are now required
844
+ - Static country data removed (now fetched from API)
845
+ - Navigation flow is now metadata-driven
51
846
 
52
- ## Documentation
847
+ ### Migration from v1.x
848
+ See migration guide in the repository for detailed instructions.
53
849
 
54
- See [SETUP.md](./SETUP.md) for complete installation and integration guide.
850
+ ---
55
851
 
56
- ## License
852
+ **Made with ❤️ by Your Company**
57
853
 
58
- MIT
854
+ **Version:** 2.0.0
855
+ **Status:** Production Ready
856
+ **Last Updated:** December 22, 2024