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

package/README.md

@@ -9,7 +9,8 @@ A fully dynamic, production-ready React Native SDK for identity verification wit
 - ✅ **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
+- ✅ **MRZ & Barcode Scanning** - Machine-readable zone and barcode support with Dynamsoft & ML Kit
+- ✅ **Advanced Scanning** - Optional Dynamsoft barcode scanner and ML Kit text recognition
 - ✅ **10 Pre-built Themes** - Customizable UI themes
 - ✅ **Camera & Location Permissions** - Built-in permission handling
 - ✅ **TypeScript Support** - Full type definitions included
@@ -55,13 +56,27 @@ npm install react-native-vision-camera react-native-image-resizer react-native-f
 npm install react-native-device-info react-native-geolocation-service
 ```
 
-### Step 4: Install iOS Pods (iOS only)
+### Step 4: Install Scanning Libraries (Optional but Recommended)
+
+For enhanced barcode and MRZ scanning capabilities:
+
+```bash
+# Dynamsoft Capture Vision for barcode scanning
+npm install dynamsoft-capture-vision-react-native
+
+# ML Kit for MRZ text recognition
+npm install @react-native-ml-kit/text-recognition
+```
+
+**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.
+
+### Step 5: Install iOS Pods (iOS only)
 
 ```bash
 cd ios && pod install && cd ..
 ```
 
-### Step 5: Rebuild Your App
+### Step 6: Rebuild Your App
 
 ```bash
 # For Android
@@ -155,6 +170,95 @@ platform :ios, '11.0'
 
 ---
 
+### Dynamsoft Barcode Scanner Setup (Optional)
+
+If you installed `dynamsoft-capture-vision-react-native`, follow these additional steps:
+
+#### Android Configuration
+
+1. Add to `android/app/build.gradle`:
+
+```gradle
+android {
+    defaultConfig {
+        minSdkVersion 21
+        // Add this for Dynamsoft
+        ndk {
+            abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
+        }
+    }
+}
+```
+
+2. Get your Dynamsoft license key from [Dynamsoft Customer Portal](https://www.dynamsoft.com/customer/license/trialLicense)
+
+3. Initialize the license in your app (before using the SDK):
+
+```typescript
+import { DCVBarcodeReader } from 'dynamsoft-capture-vision-react-native';
+
+// Initialize Dynamsoft license (do this once at app startup)
+await DCVBarcodeReader.initLicense('YOUR_DYNAMSOFT_LICENSE_KEY');
+```
+
+#### iOS Configuration
+
+1. Add to `ios/Podfile`:
+
+```ruby
+platform :ios, '11.0'
+
+target 'YourApp' do
+  # ... other pods
+  
+  # Add this for Dynamsoft
+  pod 'DynamsoftCaptureVisionRouter', '~> 2.0'
+  pod 'DynamsoftBarcodeReader', '~> 10.0'
+end
+```
+
+2. Run `pod install`:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+**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.
+
+---
+
+### ML Kit Text Recognition Setup (Optional)
+
+If you installed `@react-native-ml-kit/text-recognition`, follow these additional steps:
+
+#### Android Configuration
+
+ML Kit will be automatically configured on Android. No additional setup required.
+
+#### iOS Configuration
+
+1. Add to `ios/Podfile`:
+
+```ruby
+platform :ios, '11.0'
+
+target 'YourApp' do
+  # ... other pods
+  
+  # ML Kit is automatically linked
+end
+```
+
+2. Run `pod install`:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+**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.
+
+---
+
 ## 🚀 Usage
 
 ### Basic Implementation
@@ -257,6 +361,95 @@ export default function App() {
 
 ---
 
+## 📸 Scanning Capabilities
+
+### Barcode Scanning
+
+The SDK supports barcode scanning with two modes:
+
+#### 1. Production Mode (Recommended)
+
+Install Dynamsoft Capture Vision for accurate barcode scanning:
+
+```bash
+npm install dynamsoft-capture-vision-react-native
+```
+
+**Supported Barcode Types:**
+- PDF417 (Driver's License, ID Cards)
+- QR Code
+- Code 128
+- Code 39
+- EAN-13
+- UPC-A
+- And more...
+
+**Initialize License:**
+
+```typescript
+import { DCVBarcodeReader } from 'dynamsoft-capture-vision-react-native';
+
+// At app startup
+await DCVBarcodeReader.initLicense('YOUR_LICENSE_KEY');
+```
+
+Get your free trial license from [Dynamsoft Customer Portal](https://www.dynamsoft.com/customer/license/trialLicense).
+
+#### 2. Fallback Mode
+
+Without Dynamsoft installed, the SDK will use simulation mode for testing purposes. This is useful for development but not recommended for production.
+
+### MRZ Scanning
+
+The SDK supports MRZ (Machine Readable Zone) scanning with two modes:
+
+#### 1. Production Mode (Recommended)
+
+Install ML Kit Text Recognition for accurate MRZ scanning:
+
+```bash
+npm install @react-native-ml-kit/text-recognition
+```
+
+**Supported MRZ Types:**
+- TD1 (ID Cards)
+- TD2 (Travel Documents)
+- TD3 (Passports)
+- MRVA (Visa Type A)
+- MRVB (Visa Type B)
+
+The SDK automatically detects the MRZ type based on document metadata.
+
+#### 2. Fallback Mode
+
+Without ML Kit installed, the SDK will use simulation mode for testing purposes. This is useful for development but not recommended for production.
+
+### Scanning Flow
+
+The SDK automatically determines which scanning methods are required based on document metadata:
+
+```typescript
+// Example metadata from API
+{
+  "document_flow": ["F", "B"],  // Front and Back required
+  "barcode": "PDF417 B"          // Barcode on back side
+}
+```
+
+**Flow:** Selfie → Front → Back → Barcode Scan → Complete
+
+```typescript
+// Example metadata for passport
+{
+  "document_flow": ["F"],  // Front only
+  "barcode": "TD3"         // MRZ scanning required
+}
+```
+
+**Flow:** Selfie → Front → MRZ Scan → Complete
+
+---
+
 ## 🔄 Dynamic Flow
 
 The SDK automatically determines the verification flow based on document metadata:
@@ -449,6 +642,86 @@ cd android && ./gradlew clean && cd ..
 - Ensure react-native-fs is installed
 - Check storage permissions
 
+#### 7. Barcode Scanning Not Working
+
+**Problem:** Barcode scanning shows simulation or doesn't detect barcodes.
+
+**Solution:**
+- Install `dynamsoft-capture-vision-react-native` for real barcode scanning
+- Initialize Dynamsoft license key before using the SDK
+- Ensure camera permissions are granted
+- Test with a real PDF417 barcode (driver's license back)
+- Check console logs for Dynamsoft initialization errors
+
+#### 8. MRZ Scanning Not Working
+
+**Problem:** MRZ scanning shows simulation or doesn't detect MRZ codes.
+
+**Solution:**
+- Install `@react-native-ml-kit/text-recognition` for real MRZ scanning
+- Ensure camera permissions are granted
+- Test with a real passport or ID card with MRZ
+- Ensure good lighting and steady camera position
+- Check console logs for ML Kit errors
+
+---
+
+## 🧪 Testing Scanning Features
+
+### Testing Barcode Scanning
+
+#### With Dynamsoft (Production)
+
+1. Install Dynamsoft:
+```bash
+npm install dynamsoft-capture-vision-react-native
+```
+
+2. Get a trial license from [Dynamsoft](https://www.dynamsoft.com/customer/license/trialLicense)
+
+3. Initialize in your app:
+```typescript
+import { DCVBarcodeReader } from 'dynamsoft-capture-vision-react-native';
+
+await DCVBarcodeReader.initLicense('YOUR_LICENSE_KEY');
+```
+
+4. Test with a real driver's license or ID card with PDF417 barcode
+
+#### Without Dynamsoft (Development)
+
+The SDK will automatically use simulation mode. After 3 seconds, it will generate a simulated barcode result.
+
+### Testing MRZ Scanning
+
+#### With ML Kit (Production)
+
+1. Install ML Kit:
+```bash
+npm install @react-native-ml-kit/text-recognition
+```
+
+2. Test with a real passport or ID card with MRZ zone
+
+3. Ensure good lighting and hold the document steady
+
+#### Without ML Kit (Development)
+
+The SDK will automatically use simulation mode. After 3 seconds, it will generate a simulated MRZ result.
+
+### Checking Scanner Status
+
+The SDK logs which scanning mode is being used:
+
+```
+// Console output examples:
+"Dynamsoft Barcode Scanner initialized" // Production mode
+"Dynamsoft not available, using fallback" // Simulation mode
+
+"ML Kit text recognition initialized" // Production mode
+"ML Kit not available, using fallback" // Simulation mode
+```
+
 ---
 
 ## 🎯 Advanced Usage
@@ -557,6 +830,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 - ✅ **Flow Manager** - Smart navigation based on document type
 - ✅ **Better Error Handling** - Comprehensive error management
 - ✅ **Loading States** - User feedback throughout the flow
+- ✅ **Dynamsoft Integration** - Professional barcode scanning (optional)
+- ✅ **ML Kit Integration** - Accurate MRZ text recognition (optional)
+
+### Scanning Features
+- **Dynamsoft Capture Vision** - Industry-leading barcode scanning for PDF417, QR codes, and more
+- **ML Kit Text Recognition** - Google's ML Kit for accurate MRZ detection on passports and ID cards
+- **Fallback Mode** - Simulation mode for development without external libraries
+- **Auto-Detection** - SDK automatically uses available scanning libraries
 
 ### Breaking Changes from v1.x
 - `clientID`, `clientSecret`, `environment`, and `requestData` are now required

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@test-web/react-native-sdk",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Dynamic React Native SDK for document verification with API-driven configuration",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
@@ -25,7 +25,8 @@
     "barcode",
     "mrz",
     "dynamic",
-    "api-driven"
+    "api-driven",
+    "dynamsoft"
   ],
   "repository": "https://github.com/yourcompany/react-native-sdk",
   "author": "Your Company <hello@yourcompany.com>",
@@ -41,7 +42,9 @@
     "react-native-image-resizer": ">=1.0.0",
     "react-native-fs": ">=2.0.0",
     "react-native-device-info": ">=10.0.0",
-    "react-native-geolocation-service": ">=5.0.0"
+    "react-native-geolocation-service": ">=5.0.0",
+    "dynamsoft-capture-vision-react-native": ">=3.0.0",
+    "@react-native-ml-kit/text-recognition": ">=1.1.0"
   },
   "peerDependenciesMeta": {
     "react-native-image-resizer": {
@@ -55,6 +58,12 @@
     },
     "react-native-geolocation-service": {
       "optional": true
+    },
+    "dynamsoft-capture-vision-react-native": {
+      "optional": true
+    },
+    "@react-native-ml-kit/text-recognition": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/config/apiConfig.ts

@@ -1,4 +1,4 @@
-export const SANDBOX_BASE_URL = 'https://sandbox-api.idmerit.com';
+export const SANDBOX_BASE_URL = 'https://sandbox.idmvalidate.com';
 export const PRODUCTION_BASE_URL = 'https://api.idmerit.com';
 
 export const getBaseURL = (environment: 'sandbox' | 'production'): string => {

package/src/screens/BarcodeCapture.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { View, Text, StyleSheet, Alert } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTheme } from '../context/ThemeContext';
@@ -16,10 +16,46 @@ export default function BarcodeCapture() {
   const navigation = useNavigation();
   const [loading, setLoading] = useState(false);
   const [scannedData, setScannedData] = useState<string | null>(null);
+  const [isScanning, setIsScanning] = useState(true);
+  const scannerRef = useRef<any>(null);
 
-  // Handle barcode scan
-  const handleBarcodeScan = async (barcodeText: string) => {
-    if (loading || !barcodeText) return;
+  // Initialize Dynamsoft Barcode Scanner
+  useEffect(() => {
+    let isMounted = true;
+
+    const initializeScanner = async () => {
+      try {
+        // Try to import Dynamsoft Capture Vision
+        const { DCVCameraView, DBRRuntimeSettings } = require('dynamsoft-capture-vision-react-native');
+        
+        // License initialization would go here
+        // await DCVBarcodeReader.initLicense('YOUR_LICENSE_KEY');
+        
+        console.log('Dynamsoft Barcode Scanner initialized');
+      } catch (error) {
+        console.warn('Dynamsoft not available, using fallback:', error);
+        // Fallback to simulation if Dynamsoft not installed
+        if (isMounted) {
+          simulateBarcodeScan();
+        }
+      }
+    };
+
+    initializeScanner();
+
+    return () => {
+      isMounted = false;
+      setIsScanning(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Handle barcode scan result
+  const handleBarcodeScanned = async (barcodeText: string) => {
+    if (loading || !barcodeText || !isScanning) return;
+
+    setIsScanning(false);
+    setScannedData(barcodeText);
 
     try {
       setLoading(true);
@@ -42,61 +78,103 @@ export default function BarcodeCapture() {
         // Navigate to ThankYou
         navigation.navigate('ThankYou' as never);
       } else {
-        Alert.alert('Error', result.errorMessage || 'Failed to process barcode');
-        setLoading(false);
+        Alert.alert('Error', result.errorMessage || 'Failed to process barcode', [
+          {
+            text: 'Retry',
+            onPress: () => {
+              setIsScanning(true);
+              setScannedData(null);
+              setLoading(false);
+            },
+          },
+        ]);
       }
     } catch (error: any) {
       console.error('Error processing barcode:', error);
-      Alert.alert('Error', 'Failed to process barcode');
-      setLoading(false);
+      Alert.alert('Error', 'Failed to process barcode', [
+        {
+          text: 'Retry',
+          onPress: () => {
+            setIsScanning(true);
+            setScannedData(null);
+            setLoading(false);
+          },
+        },
+      ]);
     }
   };
 
-  // Simulate barcode scanning (replace with actual barcode scanner library)
-  useEffect(() => {
-    // TODO: Integrate actual barcode scanning library (e.g., react-native-vision-camera with barcode plugin)
-    // For now, simulate scanning after 3 seconds
+  // Fallback simulation if Dynamsoft not available
+  const simulateBarcodeScan = () => {
     const timer = setTimeout(() => {
-      const simulatedBarcode = 'SIMULATED_BARCODE_DATA_' + Date.now();
-      setScannedData(simulatedBarcode);
-      handleBarcodeScan(simulatedBarcode);
+      if (isScanning) {
+        const simulatedBarcode = 'SIMULATED_PDF417_' + Date.now();
+        handleBarcodeScanned(simulatedBarcode);
+      }
     }, 3000);
 
     return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  };
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.topLabel}>
-        Fill the box with the barcode{'\n'}until it turns green
-      </Text>
+  // Render Dynamsoft Camera View
+  const renderBarcodeScanner = () => {
+    try {
+      const { DCVCameraView } = require('dynamsoft-capture-vision-react-native');
 
-      {/* Camera placeholder - Replace with actual camera view */}
-      <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
-        <Text
-          style={{
-            color: '#fff',
-            textAlign: 'center',
-            marginTop: 200,
-            fontSize: 16,
+      return (
+        <DCVCameraView
+          ref={scannerRef}
+          style={StyleSheet.absoluteFill}
+          scanRegionVisible={true}
+          overlayVisible={true}
+          onBarcodeScanned={(results: any) => {
+            if (results && results.length > 0 && isScanning) {
+              const barcodeText = results[0].barcodeText || results[0].text;
+              handleBarcodeScanned(barcodeText);
+            }
           }}
-        >
-          {loading ? 'Processing...' : 'Scanning for barcode...'}
-        </Text>
-        {scannedData && (
+        />
+      );
+    } catch (error) {
+      console.warn('Dynamsoft camera view not available:', error);
+      
+      // Fallback UI
+      return (
+        <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
           <Text
             style={{
-              color: '#0f0',
+              color: '#fff',
               textAlign: 'center',
-              marginTop: 20,
-              fontSize: 12,
+              marginTop: 200,
+              fontSize: 16,
             }}
           >
-            Detected: {scannedData.substring(0, 30)}...
+            {loading ? 'Processing...' : 'Scanning for barcode...'}
           </Text>
-        )}
-      </View>
+          {scannedData && (
+            <Text
+              style={{
+                color: '#0f0',
+                textAlign: 'center',
+                marginTop: 20,
+                fontSize: 12,
+              }}
+            >
+              Detected: {scannedData.substring(0, 30)}...
+            </Text>
+          )}
+        </View>
+      );
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.topLabel}>
+        Fill the box with the barcode{'\n'}until it turns green
+      </Text>
+
+      {renderBarcodeScanner()}
 
       {/* Barcode overlay box */}
       <View
@@ -112,7 +190,7 @@ export default function BarcodeCapture() {
         }}
       />
 
-      {loading && <Loader />}
+      {loading && <Loader message="Processing barcode..." />}
     </View>
   );
 }

package/src/screens/MrzCapture.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { View, Text, StyleSheet, Alert } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTheme } from '../context/ThemeContext';
@@ -17,6 +17,11 @@ export default function MrzCapture() {
   const navigation = useNavigation();
   const [loading, setLoading] = useState(false);
   const [scannedData, setScannedData] = useState<string | null>(null);
+  const [isScanning, setIsScanning] = useState(true);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [device, setDevice] = useState<any>(null);
+  const cameraRef = useRef<any>(null);
+  const frameProcessorRef = useRef<any>(null);
 
   // Get MRZ engine type from metadata
   const getMRZEngine = () => {
@@ -27,9 +32,84 @@ export default function MrzCapture() {
     return flowManager.getMRZEngine();
   };
 
-  // Handle MRZ scan
-  const handleMRZScan = async (mrzCode: string) => {
-    if (loading || !mrzCode) return;
+  // Initialize camera with ML Kit
+  useEffect(() => {
+    let isMounted = true;
+
+    const initializeCamera = async () => {
+      try {
+        const { Camera, useCameraDevice, useCameraPermission } = require('react-native-vision-camera');
+        
+        const { hasPermission: hasPerm, requestPermission } = useCameraPermission();
+        
+        if (!hasPerm) {
+          const granted = await requestPermission();
+          if (!granted) {
+            navigation.navigate('CameraPermission' as never);
+            return;
+          }
+        }
+        
+        if (isMounted) {
+          setHasPermission(true);
+          
+          const backDevice = useCameraDevice('back');
+          if (!backDevice) {
+            navigation.navigate('NoCameraFound' as never);
+            return;
+          }
+          
+          setDevice(backDevice);
+        }
+      } catch (error) {
+        console.warn('Camera initialization failed:', error);
+        if (isMounted) {
+          simulateMRZScan();
+        }
+      }
+    };
+
+    initializeCamera();
+
+    return () => {
+      isMounted = false;
+      setIsScanning(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Process MRZ with ML Kit Text Recognition
+  const processMRZWithMLKit = async (frame: any) => {
+    if (!isScanning) return;
+
+    try {
+      const { recognizeText } = require('@react-native-ml-kit/text-recognition');
+      
+      const result = await recognizeText(frame);
+      
+      if (result && result.text) {
+        // Check if text contains MRZ pattern
+        const lines = result.text.split('\n');
+        const mrzLines = lines.filter((line: string) => 
+          line.length >= 30 && /^[A-Z0-9<]+$/.test(line)
+        );
+
+        if (mrzLines.length >= 2) {
+          const mrzCode = mrzLines.join('\n');
+          handleMRZScanned(mrzCode);
+        }
+      }
+    } catch (error) {
+      console.warn('ML Kit text recognition error:', error);
+    }
+  };
+
+  // Handle MRZ scan result
+  const handleMRZScanned = async (mrzCode: string) => {
+    if (loading || !mrzCode || !isScanning) return;
+
+    setIsScanning(false);
+    setScannedData(mrzCode);
 
     try {
       setLoading(true);
@@ -53,36 +133,72 @@ export default function MrzCapture() {
         // Navigate to ThankYou
         navigation.navigate('ThankYou' as never);
       } else {
-        Alert.alert('Error', result.errorMessage || 'Failed to process MRZ');
-        setLoading(false);
+        Alert.alert('Error', result.errorMessage || 'Failed to process MRZ', [
+          {
+            text: 'Retry',
+            onPress: () => {
+              setIsScanning(true);
+              setScannedData(null);
+              setLoading(false);
+            },
+          },
+        ]);
       }
     } catch (error: any) {
       console.error('Error processing MRZ:', error);
-      Alert.alert('Error', 'Failed to process MRZ');
-      setLoading(false);
+      Alert.alert('Error', 'Failed to process MRZ', [
+        {
+          text: 'Retry',
+          onPress: () => {
+            setIsScanning(true);
+            setScannedData(null);
+            setLoading(false);
+          },
+        },
+      ]);
     }
   };
 
-  // Simulate MRZ scanning (replace with actual MRZ scanner library)
-  useEffect(() => {
-    // TODO: Integrate actual MRZ scanning library (e.g., @react-native-ml-kit/text-recognition)
-    // For now, simulate scanning after 3 seconds
+  // Fallback simulation if ML Kit not available
+  const simulateMRZScan = () => {
     const timer = setTimeout(() => {
-      const simulatedMRZ =
-        'P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<<<<<<<\nL898902C36UTO7408122F1204159ZE184226B<<<<<10';
-      setScannedData(simulatedMRZ);
-      handleMRZScan(simulatedMRZ);
+      if (isScanning) {
+        const simulatedMRZ =
+          'P<UTOERIKSSON<<ANNA<MARIA<<<<<<<<<<<<<<<<<<<<\nL898902C36UTO7408122F1204159ZE184226B<<<<<10';
+        handleMRZScanned(simulatedMRZ);
+      }
     }, 3000);
 
     return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  };
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.topLabel}>Align the MRZ code in the box</Text>
+  // Render camera with frame processor
+  const renderCamera = () => {
+    try {
+      const { Camera } = require('react-native-vision-camera');
+      
+      if (hasPermission && device) {
+        return (
+          <Camera
+            ref={cameraRef}
+            style={StyleSheet.absoluteFill}
+            device={device}
+            isActive={isScanning}
+            frameProcessor={(frame) => {
+              'worklet';
+              if (isScanning) {
+                processMRZWithMLKit(frame);
+              }
+            }}
+          />
+        );
+      }
+    } catch (error) {
+      console.warn('Camera render failed:', error);
+    }
 
-      {/* Camera placeholder - Replace with actual camera view */}
+    // Fallback UI
+    return (
       <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
         <Text
           style={{
@@ -108,6 +224,14 @@ export default function MrzCapture() {
           </Text>
         )}
       </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.topLabel}>Align the MRZ code in the box</Text>
+
+      {renderCamera()}
 
       {/* MRZ overlay box */}
       <View
@@ -123,7 +247,7 @@ export default function MrzCapture() {
         }}
       />
 
-      {loading && <Loader />}
+      {loading && <Loader message="Processing MRZ..." />}
     </View>
   );
 }

package/src/services/getUserData.ts

@@ -72,17 +72,37 @@ const getUserData = async (): Promise<UserData> => {
     try {
       // Try to import geolocation if available
       const Geolocation = require('react-native-geolocation-service');
-      location = await new Promise((resolve, reject) => {
-        Geolocation.getCurrentPosition(
-          resolve,
-          reject,
-          {
-            enableHighAccuracy: true,
-            timeout: 15000,
-            maximumAge: 10000,
-          }
-        );
-      });
+      
+      // Check if Geolocation is properly imported and has the method
+      if (Geolocation && typeof Geolocation.getCurrentPosition === 'function') {
+        location = await new Promise((resolve, reject) => {
+          Geolocation.getCurrentPosition(
+            resolve,
+            reject,
+            {
+              enableHighAccuracy: true,
+              timeout: 15000,
+              maximumAge: 10000,
+            }
+          );
+        });
+      } else if (Geolocation && Geolocation.default && typeof Geolocation.default.getCurrentPosition === 'function') {
+        // Try default export
+        location = await new Promise((resolve, reject) => {
+          Geolocation.default.getCurrentPosition(
+            resolve,
+            reject,
+            {
+              enableHighAccuracy: true,
+              timeout: 15000,
+              maximumAge: 10000,
+            }
+          );
+        });
+      } else {
+        console.warn('Geolocation library not properly configured');
+        location = null;
+      }
     } catch (err) {
       console.warn('Location fetch error:', err);
       location = null;