@hexar/biometric-identity-sdk-react-native 1.17.0 → 1.19.0

package/dist/components/CameraCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CameraCapture.d.ts","sourceRoot":"","sources":["../../src/components/CameraCapture.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAa3D,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAmC,MAAM,oCAAoC,CAAC;AAIrH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqQtD,CAAC;AA0JF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CameraCapture.d.ts","sourceRoot":"","sources":["../../src/components/CameraCapture.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAaxE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAmC,MAAM,oCAAoC,CAAC;AAIrH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwStD,CAAC;AA0JF,eAAe,aAAa,CAAC"}

package/dist/components/CameraCapture.js

@@ -53,8 +53,12 @@ const CameraCapture = ({ mode, theme, language, onCapture, onCancel, }) => {
         (0, biometric_identity_sdk_core_1.setLanguage)(language);
     }
     const strings = (0, biometric_identity_sdk_core_1.getStrings)();
-    // Get camera device (back camera for document capture)
-    const device = (0, react_native_vision_camera_1.useCameraDevice)('back');
+    // Get camera device (back camera for document capture).
+    // Prefer wide-angle (main) camera — some Android devices default to
+    // macro/depth sensors that have fixed focus and produce blurry images.
+    const device = (0, react_native_vision_camera_1.useCameraDevice)('back', {
+        physicalDevices: ['wide-angle-camera', 'ultra-wide-angle-camera', 'telephoto-camera'],
+    });
     const [deviceReady, setDeviceReady] = (0, react_1.useState)(!!device);
     (0, react_1.useEffect)(() => {
         checkPermissions();
@@ -68,6 +72,24 @@ const CameraCapture = ({ mode, theme, language, onCapture, onCancel, }) => {
         const timeout = setTimeout(() => setDeviceReady(true), 5000);
         return () => clearTimeout(timeout);
     }, [device]);
+    // Trigger autofocus on the center of the viewfinder.
+    // Some Android devices (e.g. Ulefone Armor series) don't auto-focus
+    // without an explicit programmatic trigger.
+    const triggerFocus = (0, react_1.useCallback)(() => {
+        try {
+            cameraRef.current?.focus({ x: width / 2, y: height / 2 });
+        }
+        catch {
+            // focus() not supported or camera not ready — safe to ignore
+        }
+    }, []);
+    // Trigger focus once camera is ready
+    (0, react_1.useEffect)(() => {
+        if (device && hasPermission) {
+            const timer = setTimeout(triggerFocus, 500);
+            return () => clearTimeout(timer);
+        }
+    }, [device, hasPermission, triggerFocus]);
     const checkPermissions = async () => {
         try {
             // First check if we already have permission from the hook
@@ -99,11 +121,22 @@ const CameraCapture = ({ mode, theme, language, onCapture, onCancel, }) => {
             react_native_1.Alert.alert('Camera Permission Required', errorMsg);
         }
     };
+    const handleTapToFocus = (0, react_1.useCallback)((evt) => {
+        try {
+            cameraRef.current?.focus({ x: evt.nativeEvent.locationX, y: evt.nativeEvent.locationY });
+        }
+        catch {
+            // ignore — device may not support tap-to-focus
+        }
+    }, []);
     const handleCapture = async () => {
         if (isCapturing || !cameraRef.current || !device)
             return;
         try {
             setIsCapturing(true);
+            // Trigger focus before capture to ensure sharpness
+            triggerFocus();
+            await new Promise(r => setTimeout(r, 300));
             // Capture photo using react-native-vision-camera
             const photo = await cameraRef.current.takePhoto({
                 flash: 'off',
@@ -195,9 +228,9 @@ const CameraCapture = ({ mode, theme, language, onCapture, onCancel, }) => {
                     react_1.default.createElement(react_native_1.Text, { style: styles.buttonText }, 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_1.TouchableOpacity, { style: styles.cameraContainer, activeOpacity: 1, onPress: handleTapToFocus },
             react_1.default.createElement(react_native_vision_camera_1.Camera, { ref: cameraRef, style: react_native_1.StyleSheet.absoluteFill, device: device, isActive: true, photo: true }),
-            react_1.default.createElement(react_native_1.View, { style: styles.overlay },
+            react_1.default.createElement(react_native_1.View, { style: styles.overlay, pointerEvents: "none" },
                 react_1.default.createElement(react_native_1.View, { style: styles.frameContainer },
                     react_1.default.createElement(react_native_1.View, { style: styles.frame },
                         react_1.default.createElement(react_native_1.View, { style: [styles.corner, styles.cornerTopLeft] }),

package/dist/components/VideoRecorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoRecorder.d.ts","sourceRoot":"","sources":["../../src/components/VideoRecorder.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAcxE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,iBAAiB,EAAmC,MAAM,oCAAoC,CAAC;AAE1I,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,UAAU,EAAE,CAAC,SAAS,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2CD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAq+BtD,CAAC;AA4PF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VideoRecorder.d.ts","sourceRoot":"","sources":["../../src/components/VideoRecorder.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAexE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,iBAAiB,EAAmC,MAAM,oCAAoC,CAAC;AAE1I,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,UAAU,EAAE,CAAC,SAAS,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2CD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAy/BtD,CAAC;AA4PF,eAAe,aAAa,CAAC"}

package/dist/components/VideoRecorder.js

@@ -103,7 +103,11 @@ const VideoRecorder = ({ theme, language, duration, instructions, challenges: pr
     const [hasPermission, setHasPermission] = (0, react_1.useState)(false);
     const cameraRef = (0, react_1.useRef)(null);
     const { hasPermission: cameraPermission, requestPermission } = (0, react_native_vision_camera_1.useCameraPermission)();
-    const device = (0, react_native_vision_camera_1.useCameraDevice)('front');
+    // Prefer wide-angle (main) front camera — some Android devices expose
+    // multiple front sensors and the default may lack autofocus.
+    const device = (0, react_native_vision_camera_1.useCameraDevice)('front', {
+        physicalDevices: ['wide-angle-camera', 'ultra-wide-angle-camera'],
+    });
     const [deviceReady, setDeviceReady] = (0, react_1.useState)(!!device);
     const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
@@ -116,6 +120,17 @@ const VideoRecorder = ({ theme, language, duration, instructions, challenges: pr
     const videoRecordingRef = (0, react_1.useRef)(null);
     const isRecordingRef = (0, react_1.useRef)(false);
     const recordingTimeoutRef = (0, react_1.useRef)(null);
+    // Trigger autofocus on center — some Android devices (e.g. Ulefone Armor)
+    // don't auto-focus without an explicit programmatic trigger.
+    const triggerFocus = (0, react_1.useCallback)(() => {
+        try {
+            const { width: w, height: h } = react_native_1.Dimensions.get('window');
+            cameraRef.current?.focus({ x: w / 2, y: h / 2 });
+        }
+        catch {
+            // focus() not supported or camera not ready — safe to ignore
+        }
+    }, []);
     const minDurationMs = 8000;
     const totalDuration = duration || Math.max(minDurationMs, challenges.reduce((sum, c) => sum + c.duration_ms, 0) + 2000);
     (0, react_1.useEffect)(() => {
@@ -220,6 +235,9 @@ const VideoRecorder = ({ theme, language, duration, instructions, challenges: pr
     (0, react_1.useEffect)(() => {
         if (phase !== 'countdown')
             return;
+        // Trigger focus at the start of countdown so the camera has ~3s to lock focus
+        if (countdown === 3)
+            triggerFocus();
         if (countdown > 0) {
             react_native_1.Animated.sequence([
                 react_native_1.Animated.timing(scaleAnim, {
@@ -639,6 +657,8 @@ const VideoRecorder = ({ theme, language, duration, instructions, challenges: pr
         setPhase('recording');
         recordingStartTime.current = Date.now();
         isRecordingRef.current = true;
+        // Ensure camera is focused before recording
+        triggerFocus();
         // Reset completed challenges ref when starting new recording
         completedChallengesRef.current = [];
         setCompletedChallenges([]);

package/package.json

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

package/src/components/CameraCapture.tsx

@@ -3,7 +3,7 @@
  * Handles ID document photo capture
  */
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import {
   View,
   Text,
@@ -45,8 +45,12 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
   }
   const strings = getStrings();
 
-  // Get camera device (back camera for document capture)
-  const device = useCameraDevice('back');
+  // Get camera device (back camera for document capture).
+  // Prefer wide-angle (main) camera — some Android devices default to
+  // macro/depth sensors that have fixed focus and produce blurry images.
+  const device = useCameraDevice('back', {
+    physicalDevices: ['wide-angle-camera', 'ultra-wide-angle-camera', 'telephoto-camera'],
+  });
   const [deviceReady, setDeviceReady] = useState(!!device);
 
   useEffect(() => {
@@ -63,6 +67,25 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
     return () => clearTimeout(timeout);
   }, [device]);
 
+  // Trigger autofocus on the center of the viewfinder.
+  // Some Android devices (e.g. Ulefone Armor series) don't auto-focus
+  // without an explicit programmatic trigger.
+  const triggerFocus = useCallback(() => {
+    try {
+      cameraRef.current?.focus({ x: width / 2, y: height / 2 });
+    } catch {
+      // focus() not supported or camera not ready — safe to ignore
+    }
+  }, []);
+
+  // Trigger focus once camera is ready
+  useEffect(() => {
+    if (device && hasPermission) {
+      const timer = setTimeout(triggerFocus, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [device, hasPermission, triggerFocus]);
+
   const checkPermissions = async () => {
     try {
       // First check if we already have permission from the hook
@@ -98,12 +121,24 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
     }
   };
 
+  const handleTapToFocus = useCallback((evt: any) => {
+    try {
+      cameraRef.current?.focus({ x: evt.nativeEvent.locationX, y: evt.nativeEvent.locationY });
+    } catch {
+      // ignore — device may not support tap-to-focus
+    }
+  }, []);
+
   const handleCapture = async () => {
     if (isCapturing || !cameraRef.current || !device) return;
 
     try {
       setIsCapturing(true);
 
+      // Trigger focus before capture to ensure sharpness
+      triggerFocus();
+      await new Promise(r => setTimeout(r, 300));
+
       // Capture photo using react-native-vision-camera
       const photo = await cameraRef.current.takePhoto({
         flash: 'off',
@@ -231,8 +266,8 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
 
   return (
     <View style={styles.container}>
-      {/* Camera View */}
-      <View style={styles.cameraContainer}>
+      {/* Camera View — tap anywhere to trigger focus */}
+      <TouchableOpacity style={styles.cameraContainer} activeOpacity={1} onPress={handleTapToFocus}>
         <Camera
           ref={cameraRef}
           style={StyleSheet.absoluteFill}
@@ -242,7 +277,7 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
         />
 
         {/* Document Frame Overlay */}
-        <View style={styles.overlay}>
+        <View style={styles.overlay} pointerEvents="none">
           <View style={styles.frameContainer}>
             <View style={styles.frame}>
               <View style={[styles.corner, styles.cornerTopLeft]} />
@@ -252,7 +287,7 @@ export const CameraCapture: React.FC<CameraCaptureProps> = ({
             </View>
           </View>
         </View>
-      </View>
+      </TouchableOpacity>
 
       {/* Instructions */}
       <View style={styles.instructionsContainer}>

package/src/components/VideoRecorder.tsx

@@ -14,6 +14,7 @@ import {
   Platform,
   Alert,
   ActivityIndicator,
+  Dimensions,
 } from 'react-native';
 import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
 import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
@@ -131,7 +132,11 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
   const [hasPermission, setHasPermission] = useState(false);
   const cameraRef = useRef<Camera>(null);
   const { hasPermission: cameraPermission, requestPermission } = useCameraPermission();
-  const device = useCameraDevice('front');
+  // Prefer wide-angle (main) front camera — some Android devices expose
+  // multiple front sensors and the default may lack autofocus.
+  const device = useCameraDevice('front', {
+    physicalDevices: ['wide-angle-camera', 'ultra-wide-angle-camera'],
+  });
   const [deviceReady, setDeviceReady] = useState(!!device);
   
   const fadeAnim = useRef(new Animated.Value(0)).current;
@@ -146,6 +151,17 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
   const videoRecordingRef = useRef<any>(null);
   const isRecordingRef = useRef<boolean>(false);
   const recordingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  // Trigger autofocus on center — some Android devices (e.g. Ulefone Armor)
+  // don't auto-focus without an explicit programmatic trigger.
+  const triggerFocus = useCallback(() => {
+    try {
+      const { width: w, height: h } = Dimensions.get('window');
+      cameraRef.current?.focus({ x: w / 2, y: h / 2 });
+    } catch {
+      // focus() not supported or camera not ready — safe to ignore
+    }
+  }, []);
+
   const minDurationMs = 8000;
   const totalDuration = duration || Math.max(
     minDurationMs,
@@ -260,6 +276,9 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
   useEffect(() => {
     if (phase !== 'countdown') return;
 
+    // Trigger focus at the start of countdown so the camera has ~3s to lock focus
+    if (countdown === 3) triggerFocus();
+
     if (countdown > 0) {
       Animated.sequence([
         Animated.timing(scaleAnim, {
@@ -745,6 +764,8 @@ export const VideoRecorder: React.FC<VideoRecorderProps> = ({
     setPhase('recording');
     recordingStartTime.current = Date.now();
     isRecordingRef.current = true;
+    // Ensure camera is focused before recording
+    triggerFocus();
     // Reset completed challenges ref when starting new recording
     completedChallengesRef.current = [];
     setCompletedChallenges([]);