@hexar/biometric-identity-sdk-react-native 1.0.6 → 1.0.8

package/dist/components/VideoRecorder.js

@@ -42,6 +42,7 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_vision_camera_1 = require("react-native-vision-camera");
 const react_native_permissions_1 = require("react-native-permissions");
+const biometric_identity_sdk_core_1 = require("@hexar/biometric-identity-sdk-core");
 // Default challenge set (used if backend not available)
 const DEFAULT_CHALLENGES = [
     {
@@ -73,20 +74,23 @@ const DEFAULT_CHALLENGES = [
         icon: '😊',
     },
 ];
-// Instruction text mapping
-const INSTRUCTION_MAP = {
-    look_left: { text: 'Slowly turn your head LEFT', icon: '←' },
-    look_right: { text: 'Slowly turn your head RIGHT', icon: '→' },
-    look_up: { text: 'Look UP', icon: '↑' },
-    look_down: { text: 'Look DOWN', icon: '↓' },
-    turn_head_left: { text: 'Turn your head LEFT', icon: '←' },
-    turn_head_right: { text: 'Turn your head RIGHT', icon: '→' },
-    smile: { text: 'Smile 😊', icon: '😊' },
-    blink: { text: 'Blink your eyes naturally', icon: '👁' },
-    open_mouth: { text: 'Open your mouth slightly', icon: '😮' },
-    stay_still: { text: 'Look at the camera and stay still', icon: '📷' },
-};
-const VideoRecorder = ({ theme, duration, instructions, challenges: propChallenges, sessionId, smartMode = true, onComplete, onCancel, onFetchChallenges, }) => {
+const getInstructionMap = (strings) => ({
+    look_left: { text: strings.liveness.instructions.lookLeft || 'Slowly turn your head LEFT', icon: '←' },
+    look_right: { text: strings.liveness.instructions.lookRight || 'Slowly turn your head RIGHT', icon: '→' },
+    look_up: { text: strings.liveness.instructions.lookUp || 'Look UP', icon: '↑' },
+    look_down: { text: strings.liveness.instructions.lookDown || 'Look DOWN', icon: '↓' },
+    turn_head_left: { text: strings.liveness.instructions.turnHeadLeft || 'Turn your head LEFT', icon: '←' },
+    turn_head_right: { text: strings.liveness.instructions.turnHeadRight || 'Turn your head RIGHT', icon: '→' },
+    smile: { text: strings.liveness.instructions.smile || 'Smile 😊', icon: '😊' },
+    blink: { text: strings.liveness.instructions.blink || 'Blink your eyes naturally', icon: '👁' },
+    open_mouth: { text: strings.liveness.instructions.openMouth || 'Open your mouth slightly', icon: '😮' },
+    stay_still: { text: strings.liveness.instructions.stayStill || 'Look at the camera and stay still', icon: '📷' },
+});
+const VideoRecorder = ({ theme, language, duration, instructions, challenges: propChallenges, sessionId, smartMode = true, onComplete, onCancel, onFetchChallenges, }) => {
+    if (language) {
+        (0, biometric_identity_sdk_core_1.setLanguage)(language);
+    }
+    const strings = (0, biometric_identity_sdk_core_1.getStrings)();
     // State
     const [phase, setPhase] = (0, react_1.useState)('loading');
     const [countdown, setCountdown] = (0, react_1.useState)(3);
@@ -107,12 +111,13 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
     const pulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     const arrowAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    // Refs
     const recordingStartTime = (0, react_1.useRef)(0);
     const frameInterval = (0, react_1.useRef)(null);
     const frameCaptureInterval = (0, react_1.useRef)(null);
-    // Calculate total duration from challenges
-    const totalDuration = duration || challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000;
+    const videoRecordingRef = (0, react_1.useRef)(null);
+    const isRecordingRef = (0, react_1.useRef)(false);
+    const minDurationMs = 8000;
+    const totalDuration = duration || Math.max(minDurationMs, challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000);
     // Check camera permissions
     (0, react_1.useEffect)(() => {
         const checkPermissions = async () => {
@@ -159,13 +164,13 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
                     challengeList = await onFetchChallenges();
                 }
                 else if (instructions && instructions.length > 0) {
-                    // Convert instructions to challenges
+                    const instructionMap = getInstructionMap(strings);
                     challengeList = instructions.map((inst, idx) => ({
                         action: inst,
-                        instruction: INSTRUCTION_MAP[inst]?.text || inst,
+                        instruction: instructionMap[inst]?.text || inst,
                         duration_ms: 2000,
                         order: idx + 1,
-                        icon: INSTRUCTION_MAP[inst]?.icon,
+                        icon: instructionMap[inst]?.icon,
                     }));
                 }
                 else {
@@ -254,124 +259,213 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
             }),
         ])).start();
     }, [arrowAnim]);
-    // Start recording
-    const startRecording = (0, react_1.useCallback)(async () => {
-        setPhase('recording');
-        recordingStartTime.current = Date.now();
-        // Start capturing frames from camera
+    const resetAndRetry = (0, react_1.useCallback)(() => {
+        setFrames([]);
+        setCompletedChallenges([]);
+        setCurrentChallengeIndex(0);
+        setChallengeProgress(0);
+        setOverallProgress(0);
+        recordingStartTime.current = 0;
+        setPhase('countdown');
+        setCountdown(3);
+    }, []);
+    const handleRecordingError = (0, react_1.useCallback)((error) => {
+        setPhase('loading');
+        react_native_1.Alert.alert('Recording Error', 'Failed to record video. Please try again.', [{ text: 'OK', onPress: onCancel }]);
+    }, [onCancel]);
+    const handleVideoComplete = (0, react_1.useCallback)(async (video) => {
+        console.log('handleVideoComplete called with video:', video?.path);
+        try {
+            setPhase('processing');
+            const actualDuration = Date.now() - recordingStartTime.current;
+            console.log('Video duration:', actualDuration, 'min required:', minDurationMs);
+            if (actualDuration < minDurationMs) {
+                setPhase('recording');
+                react_native_1.Alert.alert(strings.errors.videoTooShort?.title || 'Recording Too Short', strings.errors.videoTooShort?.message || `Video must be at least ${minDurationMs / 1000} seconds. Please try again.`, [{ text: strings.common.retry || 'OK', onPress: resetAndRetry }]);
+                return;
+            }
+            let videoBase64 = '';
+            if (video?.path) {
+                try {
+                    const RNFS = require('react-native-fs');
+                    videoBase64 = await RNFS.readFile(video.path, 'base64');
+                    console.log('Video file read successfully, size:', videoBase64.length);
+                }
+                catch (fsError) {
+                    console.warn('Could not read video file, using captured frames:', fsError);
+                }
+            }
+            const result = {
+                frames: frames.length > 0 ? frames : (videoBase64 ? [videoBase64] : []),
+                duration: actualDuration,
+                instructionsFollowed: completedChallenges.length === challenges.length,
+                qualityScore: frames.length > 0 ? Math.min(100, (frames.length / 30) * 100) : 85,
+                challengesCompleted: completedChallenges,
+                sessionId,
+            };
+            console.log('Video recording completed successfully:', {
+                duration: actualDuration,
+                frames: result.frames.length,
+                challengesCompleted: completedChallenges.length,
+                instructionsFollowed: result.instructionsFollowed
+            });
+            onComplete(result);
+        }
+        catch (error) {
+            console.error('Error processing video:', error);
+            setPhase('recording');
+            handleRecordingError(error);
+        }
+    }, [frames, completedChallenges, challenges, sessionId, onComplete, resetAndRetry, handleRecordingError, strings, minDurationMs]);
+    const startFrameCapture = (0, react_1.useCallback)(() => {
         if (cameraRef.current && device) {
-            // Capture frames periodically (every 100ms = ~10 FPS)
             frameCaptureInterval.current = setInterval(async () => {
                 try {
-                    // Take a photo frame (react-native-vision-camera doesn't have direct frame access in v4)
-                    // We'll use takeSnapshot or capture frames via photo
                     const photo = await cameraRef.current?.takePhoto({
                         flash: 'off',
                     });
                     if (photo) {
-                        // Convert to base64 if possible, otherwise use file path
                         try {
                             const RNFS = require('react-native-fs');
                             const base64 = await RNFS.readFile(photo.path, 'base64');
-                            setFrames(prev => [...prev, base64]);
+                            setFrames(prev => {
+                                if (prev.length < 100) {
+                                    return [...prev, base64];
+                                }
+                                return prev;
+                            });
                         }
                         catch (fsError) {
-                            // Fallback: use file path
-                            setFrames(prev => [...prev, photo.path]);
+                            setFrames(prev => {
+                                if (prev.length < 100) {
+                                    return [...prev, photo.path];
+                                }
+                                return prev;
+                            });
                         }
                     }
                 }
                 catch (error) {
                     console.warn('Frame capture error:', error);
-                    // Continue even if one frame fails
                 }
             }, 100);
         }
-        else {
-            // Fallback: simulate frames if camera not available
-            frameInterval.current = setInterval(() => {
-                setFrames(prev => [...prev, `frame_${Date.now()}`]);
-            }, 100);
-        }
-        // Start first challenge
-        runChallenge(0);
     }, [device]);
-    // Run a specific challenge
+    const stopRecording = (0, react_1.useCallback)(async () => {
+        console.log('Stopping recording...');
+        isRecordingRef.current = false;
+        if (videoRecordingRef.current) {
+            try {
+                console.log('Stopping video recording');
+                await videoRecordingRef.current.stop();
+                console.log('Video recording stopped');
+            }
+            catch (error) {
+                console.error('Error stopping video recording:', error);
+            }
+            videoRecordingRef.current = null;
+        }
+        if (frameCaptureInterval.current) {
+            clearInterval(frameCaptureInterval.current);
+            frameCaptureInterval.current = null;
+        }
+    }, []);
     const runChallenge = (0, react_1.useCallback)((index) => {
         if (index >= challenges.length) {
-            completeRecording();
+            if (isRecordingRef.current) {
+                const elapsed = Date.now() - recordingStartTime.current;
+                if (elapsed < minDurationMs) {
+                    setTimeout(() => {
+                        if (isRecordingRef.current) {
+                            stopRecording();
+                        }
+                    }, minDurationMs - elapsed);
+                    return;
+                }
+                stopRecording();
+            }
             return;
         }
         const challenge = challenges[index];
         setCurrentChallengeIndex(index);
         setChallengeProgress(0);
-        // Fade in instruction
         react_native_1.Animated.timing(fadeAnim, {
             toValue: 1,
             duration: 300,
             useNativeDriver: true,
         }).start();
-        // Animate arrow for directional challenges
         if (challenge.action.includes('left') || challenge.action.includes('right')) {
             animateArrow(challenge.action);
         }
-        // Progress animation for this challenge
         react_native_1.Animated.timing(progressAnim, {
             toValue: 100,
             duration: challenge.duration_ms,
             useNativeDriver: false,
         }).start();
-        // Update progress in real-time
         const progressInterval = setInterval(() => {
             setChallengeProgress(prev => {
                 const newProgress = prev + (100 / (challenge.duration_ms / 100));
                 return Math.min(100, newProgress);
             });
-            // Update overall progress
             const elapsed = Date.now() - recordingStartTime.current;
-            const totalTime = challenges.reduce((sum, c) => sum + c.duration_ms, 0);
+            const totalTime = Math.max(totalDuration, challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000);
             setOverallProgress(Math.min(100, (elapsed / totalTime) * 100));
         }, 100);
-        // Move to next challenge after duration
         setTimeout(() => {
             clearInterval(progressInterval);
-            // Mark challenge as completed
             setCompletedChallenges(prev => [...prev, challenge.action]);
-            // Fade out current instruction
             react_native_1.Animated.timing(fadeAnim, {
                 toValue: 0,
                 duration: 200,
                 useNativeDriver: true,
             }).start(() => {
-                // Reset and start next challenge
                 progressAnim.setValue(0);
                 runChallenge(index + 1);
             });
         }, challenge.duration_ms);
-    }, [challenges, fadeAnim, progressAnim, animateArrow]);
-    // Complete recording
-    const completeRecording = (0, react_1.useCallback)(() => {
-        if (frameInterval.current) {
-            clearInterval(frameInterval.current);
+    }, [challenges, fadeAnim, progressAnim, animateArrow, totalDuration, minDurationMs, stopRecording]);
+    const startRecording = (0, react_1.useCallback)(async () => {
+        setPhase('recording');
+        recordingStartTime.current = Date.now();
+        isRecordingRef.current = true;
+        console.log('Starting video recording, total duration:', totalDuration);
+        if (cameraRef.current && device) {
+            try {
+                videoRecordingRef.current = await cameraRef.current.startRecording({
+                    flash: 'off',
+                    onRecordingFinished: (video) => {
+                        console.log('Video recording finished callback called', video);
+                        if (isRecordingRef.current) {
+                            handleVideoComplete(video);
+                        }
+                    },
+                    onRecordingError: (error) => {
+                        console.error('Recording error:', error);
+                        handleRecordingError(error);
+                    },
+                });
+                console.log('Video recording started successfully');
+            }
+            catch (error) {
+                console.warn('Video recording not available, falling back to frame capture:', error);
+                startFrameCapture();
+            }
         }
-        if (frameCaptureInterval.current) {
-            clearInterval(frameCaptureInterval.current);
+        else {
+            console.log('Camera not available, using frame capture');
+            startFrameCapture();
         }
-        setPhase('processing');
-        setOverallProgress(100);
-        // Process and return result
-        setTimeout(() => {
-            const result = {
-                frames,
-                duration: Date.now() - recordingStartTime.current,
-                instructionsFollowed: completedChallenges.length === challenges.length,
-                qualityScore: frames.length > 0 ? 85 + Math.random() * 10 : 0, // Quality based on frames captured
-                challengesCompleted: completedChallenges,
-                sessionId,
-            };
-            onComplete(result);
-        }, 500);
-    }, [frames, completedChallenges, challenges, sessionId, onComplete]);
+        runChallenge(0);
+        const timeoutId = setTimeout(() => {
+            console.log('Recording timeout reached, stopping recording');
+            if (isRecordingRef.current) {
+                stopRecording().catch(err => {
+                    console.error('Error stopping recording on timeout:', err);
+                });
+            }
+        }, totalDuration);
+        return () => clearTimeout(timeoutId);
+    }, [device, totalDuration, handleVideoComplete, handleRecordingError, runChallenge, stopRecording, startFrameCapture]);
     // Current challenge
     const currentChallenge = challenges[currentChallengeIndex];
     // Get direction arrow for the current challenge
@@ -408,20 +502,22 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
     if (!hasPermission) {
         return (react_1.default.createElement(react_native_1.View, { style: styles.container },
             react_1.default.createElement(react_native_1.View, { style: styles.permissionContainer },
-                react_1.default.createElement(react_native_1.Text, { style: styles.permissionText }, "Camera permission is required"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.permissionText }, typeof strings.errors.cameraPermissionDenied === 'string'
+                    ? strings.errors.cameraPermissionDenied
+                    : strings.errors.cameraPermissionDenied?.message || 'Camera permission is required'),
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.cancelButton, { borderColor: theme?.errorColor || '#EF4444' }], onPress: onCancel },
-                    react_1.default.createElement(react_native_1.Text, { style: [styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }] }, "Cancel")))));
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }] }, strings.common.cancel || 'Cancel')))));
     }
     if (!device) {
         return (react_1.default.createElement(react_native_1.View, { style: styles.container },
             react_1.default.createElement(react_native_1.View, { style: styles.permissionContainer },
-                react_1.default.createElement(react_native_1.Text, { style: styles.permissionText }, "Camera not available"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.permissionText }, strings.errors.cameraNotAvailable || 'Camera not available'),
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.cancelButton, { borderColor: theme?.errorColor || '#EF4444' }], onPress: onCancel },
-                    react_1.default.createElement(react_native_1.Text, { style: [styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }] }, "Cancel")))));
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }] }, strings.common.cancel || 'Cancel')))));
     }
     return (react_1.default.createElement(react_native_1.View, { style: styles.container },
         react_1.default.createElement(react_native_1.View, { style: styles.cameraContainer },
-            react_1.default.createElement(react_native_vision_camera_1.Camera, { ref: cameraRef, style: react_native_1.StyleSheet.absoluteFill, device: device, isActive: phase === 'recording' || phase === 'countdown', video: false, photo: true }),
+            react_1.default.createElement(react_native_vision_camera_1.Camera, { ref: cameraRef, style: react_native_1.StyleSheet.absoluteFill, device: device, isActive: phase === 'recording' || phase === 'countdown', video: true, audio: false }),
             react_1.default.createElement(react_native_1.View, { style: styles.overlay },
                 react_1.default.createElement(react_native_1.View, { style: [
                         styles.faceOval,
@@ -432,9 +528,9 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
                     ] }),
                 phase === 'recording' && getDirectionIndicator()),
             phase === 'loading' && (react_1.default.createElement(react_native_1.View, { style: styles.centeredOverlay },
-                react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, "Preparing challenges..."))),
+                react_1.default.createElement(react_native_1.Text, { style: styles.loadingText }, strings.liveness.preparing || 'Preparing challenges...'))),
             phase === 'countdown' && (react_1.default.createElement(react_native_1.View, { style: styles.countdownContainer },
-                react_1.default.createElement(react_native_1.Text, { style: styles.getReadyText }, "Get Ready!"),
+                react_1.default.createElement(react_native_1.Text, { style: styles.getReadyText }, strings.liveness.getReady || 'Get Ready!'),
                 react_1.default.createElement(react_native_1.Animated.Text, { style: [
                         styles.countdownText,
                         { transform: [{ scale: scaleAnim }] }
@@ -444,7 +540,7 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
                         styles.recordingDot,
                         { transform: [{ scale: pulseAnim }] }
                     ] }),
-                react_1.default.createElement(react_native_1.Text, { style: styles.recordingText }, "Recording"))),
+                react_1.default.createElement(react_native_1.Text, { style: styles.recordingText }, strings.liveness.recording || 'Recording'))),
             (phase === 'recording' || phase === 'processing') && (react_1.default.createElement(react_native_1.View, { style: styles.progressContainer },
                 react_1.default.createElement(react_native_1.View, { style: styles.progressBar },
                     react_1.default.createElement(react_native_1.View, { style: [
@@ -478,21 +574,14 @@ const VideoRecorder = ({ theme, duration, instructions, challenges: propChalleng
                     " / ",
                     challenges.length))),
             phase === 'processing' && (react_1.default.createElement(react_native_1.View, { style: styles.processingOverlay },
-                react_1.default.createElement(react_native_1.Text, { style: styles.processingText }, "Processing video...")))),
+                react_1.default.createElement(react_native_1.Text, { style: styles.processingText }, strings.liveness.processing || 'Processing video...')))),
         react_1.default.createElement(react_native_1.View, { style: styles.bottomContainer },
             phase === 'countdown' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_native_1.Text, { style: styles.bottomText },
-                    "You'll perform ",
-                    challenges.length,
-                    " action",
-                    challenges.length > 1 ? 's' : '',
-                    ".",
-                    '\n',
-                    "Follow the on-screen instructions."),
+                react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.liveness.countdownMessage || `You'll perform ${challenges.length} action${challenges.length > 1 ? 's' : ''}.\nFollow the on-screen instructions.`),
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.cancelButton, { borderColor: theme?.errorColor || '#EF4444' }], onPress: onCancel },
-                    react_1.default.createElement(react_native_1.Text, { style: [styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }] }, "Cancel")))),
-            phase === 'recording' && (react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, "Keep your face visible and follow the instructions")),
-            phase === 'processing' && (react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, "Almost done...")))));
+                    react_1.default.createElement(react_native_1.Text, { style: [styles.cancelButtonText, { color: theme?.errorColor || '#EF4444' }] }, strings.common.cancel || 'Cancel')))),
+            phase === 'recording' && (react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.liveness.recordingInstructions || 'Keep your face visible and follow the instructions')),
+            phase === 'processing' && (react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, strings.validation.almostDone || 'Almost done...')))));
 };
 exports.VideoRecorder = VideoRecorder;
 const styles = react_native_1.StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexar/biometric-identity-sdk-react-native",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "React Native wrapper for Biometric Identity SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/BiometricIdentityFlow.tsx

@@ -17,6 +17,7 @@ import {
   ValidationResult,
   ThemeConfig,
   BiometricError,
+  BiometricErrorCode,
   SDKStep,
   getStrings,
   setLanguage,
@@ -74,11 +75,16 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
   const [isLoadingChallenges, setIsLoadingChallenges] = useState(false);
 
   // Set language early, before any components render
+  // Priority: language prop > SDK config language > default 'en'
   // Run on mount and whenever language prop changes
   useEffect(() => {
     if (language) {
+      // If language prop is provided, override the config
       setLanguage(language);
     }
+    // If no language prop, the language should already be set by BiometricIdentitySDK.configure()
+    // The global language state is set when configure() is called, so getStrings() will
+    // automatically return strings for the configured language (or 'en' as default)
   }, [language]);
 
   const strings = getStrings();
@@ -188,6 +194,11 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
         theme={theme}
         language={language}
         onStart={() => setShowInstructions(false)}
+        onCancel={onError ? () => onError({
+          name: 'BiometricError',
+          message: 'User cancelled',
+          code: BiometricErrorCode.USER_CANCELLED,
+        } as BiometricError) : undefined}
         styles={customStyles}
       />
     );
@@ -199,6 +210,7 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
       return (
         <VideoRecorder
           theme={theme}
+          language={language}
           challenges={currentChallenges}
           smartMode={smartLivenessMode}
           sessionId={sdk.getSessionId() || undefined}
@@ -216,6 +228,7 @@ export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
       <CameraCapture
         mode={cameraMode}
         theme={theme}
+        language={language}
         onCapture={handleCaptureComplete}
         onCancel={() => setShowCamera(false)}
       />

package/src/components/CameraCapture.tsx

@@ -15,13 +15,14 @@ import {
 } from 'react-native';
 import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
 import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
-import { ThemeConfig } from '@hexar/biometric-identity-sdk-core';
+import { ThemeConfig, SupportedLanguage, getStrings, setLanguage } from '@hexar/biometric-identity-sdk-core';
 
 const { width, height } = Dimensions.get('window');
 
 export interface CameraCaptureProps {
   mode: 'front' | 'back';
   theme?: ThemeConfig;
+  language?: SupportedLanguage;
   onCapture: (imageData: string) => void;
   onCancel: () => void;
 }
@@ -29,6 +30,7 @@ export interface CameraCaptureProps {
 export const CameraCapture: React.FC<CameraCaptureProps> = ({
   mode,
   theme,
+  language,
   onCapture,
   onCancel,
 }) => {
@@ -37,6 +39,11 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
   const cameraRef = useRef<Camera>(null);
   const { hasPermission: cameraPermission, requestPermission } = useCameraPermission();
   
+  if (language) {
+    setLanguage(language);
+  }
+  const strings = getStrings();
+  
   // Get camera device (back camera for document capture)
   const device = useCameraDevice('back');
 
@@ -69,9 +76,12 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
     } catch (error) {
       console.error('Permission check error:', error);
       setHasPermission(false);
+      const errorMsg = typeof strings.errors.cameraPermissionDenied === 'string' 
+        ? strings.errors.cameraPermissionDenied 
+        : strings.errors.cameraPermissionDenied?.message || 'Please enable camera access in your device settings to capture your ID document.';
       Alert.alert(
         'Camera Permission Required',
-        'Please enable camera access in your device settings to capture your ID document.'
+        errorMsg
       );
     }
   };
@@ -133,25 +143,29 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
   };
 
   const instructions = mode === 'front'
-    ? 'Position the front of your ID within the frame'
-    : 'Position the back of your ID within the frame';
+    ? strings.capture.frontId.instruction
+    : strings.capture.backId.instruction;
 
   if (!hasPermission) {
     return (
       <View style={styles.container}>
         <View style={styles.permissionContainer}>
-          <Text style={styles.permissionText}>Camera permission is required</Text>
+          <Text style={styles.permissionText}>
+            {typeof strings.errors.cameraPermissionDenied === 'string' 
+              ? strings.errors.cameraPermissionDenied 
+              : strings.errors.cameraPermissionDenied?.message || 'Camera permission is required'}
+          </Text>
           <TouchableOpacity
             style={[styles.button, { backgroundColor: theme?.primaryColor || '#6366F1' }]}
             onPress={checkPermissions}
           >
-            <Text style={styles.buttonText}>Grant Permission</Text>
+            <Text style={styles.buttonText}>{strings.common.grantPermission || 'Grant Permission'}</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={[styles.button, styles.cancelButton]}
             onPress={onCancel}
           >
-            <Text style={styles.buttonText}>Cancel</Text>
+            <Text style={styles.buttonText}>{strings.common.cancel || 'Cancel'}</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -162,12 +176,12 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
     return (
       <View style={styles.container}>
         <View style={styles.permissionContainer}>
-          <Text style={styles.permissionText}>Camera not available</Text>
+          <Text style={styles.permissionText}>{strings.errors.cameraNotAvailable || 'Camera not available'}</Text>
           <TouchableOpacity
             style={[styles.button, styles.cancelButton]}
             onPress={onCancel}
           >
-            <Text style={styles.buttonText}>Cancel</Text>
+            <Text style={styles.buttonText}>{strings.common.cancel || 'Cancel'}</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -203,9 +217,8 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
       <View style={styles.instructionsContainer}>
         <Text style={styles.instructionsText}>{instructions}</Text>
         <Text style={styles.tipsText}>
-          • Ensure good lighting{'\n'}
-          • Avoid glare and shadows{'\n'}
-          • Keep document flat and complete
+          {mode === 'front' ? strings.capture.frontId.tips : strings.capture.backId.tips || 
+            '• Ensure good lighting\n• Avoid glare and shadows\n• Keep document flat and complete'}
         </Text>
       </View>
 
@@ -215,7 +228,7 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
           style={[styles.button, styles.cancelButton]}
           onPress={onCancel}
         >
-          <Text style={styles.buttonText}>Cancel</Text>
+          <Text style={styles.buttonText}>{strings.common.cancel || 'Cancel'}</Text>
         </TouchableOpacity>
 
         <TouchableOpacity