@trustchex/react-native-sdk 1.409.0 → 1.464.0

package/lib/module/Screens/Dynamic/LivenessDetectionScreen.js

@@ -3,13 +3,12 @@
 import Svg, { Rect as SvgRect, Circle, Mask } from 'react-native-svg';
 import { useNavigation } from '@react-navigation/native';
 import React, { useState, useReducer, useContext, useEffect, useCallback, useRef } from 'react';
-import { StyleSheet, Text, View, Dimensions, Vibration, StatusBar } from 'react-native';
+import { Animated, Easing, StyleSheet, Text, View, Dimensions, Platform, Vibration, StatusBar } from 'react-native';
 import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context';
 import NativeCircularProgress from "../../Shared/Components/NativeCircularProgress.js";
 import FaceCamera from "../../Shared/Components/FaceCamera.js";
 import NavigationManager from "../../Shared/Components/NavigationManager.js";
 import AppContext from "../../Shared/Contexts/AppContext.js";
-import { contains } from "../../Shared/Libs/contains.js";
 import { useTranslation } from 'react-i18next';
 import StyledButton from "../../Shared/Components/StyledButton.js";
 import LottieView from 'lottie-react-native';
@@ -22,7 +21,7 @@ const {
   width: windowWidth,
   height: windowHeight
 } = Dimensions.get('window');
-const PREVIEW_SIZE = windowWidth * 0.8;
+const PREVIEW_SIZE = windowWidth * 0.95;
 const PREVIEW_RECT = {
   minX: (windowWidth - PREVIEW_SIZE) / 2,
   minY: (windowHeight - PREVIEW_SIZE) / 2,
@@ -44,9 +43,29 @@ const LivenessDetectionScreen = () => {
   const [isRecording, setIsRecording] = useState(false);
   const insets = useSafeAreaInsets();
   const referenceFaceTrackingId = useRef(null);
+  const recordingDotOpacity = useRef(new Animated.Value(1)).current;
 
   // Track screen view and exit
   useScreenTracking('liveness_detection');
+  useEffect(() => {
+    if (isRecording) {
+      const pulse = Animated.loop(Animated.sequence([Animated.timing(recordingDotOpacity, {
+        toValue: 0.2,
+        duration: 600,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      }), Animated.timing(recordingDotOpacity, {
+        toValue: 1,
+        duration: 600,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true
+      })]));
+      pulse.start();
+      return () => pulse.stop();
+    } else {
+      recordingDotOpacity.setValue(1);
+    }
+  }, [isRecording, recordingDotOpacity]);
 
   // Configure status bar for white background
   useStatusBarWhiteBackground();
@@ -113,7 +132,9 @@ const LivenessDetectionScreen = () => {
     } else {
       // Guide screen with white background - use dark icons
       StatusBar.setBarStyle('dark-content', true);
-      StatusBar.setBackgroundColor('#ffffff', true);
+      if (Platform.OS === 'android') {
+        StatusBar.setBackgroundColor('#ffffff', true);
+      }
     }
   }, [hasGuideShown]);
   useEffect(() => {
@@ -195,6 +216,13 @@ const LivenessDetectionScreen = () => {
     const rightOpen = face.rightEyeOpenProbability ?? 0;
     return leftOpen >= 0.8 && rightOpen >= 0.8;
   };
+  const areEyesVisible = face => {
+    // Relaxed check: eyes just need to be detected (not fully closed).
+    // Smiling naturally causes squinting, so a lower threshold is used.
+    const leftOpen = face.leftEyeOpenProbability ?? 0;
+    const rightOpen = face.rightEyeOpenProbability ?? 0;
+    return leftOpen >= 0.3 && rightOpen >= 0.3;
+  };
   const instructionReducer = (state, action) => {
     switch (action.type) {
       case 'RESET':
@@ -386,25 +414,33 @@ const LivenessDetectionScreen = () => {
       });
     }
 
-    // Calculate preview rect in frame coordinates (not screen coordinates)
-    // Preview circle is 80% of frame width, centered
-    const previewSizeInFrame = frameWidth * 0.8;
+    // Map the on-screen circle into frame coordinates.
+    // Camera uses FILL_CENTER / resizeAspectFill (cover): uniform scale filling
+    // the view, cropping overflow symmetrically.
+    const coverScale = Math.max(windowWidth / frameWidth, windowHeight / frameHeight);
+    const offsetX = (frameWidth - windowWidth / coverScale) / 2;
+    const offsetY = (frameHeight - windowHeight / coverScale) / 2;
     const previewRectInFrame = {
-      minX: (frameWidth - previewSizeInFrame) / 2,
-      minY: (frameHeight - previewSizeInFrame) / 2,
-      width: previewSizeInFrame,
-      height: previewSizeInFrame
-    };
-    const faceRectSmaller = {
-      width: face.bounds.width - PREVIEW_EDGE_OFFSET,
-      height: face.bounds.height - PREVIEW_EDGE_OFFSET,
-      minY: face.bounds.y + PREVIEW_EDGE_OFFSET / 2,
-      minX: face.bounds.x + PREVIEW_EDGE_OFFSET / 2
+      minX: PREVIEW_RECT.minX / coverScale + offsetX,
+      minY: PREVIEW_RECT.minY / coverScale + offsetY,
+      width: PREVIEW_RECT.width / coverScale,
+      height: PREVIEW_RECT.height / coverScale
     };
-    const previewContainsFace = contains({
-      outside: previewRectInFrame,
-      inside: faceRectSmaller
-    });
+    const previewSizeInFrame = PREVIEW_RECT.width / coverScale;
+
+    // Check containment using face center + yaw-stable core radius.
+    // When the head turns (yaw), the bounding box grows wider but height stays
+    // constant — so min(width, height)/2 gives a stable size that doesn't
+    // falsely trigger an outside-circle reset during TURN_HEAD_LEFT/RIGHT.
+    const faceCenterX = face.bounds.x + face.bounds.width / 2;
+    const faceCenterY = face.bounds.y + face.bounds.height / 2;
+    const faceCoreRadius = Math.max(0, Math.min(face.bounds.width, face.bounds.height) / 2 - PREVIEW_EDGE_OFFSET / 2);
+    const circleCX = previewRectInFrame.minX + previewRectInFrame.width / 2;
+    const circleCY = previewRectInFrame.minY + previewRectInFrame.height / 2;
+    const circleR = previewSizeInFrame / 2;
+    const faceDx = faceCenterX - circleCX;
+    const faceDy = faceCenterY - circleCY;
+    const previewContainsFace = faceDx * faceDx + faceDy * faceDy <= (circleR - faceCoreRadius) * (circleR - faceCoreRadius);
     const multipleFacesDetected = faces.length > 1;
     if (!isImageBright) {
       // Brightness too low - reset progress if we've started the flow
@@ -564,8 +600,9 @@ const LivenessDetectionScreen = () => {
           // Ensure user is looking at camera (face direction check)
           const isFacingCamera = instructions.SMILE.minAngle < face.yawAngle && face.yawAngle < instructions.SMILE.maxAngle && instructions.SMILE.minAngle < face.pitchAngle && face.pitchAngle < instructions.SMILE.maxAngle;
 
-          // Check if smiling with sufficient probability AND looking at camera AND eyes open
-          if (smilingProb >= instructions.SMILE.minProbability && isFacingCamera && areEyesOpen(face)) {
+          // Check if smiling with sufficient probability AND looking at camera AND eyes visible
+          // Use relaxed eye check — smiling naturally causes squinting
+          if (smilingProb >= instructions.SMILE.minProbability && isFacingCamera && areEyesVisible(face)) {
             instructions.SMILE.photo = image;
             dispatch({
               type: 'NEXT_INSTRUCTION',
@@ -711,6 +748,21 @@ const LivenessDetectionScreen = () => {
           fill: "white",
           mask: "url(#hole-mask)"
         })]
+      }), isRecording && /*#__PURE__*/_jsx(View, {
+        style: [styles.recordingIndicatorContainer, {
+          top: PREVIEW_RECT.minY - 40
+        }],
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.recordingIndicator,
+          children: [/*#__PURE__*/_jsx(Animated.View, {
+            style: [styles.recordingDot, {
+              opacity: recordingDotOpacity
+            }]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.recordingText,
+            children: "REC"
+          })]
+        })
       }), /*#__PURE__*/_jsx(View, {
         style: [styles.instructionsContainerBottom, {
           top: PREVIEW_RECT.minY + PREVIEW_SIZE + 20
@@ -836,6 +888,33 @@ const styles = StyleSheet.create({
     width: '100%',
     zIndex: 1
   },
+  recordingIndicatorContainer: {
+    position: 'absolute',
+    width: '100%',
+    alignItems: 'center',
+    zIndex: 2
+  },
+  recordingIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 20
+  },
+  recordingDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#ef4444'
+  },
+  recordingText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '700',
+    letterSpacing: 1
+  },
   guide: {
     flex: 1,
     display: 'flex',