@trustchex/react-native-sdk 1.355.1 → 1.357.0

package/src/Shared/Components/QrCodeScannerCamera.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
 import {
   View,
   StyleSheet,
@@ -7,152 +7,144 @@ import {
   Text,
   Linking,
   Platform,
+  PermissionsAndroid,
+  TouchableOpacity,
+  type NativeSyntheticEvent,
 } from 'react-native';
 import {
-  Camera,
-  useCameraDevice,
-  useCameraFormat,
-  useCameraPermission,
-  useFrameProcessor,
-  type Orientation,
-} from 'react-native-vision-camera';
-import { useRunOnJS, useSharedValue } from 'react-native-worklets-core';
+  TrustchexCamera,
+  type TrustchexCameraHandle,
+  type Frame,
+} from './TrustchexCamera';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { useIsFocused } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
+import { debugLog, logError } from '../Libs/debug.utils';
 import LottieView from 'lottie-react-native';
-import { type Barcode, scanCodes } from '../VisionCameraPlugins/BarcodeScanner';
 import StyledButton from './StyledButton';
 import { useTheme } from '../Contexts/ThemeContext';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export interface QrCodeScannerCameraProps {
   onQrCodeScanned: (data: string) => void;
+  onClose?: () => void;
 }
 
-const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
+const QrCodeScannerCamera = ({
+  onQrCodeScanned,
+  onClose,
+}: QrCodeScannerCameraProps) => {
   useKeepAwake();
   const theme = useTheme();
-  const cameraPermission = useCameraPermission();
-  const [permissionsRequested, setPermissionsRequested] = React.useState(false);
-  const [isActive, setIsActive] = React.useState(false);
+  const insets = useSafeAreaInsets();
+  const cameraRef = useRef<TrustchexCameraHandle>(null);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [permissionsRequested, setPermissionsRequested] = useState(false);
+  const [isActive, setIsActive] = useState(false);
   const isFocused = useIsFocused();
-  const device = useCameraDevice('back', {
-    physicalDevices: ['wide-angle-camera'],
-  });
-  const format = useCameraFormat(device, [
-    {
-      videoResolution: {
-        width: 1920,
-        height: 1080,
-      },
-      iso: 'max',
-      photoHdr: false,
-      videoHdr: false,
-    },
-  ]);
-  const isCameraInitialized = useSharedValue(false);
   const { t } = useTranslation();
+  const lastScanTime = useRef(0);
+  const hasScanned = useRef(false);
 
   const isInScanningFrame = (
-    code: Barcode,
+    boundingBox: { left: number; top: number; right: number; bottom: number },
     width: number,
-    height: number,
-    orientation: Orientation
+    height: number
   ) => {
+    // Match UI scanArea: top: '35%', left: '3%', right: '3%', bottom: '35%'
+    // Add 2% margin buffer to ensure code is comfortably inside frame
+    const marginBuffer = 0.02;
     const scanningFrame = {
-      x: 0.35 * width,
-      y: 0.03 * height,
-      width: 0.3 * width,
-      height: 0.94 * height,
+      left: width * (0.03 + marginBuffer),
+      top: height * (0.35 + marginBuffer),
+      right: width * (0.97 - marginBuffer),
+      bottom: height * (0.65 - marginBuffer),
     };
 
-    if (orientation === 'landscape-right' || orientation === 'landscape-left') {
-      // Adjust scanning frame for landscape orientation
-      scanningFrame.x = 0.03 * height;
-      scanningFrame.y = 0.35 * width;
-      scanningFrame.width = 0.94 * height;
-      scanningFrame.height = 0.3 * width;
-    }
+    console.log(
+      `[QR Frame Check] Frame: ${width}x${height}, Scanning: left=${scanningFrame.left}, top=${scanningFrame.top}, right=${scanningFrame.right}, bottom=${scanningFrame.bottom}`
+    );
+    console.log(
+      `[QR Frame Check] Code bbox: left=${boundingBox.left}, top=${boundingBox.top}, right=${boundingBox.right}, bottom=${boundingBox.bottom}`
+    );
 
-    // Assuming Barcode has a boundingBox property: { x, y, width, height }
-    const boundingBox = code.boundingBox;
-    if (!boundingBox) {
-      return false;
-    }
-    const codeX = boundingBox.origin.x;
-    const codeY = boundingBox.origin.y;
-    const codeWidth = boundingBox.size.width;
-    const codeHeight = boundingBox.size.height;
-    const codeRight = codeX + codeWidth;
-    const codeBottom = codeY + codeHeight;
-    const frameRight = scanningFrame.x + scanningFrame.width;
-    const frameBottom = scanningFrame.y + scanningFrame.height;
+    // Check if entire bounding box is within scanning frame (with margin buffer)
+    const isInFrame =
+      boundingBox.left >= scanningFrame.left &&
+      boundingBox.top >= scanningFrame.top &&
+      boundingBox.right <= scanningFrame.right &&
+      boundingBox.bottom <= scanningFrame.bottom;
 
-    // Check if the code is within the scanning frame
-    if (
-      codeX >= scanningFrame.x &&
-      codeY >= scanningFrame.y &&
-      codeRight <= frameRight &&
-      codeBottom <= frameBottom
-    ) {
-      return true;
-    }
+    console.log(`[QR Frame Check] Is in frame: ${isInFrame}`);
 
-    return false;
+    return isInFrame;
   };
 
-  const handleQrCode = useRunOnJS(
-    (
-      code: Barcode,
-      width: number,
-      height: number,
-      orientation: Orientation
-    ) => {
-      // TODO: Fix iOS coordinates - iOS coordinate system conversion may be incorrect
-      // causing frame checking to fail. Need to verify coordinate normalization
-      // between iOS Vision framework and React Native coordinate systems.
+  const handleFrame = useCallback(
+    async (event: NativeSyntheticEvent<{ frame: Frame }>) => {
+      if (hasScanned.current) return;
 
-      // On iOS, skip frame checking and scan any QR code found
-      if (Platform.OS === 'ios') {
-        if (code.value) {
-          onQrCodeScanned(code.value);
-        }
-      } else {
-        // On Android, continue with frame checking
-        if (isInScanningFrame(code, width, height, orientation) && code.value) {
-          onQrCodeScanned(code.value);
+      const now = Date.now();
+      // Throttle to ~3 FPS for QR scanning
+      if (now - lastScanTime.current < 333) {
+        return;
+      }
+      lastScanTime.current = now;
+
+      const { frame } = event.nativeEvent;
+
+      try {
+        // Barcodes are already detected natively — read directly from frame
+        const barcodes = frame.barcodes;
+        if (!barcodes || barcodes.length !== 1) return;
+
+        const code = barcodes[0];
+
+        // Use frame checking on both platforms for consistent behavior
+        if (
+          code.boundingBox &&
+          isInScanningFrame(code.boundingBox, frame.width, frame.height) &&
+          code.rawValue
+        ) {
+          hasScanned.current = true;
+          onQrCodeScanned(code.rawValue);
         }
+      } catch (error) {
+        logError('[QrCodeScannerCamera] Error processing frame:', error);
       }
     },
     [onQrCodeScanned]
   );
 
-  const frameProcessor = useFrameProcessor((frame) => {
-    'worklet';
-
-    if (!isCameraInitialized.value) {
-      return;
-    }
-
-    const codes = scanCodes(frame, { barcodeTypes: ['qr'] });
-
-    if (codes && codes.length === 1) {
-      handleQrCode(codes[0], frame.width, frame.height, frame.orientation);
-    }
+  const handleCameraReady = useCallback(() => {
+    debugLog('QrCodeScannerCamera', '[QrCodeScannerCamera] Camera ready');
   }, []);
 
+  const handleCameraError = useCallback(
+    (event: NativeSyntheticEvent<{ error: string }>) => {
+      logError('[QrCodeScannerCamera] Camera error:', event.nativeEvent.error);
+    },
+    []
+  );
+
   useEffect(() => {
     const requestPermissions = async () => {
-      if (!cameraPermission.hasPermission) {
-        await cameraPermission.requestPermission();
+      if (Platform.OS === 'android') {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.CAMERA
+        );
+        setHasPermission(granted === PermissionsAndroid.RESULTS.GRANTED);
+      } else {
+        // iOS permissions handled by native camera
+        setHasPermission(true);
       }
       setPermissionsRequested(true);
     };
     requestPermissions();
-  }, [cameraPermission]);
+  }, []);
 
   useEffect(() => {
-    if (!!device && !!format && isFocused) {
+    if (isFocused && hasPermission) {
       setIsActive(true);
     } else {
       setIsActive(false);
@@ -161,7 +153,7 @@ const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
     return () => {
       setIsActive(false);
     };
-  }, [device, format, isFocused]);
+  }, [isFocused, hasPermission]);
 
   if (!permissionsRequested) {
     return (
@@ -171,8 +163,7 @@ const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
     );
   }
 
-  if (!cameraPermission.hasPermission) {
-    // Camera permission denied by user - their choice, not actionable
+  if (!hasPermission) {
     return (
       <View style={styles.permissionContainer}>
         <Text style={styles.permissionText}>
@@ -190,32 +181,18 @@ const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
     );
   }
 
-  if (device == null) {
-    // No camera device - device limitation, not actionable
-    return (
-      <View style={styles.permissionContainer}>
-        <TextView style={styles.permissionText}>
-          {t('general.noCameraDetected')}
-        </TextView>
-      </View>
-    );
-  }
-
   return (
     <View style={StyleSheet.absoluteFill}>
-      <Camera
+      <TrustchexCamera
+        ref={cameraRef}
         style={StyleSheet.absoluteFill}
-        frameProcessor={frameProcessor}
-        device={device}
-        format={format}
-        isActive={isActive}
-        photo={false}
-        video={false}
-        audio={false}
-        onInitialized={() => {
-          isCameraInitialized.value = true;
-        }}
-        fps={30}
+        cameraType="back"
+        enableFrameProcessing={isActive}
+        enableBarcodeScanning={isActive}
+        targetFps={30}
+        onFrameAvailable={handleFrame}
+        onCameraReady={handleCameraReady}
+        onCameraError={handleCameraError}
       />
       <View style={styles.topZone}>
         <TextView style={styles.topZoneText}>
@@ -233,6 +210,16 @@ const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
           autoPlay
         />
       </View>
+      {onClose && (
+        <TouchableOpacity
+          onPress={onClose}
+          style={[styles.backButton, { top: Math.max(insets.top + 10, 50) }]}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          activeOpacity={0.7}
+        >
+          <TextView style={styles.backButtonText}>×</TextView>
+        </TouchableOpacity>
+      )}
     </View>
   );
 };
@@ -289,6 +276,25 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     padding: 20,
   },
+  backButton: {
+    position: 'absolute',
+    top: 20,
+    left: 20,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+    elevation: 5,
+  },
+  backButtonText: {
+    color: 'white',
+    fontSize: 28,
+    fontWeight: 'bold',
+    lineHeight: 28,
+  },
   leftZone: {
     position: 'absolute',
     top: '35%',

package/src/Shared/Components/TrustchexCamera.tsx

@@ -0,0 +1,289 @@
+import React, { useRef, useCallback } from 'react';
+import {
+  requireNativeComponent,
+  type NativeSyntheticEvent,
+  StyleSheet,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import { logError } from '../Libs/debug.utils';
+
+// Native component interface
+const TrustchexCameraViewNative =
+  requireNativeComponent<TrustchexCameraProps>('TrustchexCamera');
+
+// Commands interface for Fabric
+interface NativeCommands {
+  setFocusPoint: (
+    viewRef: React.ElementRef<typeof TrustchexCameraViewNative>,
+    x: number,
+    y: number
+  ) => void;
+  setExposureOffset: (
+    viewRef: React.ElementRef<typeof TrustchexCameraViewNative>,
+    offset: number
+  ) => void;
+  startRecording: (
+    viewRef: React.ElementRef<typeof TrustchexCameraViewNative>
+  ) => void;
+  stopRecording: (
+    viewRef: React.ElementRef<typeof TrustchexCameraViewNative>
+  ) => void;
+  cancelRecording: (
+    viewRef: React.ElementRef<typeof TrustchexCameraViewNative>
+  ) => void;
+  deleteRecording: (
+    viewRef: React.ElementRef<typeof TrustchexCameraViewNative>,
+    filePath: string
+  ) => void;
+}
+
+const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'setFocusPoint',
+    'setExposureOffset',
+    'startRecording',
+    'stopRecording',
+    'cancelRecording',
+    'deleteRecording',
+  ],
+});
+
+// Frame data structure — ML Kit results come pre-processed from native
+export interface Frame {
+  width: number;
+  height: number;
+  orientation: number;
+  timestamp: number;
+  brightness?: number; // Average Y-plane luminance (0-255), computed natively
+  base64Image?: string; // JPEG base64 (only when includeBase64 or faceDetection enabled)
+  // Native ML Kit results (populated when corresponding detection mode is enabled)
+  faces?: NativeFace[];
+  textBlocks?: NativeTextBlock[];
+  resultText?: string;
+  barcodes?: NativeBarcode[];
+  mrzResult?: NativeMRZResult;
+}
+
+export interface NativeFace {
+  bounds: { x: number; y: number; width: number; height: number };
+  yawAngle: number;
+  pitchAngle: number;
+  rollAngle: number;
+  smilingProbability?: number;
+  leftEyeOpenProbability?: number;
+  rightEyeOpenProbability?: number;
+}
+
+export interface NativeTextBlock {
+  text: string;
+  blockFrame?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    boundingCenterX: number;
+    boundingCenterY: number;
+  };
+  cornerPoints?: Array<{ x: number; y: number }>;
+}
+
+export interface NativeBarcode {
+  rawValue: string;
+  displayValue: string;
+  format: number;
+  boundingBox?: { left: number; top: number; right: number; bottom: number };
+  cornerPoints?: Array<{ x: number; y: number }>;
+}
+
+export interface NativeMRZResult {
+  valid: boolean;
+  format: string;
+  error?: string;
+  documentCode?: string;
+  issuingState?: string;
+  documentNumber?: string;
+  lastName?: string;
+  firstName?: string;
+  birthDate?: string;
+  sex?: string;
+  expirationDate?: string;
+  nationality?: string;
+  optional1?: string;
+  optional2?: string;
+  rawLines?: string;
+}
+
+interface TrustchexCameraProps {
+  style?: StyleProp<ViewStyle>;
+  cameraType?: 'front' | 'back';
+  torchEnabled?: boolean;
+  enableFrameProcessing?: boolean;
+  targetFps?: number;
+  // ML Kit detection modes — processing runs natively, results arrive in Frame
+  enableFaceDetection?: boolean;
+  enableTextRecognition?: boolean;
+  enableBarcodeScanning?: boolean;
+  enableMrzValidation?: boolean;
+  includeBase64?: boolean;
+  onFrameAvailable?: (event: NativeSyntheticEvent<{ frame: Frame }>) => void;
+  onCameraReady?: (
+    event: NativeSyntheticEvent<{
+      minExposureOffset: number;
+      maxExposureOffset: number;
+    }>
+  ) => void;
+  onCameraError?: (event: NativeSyntheticEvent<{ error: string }>) => void;
+  onRecordingFinished?: (event: NativeSyntheticEvent<{ path: string }>) => void;
+  onRecordingError?: (event: NativeSyntheticEvent<{ error: string }>) => void;
+}
+
+export interface TrustchexCameraHandle {
+  setFocusPoint: (x: number, y: number) => void;
+  setExposureOffset: (offset: number) => void;
+  startRecording: (options: {
+    fileType?: string;
+    videoCodec?: string;
+    onRecordingFinished?: (video: { path: string }) => void;
+    onRecordingError?: (error: { error: string }) => void;
+  }) => void;
+  stopRecording: () => Promise<void>;
+  cancelRecording: () => Promise<void>;
+  deleteRecording: (filePath: string) => void;
+}
+
+export const TrustchexCamera = React.forwardRef<
+  TrustchexCameraHandle,
+  TrustchexCameraProps
+>((props, ref) => {
+  const cameraRef = useRef(null);
+  const recordingCallbacksRef = useRef<{
+    onRecordingFinished?: (video: { path: string }) => void;
+    onRecordingError?: (error: { error: string }) => void;
+  }>({});
+
+  const handleRecordingFinished = useCallback(
+    (event: NativeSyntheticEvent<{ path: string }>) => {
+      recordingCallbacksRef.current.onRecordingFinished?.({
+        path: event.nativeEvent.path,
+      });
+    },
+    []
+  );
+
+  const handleRecordingError = useCallback(
+    (event: NativeSyntheticEvent<{ error: string }>) => {
+      recordingCallbacksRef.current.onRecordingError?.({
+        error: event.nativeEvent.error,
+      });
+    },
+    []
+  );
+
+  const setFocusPoint = useCallback((x: number, y: number) => {
+    try {
+      if (cameraRef.current) {
+        Commands.setFocusPoint(cameraRef.current, x, y);
+      }
+    } catch (error) {
+      logError('[TrustchexCamera] setFocusPoint error:', error);
+    }
+  }, []);
+
+  const setExposureOffset = useCallback((offset: number) => {
+    try {
+      if (cameraRef.current) {
+        Commands.setExposureOffset(cameraRef.current, offset);
+      }
+    } catch (error) {
+      logError('[TrustchexCamera] setExposureOffset error:', error);
+    }
+  }, []);
+
+  const startRecording = useCallback(
+    (options: {
+      fileType?: string;
+      videoCodec?: string;
+      onRecordingFinished?: (video: { path: string }) => void;
+      onRecordingError?: (error: { error: string }) => void;
+    }) => {
+      recordingCallbacksRef.current = {
+        onRecordingFinished: options.onRecordingFinished,
+        onRecordingError: options.onRecordingError,
+      };
+      try {
+        if (cameraRef.current) {
+          Commands.startRecording(cameraRef.current);
+        }
+      } catch (error) {
+        logError('[TrustchexCamera] startRecording error:', error);
+        options.onRecordingError?.({ error: (error as Error).message });
+      }
+    },
+    []
+  );
+
+  const stopRecording = useCallback(() => {
+    return new Promise<void>((resolve) => {
+      try {
+        if (cameraRef.current) {
+          Commands.stopRecording(cameraRef.current);
+        }
+      } catch (error) {
+        logError('[TrustchexCamera] stopRecording error:', error);
+      }
+      resolve();
+    });
+  }, []);
+
+  const cancelRecording = useCallback(() => {
+    return new Promise<void>((resolve) => {
+      // Clear callbacks to prevent stale onRecordingFinished from firing
+      recordingCallbacksRef.current = {};
+      try {
+        if (cameraRef.current) {
+          Commands.cancelRecording(cameraRef.current);
+        }
+      } catch (error) {
+        logError('[TrustchexCamera] cancelRecording error:', error);
+      }
+      resolve();
+    });
+  }, []);
+
+  const deleteRecording = useCallback((filePath: string) => {
+    try {
+      if (cameraRef.current) {
+        Commands.deleteRecording(cameraRef.current, filePath);
+      }
+    } catch (error) {
+      logError('[TrustchexCamera] deleteRecording error:', error);
+    }
+  }, []);
+
+  React.useImperativeHandle(ref, () => ({
+    setFocusPoint,
+    setExposureOffset,
+    startRecording,
+    stopRecording,
+    cancelRecording,
+    deleteRecording,
+  }));
+
+  return (
+    <TrustchexCameraViewNative
+      ref={cameraRef}
+      {...props}
+      onRecordingFinished={handleRecordingFinished}
+      onRecordingError={handleRecordingError}
+      style={[styles.camera, props.style]}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  camera: {
+    flex: 1,
+  },
+});

package/src/Shared/Config/camera-enhancement.config.ts

@@ -17,8 +17,8 @@ export const ENHANCEMENT_CONFIG = {
       mrzScanning: { low: 45, high: 130, target: 80 },
     },
     adaptiveStep: true,
-    maxStepSize: 2,  // Reduced from 3 for smoother transitions
-    hysteresis: 5,   // Dead zone to prevent oscillation
+    maxStepSize: 2, // Reduced from 3 for smoother transitions
+    hysteresis: 5, // Dead zone to prevent oscillation
   },
 
   contrast: {