@trustchex/react-native-sdk 1.374.0 → 1.409.0

package/src/Screens/Debug/MRZTestScreen.tsx

@@ -7,22 +7,38 @@ import {
   StatusBar,
   TouchableOpacity,
   type NativeSyntheticEvent,
+  type LayoutChangeEvent,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   TrustchexCamera,
   type TrustchexCameraHandle,
   type Frame,
+  type NativeTextBlock,
 } from '../../Shared/Components/TrustchexCamera';
 import mrzUtils from '../../Shared/Libs/mrz.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
+
+interface MrzOverlayBlock extends NativeTextBlock {
+  isMrz: boolean;
+}
 
 const MRZTestScreen = () => {
+  useKeepAwake();
   const cameraRef = useRef<TrustchexCameraHandle>(null);
   const [mrzText, setMrzText] = useState<string>('Waiting for MRZ...');
   const [mrzRawText, setMrzRawText] = useState<string>('');
   const [mrzValid, setMrzValid] = useState<boolean>(false);
   const [rawHistory, setRawHistory] = useState<string[]>([]);
   const [isPaused, setIsPaused] = useState<boolean>(false);
+  const [overlayBlocks, setOverlayBlocks] = useState<MrzOverlayBlock[]>([]);
+  const [cameraLayout, setCameraLayout] = useState({ width: 1, height: 1 });
+  const [frameSize, setFrameSize] = useState({ width: 1080, height: 1920 });
+
+  const handleCameraLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setCameraLayout({ width, height });
+  }, []);
 
   const handleFrame = useCallback(
     (event: NativeSyntheticEvent<{ frame: Frame }>) => {
@@ -32,6 +48,28 @@ const MRZTestScreen = () => {
 
       const frame = event.nativeEvent.frame;
 
+      if (frame.width && frame.height) {
+        setFrameSize({ width: frame.width, height: frame.height });
+      }
+
+      if (frame.textBlocks && frame.textBlocks.length > 0) {
+        const frameHeight = frame.height;
+        const bottomThreshold = frameHeight * 0.5;
+        const blocks: MrzOverlayBlock[] = frame.textBlocks.map((block) => {
+          const blockText = block.text || '';
+          return {
+            ...block,
+            isMrz:
+              blockText.includes('<') &&
+              blockText.length >= 12 &&
+              (block.blockFrame ? block.blockFrame.y > bottomThreshold : false),
+          };
+        });
+        setOverlayBlocks(blocks);
+      } else {
+        setOverlayBlocks([]);
+      }
+
       if (frame.resultText) {
         setRawHistory((prev) => {
           if (prev[0] === frame.resultText) {
@@ -86,18 +124,47 @@ const MRZTestScreen = () => {
         backgroundColor="transparent"
         translucent
       />
-      <TrustchexCamera
-        ref={cameraRef}
-        style={styles.camera}
-        cameraType="back"
-        enableFrameProcessing={true}
-        enableFaceDetection={false}
-        enableTextRecognition={true}
-        enableBarcodeScanning={false}
-        includeBase64={false}
-        targetFps={10}
-        onFrameAvailable={handleFrame}
-      />
+      <View style={styles.cameraWrapper} onLayout={handleCameraLayout}>
+        <TrustchexCamera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          cameraType="back"
+          enableFrameProcessing={true}
+          enableFaceDetection={false}
+          enableTextRecognition={true}
+          enableBarcodeScanning={false}
+          includeBase64={false}
+          targetFps={10}
+          onFrameAvailable={handleFrame}
+        />
+        {overlayBlocks.map((block, i) => {
+          const bf = block.blockFrame;
+          if (!bf) return null;
+          const scaleX = cameraLayout.width / frameSize.width;
+          const scaleY = cameraLayout.height / frameSize.height;
+          return (
+            <View
+              key={i}
+              style={[
+                styles.boundingBox,
+                block.isMrz ? styles.boundingBoxMrz : styles.boundingBoxText,
+                {
+                  left: bf.x * scaleX,
+                  top: bf.y * scaleY,
+                  width: bf.width * scaleX,
+                  height: bf.height * scaleY,
+                },
+              ]}
+            >
+              {block.isMrz && (
+                <View style={styles.blockLabel}>
+                  <Text style={styles.blockLabelText}>MRZ</Text>
+                </View>
+              )}
+            </View>
+          );
+        })}
+      </View>
 
       <SafeAreaView style={styles.mrzPanel} edges={['bottom']}>
         <ScrollView style={styles.scrollView}>
@@ -152,8 +219,35 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#000000',
   },
-  camera: {
+  cameraWrapper: {
     flex: 2,
+    position: 'relative',
+  },
+  boundingBox: {
+    position: 'absolute',
+    borderWidth: 1.5,
+  },
+  boundingBoxText: {
+    borderColor: 'rgba(255, 255, 255, 0.25)',
+  },
+  boundingBoxMrz: {
+    borderColor: '#FFA500',
+    borderWidth: 2,
+    backgroundColor: 'rgba(255, 165, 0, 0.07)',
+  },
+  blockLabel: {
+    position: 'absolute',
+    top: -14,
+    left: 0,
+    backgroundColor: '#FFA500',
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 2,
+  },
+  blockLabelText: {
+    color: '#000000',
+    fontSize: 8,
+    fontWeight: 'bold',
   },
   mrzPanel: {
     flex: 1,

package/src/Screens/Dynamic/ContractAcceptanceScreen.tsx

@@ -16,6 +16,7 @@ import { getI18n, useTranslation } from 'react-i18next';
 import StyledButton from '../../Shared/Components/StyledButton';
 import NativeDeviceInfo from '../../Shared/Libs/native-device-info.utils';
 import { speakWithDebounce } from '../../Shared/Libs/tts.utils';
+import { useStatusBarWhiteBackground } from '../../Shared/Libs/status-bar.utils';
 import {
   trackFunnelStep,
   useScreenTracking,
@@ -24,8 +25,10 @@ import {
   trackVerificationComplete,
   trackError,
 } from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
 const ContractAcceptanceScreen = () => {
+  useKeepAwake();
   const [isEnabled, setIsEnabled] = useState(false);
   const [isReady, setIsReady] = useState(false);
   const appContext = useContext(AppContext);
@@ -39,6 +42,9 @@ const ContractAcceptanceScreen = () => {
   // Track screen view and exit
   useScreenTracking('contract_acceptance');
 
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
   useEffect(() => {
     const contracts = appContext.currentWorkflowStep?.data?.contracts;
     if (!contracts) {
@@ -93,41 +99,58 @@ const ContractAcceptanceScreen = () => {
     return await NativeDeviceInfo.generateHumanReadableIdentifier();
   }, []);
 
+  // Early return if workflow step data is not available (after all hooks)
+  if (!appContext.currentWorkflowStep || !appContext.currentWorkflowStep.data) {
+    return null;
+  }
+
   return (
     <SafeAreaView style={styles.container}>
-      <WebView
-        source={{
-          uri: contractUrl || '',
-        }}
-        javaScriptEnabled={true}
-        domStorageEnabled={false}
-        scalesPageToFit={false}
-        scrollEnabled={true}
-        style={styles.webView}
-        onError={(syntheticEvent) => {
-          const { nativeEvent } = syntheticEvent;
-          trackError(
-            'CONTRACT_WEBVIEW_ERROR',
-            nativeEvent.description || 'Failed to load contract',
-            'contract_acceptance',
-            'medium',
-            { recoverable: true, userAction: 'load_contract' }
-          );
-        }}
-        onLoadEnd={(event) => {
-          if (event.nativeEvent.url === contractUrl) {
-            setIsReady(true);
-
-            // Track contract acceptance started
-            trackVerificationStart('CONTRACT_ACCEPTANCE');
-
-            if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
-              speakWithDebounce(t('termsOfUseAndDataPrivacyScreen.footerText'));
+      <View
+        style={[
+          styles.webViewContainer,
+          {
+            paddingHorizontal: Math.max(insets.left, insets.right),
+            paddingTop: insets.top,
+          },
+        ]}
+      >
+        <WebView
+          source={{
+            uri: contractUrl || '',
+          }}
+          javaScriptEnabled={true}
+          domStorageEnabled={false}
+          scalesPageToFit={false}
+          scrollEnabled={true}
+          style={styles.webView}
+          onError={(syntheticEvent) => {
+            const { nativeEvent } = syntheticEvent;
+            trackError(
+              'CONTRACT_WEBVIEW_ERROR',
+              nativeEvent.description || 'Failed to load contract',
+              'contract_acceptance',
+              'medium',
+              { recoverable: true, userAction: 'load_contract' }
+            );
+          }}
+          onLoadEnd={(event) => {
+            if (event.nativeEvent.url === contractUrl) {
+              setIsReady(true);
+
+              // Track contract acceptance started
+              trackVerificationStart('CONTRACT_ACCEPTANCE');
+
+              if (appContext.currentWorkflowStep?.data?.voiceGuidanceActive) {
+                speakWithDebounce(
+                  t('termsOfUseAndDataPrivacyScreen.footerText')
+                );
+              }
             }
-          }
-        }}
-        onScroll={hasReachedEnd}
-      />
+          }}
+          onScroll={hasReachedEnd}
+        />
+      </View>
       <View style={[styles.footer, { paddingBottom: insets.bottom }]}>
         <Text style={styles.footerText}>
           {t('termsOfUseAndDataPrivacyScreen.footerText')}
@@ -183,10 +206,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  webViewContainer: {
+    flex: 1,
+    width: '100%',
+  },
   webView: {
     flex: 1,
     width: '100%',
-    height: '100%',
     resizeMode: 'contain',
   },
   footer: {

package/src/Screens/Dynamic/IdentityDocumentEIDScanningScreen.tsx

@@ -17,8 +17,10 @@ import {
   trackVerificationStart,
   trackVerificationComplete,
 } from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
 const IdentityDocumentEIDScanningScreen = () => {
+  useKeepAwake();
   const appContext = useContext(AppContext);
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
   const insets = useSafeAreaInsets();
@@ -77,6 +79,10 @@ const IdentityDocumentEIDScanningScreen = () => {
     );
   }, [appContext.currentWorkflowStep]);
 
+  if (!appContext.currentWorkflowStep) {
+    return null;
+  }
+
   return (
     <SafeAreaView style={styles.safeAreaContainer}>
       {documentNumber && dateOfBirth && dateOfExpiry ? (

package/src/Screens/Dynamic/IdentityDocumentScanningScreen.tsx

@@ -17,8 +17,10 @@ import {
   trackVerificationStart,
   trackVerificationComplete,
 } from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
 const IdentityDocumentScanningScreen = () => {
+  useKeepAwake();
   const [idFrontSideData, setIDFrontSideData] =
     useState<DocumentScannedData | null>(null);
   const [idBackSideData, setIDBackSideData] =
@@ -145,6 +147,10 @@ const IdentityDocumentScanningScreen = () => {
     );
   }, [appContext.currentWorkflowStep]);
 
+  if (!appContext.currentWorkflowStep) {
+    return null;
+  }
+
   return (
     <SafeAreaView style={styles.container}>
       <IdentityDocumentCamera

package/src/Screens/Dynamic/LivenessDetectionScreen.tsx

@@ -8,7 +8,14 @@ import React, {
   useCallback,
   useRef,
 } from 'react';
-import { StyleSheet, Text, View, Dimensions, Vibration } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Dimensions,
+  Vibration,
+  StatusBar,
+} from 'react-native';
 import {
   useSafeAreaInsets,
   SafeAreaView,
@@ -25,12 +32,14 @@ import { useTranslation } from 'react-i18next';
 import StyledButton from '../../Shared/Components/StyledButton';
 import LottieView from 'lottie-react-native';
 import { speak, resetLastMessage } from '../../Shared/Libs/tts.utils';
+import { useStatusBarWhiteBackground } from '../../Shared/Libs/status-bar.utils';
 import {
   trackFunnelStep,
   useScreenTracking,
   trackVerificationStart,
   trackVerificationComplete,
 } from '../../Shared/Libs/analytics.utils';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
 
 const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
 
@@ -78,6 +87,7 @@ type PossibleActions = {
 }[keyof Actions];
 
 const LivenessDetectionScreen = () => {
+  useKeepAwake();
   const [camera, setCamera] = useState<TrustchexCameraHandle | null>(null);
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
@@ -90,6 +100,9 @@ const LivenessDetectionScreen = () => {
   // Track screen view and exit
   useScreenTracking('liveness_detection');
 
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
   const [initialState, setInitialState] = useState<StateType>({
     brightnessLow: false,
     faceDetected: false,
@@ -142,7 +155,21 @@ const LivenessDetectionScreen = () => {
   const [instructionList, setInstructionList] = useState<string[]>([]);
   const [hasGuideShown, setHasGuideShown] = useState(false);
   const stoppingRecordingRef = useRef(false); // Track if we're already stopping to prevent multiple calls
-  const lastVoiceGuidanceMessage = useRef<string>('');
+
+  // Configure status bar for white background
+  useStatusBarWhiteBackground();
+
+  // Update status bar when guide visibility changes
+  useEffect(() => {
+    if (hasGuideShown) {
+      // Camera view - use light icons
+      StatusBar.setBarStyle('light-content', true);
+    } else {
+      // Guide screen with white background - use dark icons
+      StatusBar.setBarStyle('dark-content', true);
+      StatusBar.setBackgroundColor('#ffffff', true);
+    }
+  }, [hasGuideShown]);
 
   useEffect(() => {
     const il = Object.keys(instructions)
@@ -175,7 +202,6 @@ const LivenessDetectionScreen = () => {
       processComplete: false,
       videoPath: '',
     });
-    lastVoiceGuidanceMessage.current = '';
     resetLastMessage();
   }, [
     instructions,
@@ -350,7 +376,6 @@ const LivenessDetectionScreen = () => {
         const nextInstruction = state.instructionList[nextInstructionIndex];
 
         // Reset TTS state when moving to any new instruction to ensure it speaks
-        lastVoiceGuidanceMessage.current = '';
         resetLastMessage();
 
         // Calculate progress based on actual action steps (excluding START and FINISH)
@@ -404,8 +429,7 @@ const LivenessDetectionScreen = () => {
     // Let the instruction advance first, then speak the next instruction
 
     // Only speak if message changed and is not empty
-    if (text && text !== lastVoiceGuidanceMessage.current) {
-      lastVoiceGuidanceMessage.current = text;
+    if (text) {
       // Bypass interval for liveness instructions to ensure all instructions are spoken
       speak(text, true);
     }
@@ -818,6 +842,10 @@ const LivenessDetectionScreen = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Empty array = only run on mount/unmount
 
+  if (!appContext.currentWorkflowStep || !appContext.currentWorkflowStep.data) {
+    return null;
+  }
+
   return (
     <>
       {hasGuideShown ? (