@trustchex/react-native-sdk 1.381.0 → 1.409.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustchex/react-native-sdk",
-  "version": "1.381.0",
+  "version": "1.409.0",
   "description": "Trustchex mobile app react native SDK for android or ios devices",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -56,6 +56,12 @@
     "example",
     "example-expo"
   ],
+  "resolutions": {
+    "@react-navigation/core": "7.12.4",
+    "@react-navigation/native": "7.1.18",
+    "@react-navigation/native-stack": "7.3.27",
+    "@react-navigation/elements": "2.6.5"
+  },
   "scripts": {
     "example": "yarn workspace @trustchex/react-native-sdk-example",
     "example:android": "yarn example android",
@@ -101,12 +107,16 @@
     "react-native-device-info": "^13.0.0",
     "react-native-fs": "^2.20.0",
     "react-native-get-random-values": "^1.11.0",
+    "react-native-incall-manager": "^4.2.0",
     "react-native-nfc-manager": "^3.16.2",
     "react-native-safe-area-context": "^5.5.2",
     "react-native-screens": "^4.18.0",
+    "react-native-sse": "^1.1.0",
     "react-native-svg": "^15.12.0",
     "react-native-tts": "^4.1.1",
     "react-native-video": "^6.16.1",
+    "react-native-vision-camera": "^4.7.1",
+    "react-native-webrtc": "^124.0.0",
     "react-native-webview": "^13.15.0",
     "release-it": "^17.10.0",
     "turbo": "^1.10.7",
@@ -132,13 +142,18 @@
     "react-native-device-info": ">=13.0.0",
     "react-native-fs": ">=2.20.0",
     "react-native-get-random-values": ">=1.11.0",
+    "react-native-incall-manager": ">=4.2.0",
     "react-native-nfc-manager": ">=3.16.2",
     "react-native-safe-area-context": ">=5.5.2",
     "react-native-screens": ">=4.18.0",
+    "react-native-sse": ">=1.1.0",
     "react-native-svg": ">=15.12.0",
     "react-native-tts": ">=4.1.1",
     "react-native-video": ">=6.16.1",
-    "react-native-webview": ">=13.15.0"
+    "react-native-vision-camera": ">=4.7.1",
+    "react-native-webrtc": ">=124.0.0",
+    "react-native-webview": ">=13.15.0",
+    "react-native-worklets-core": ">=1.6.2"
   },
   "peerDependenciesMeta": {
     "@react-navigation/native": {
@@ -168,6 +183,9 @@
     "react-native-get-random-values": {
       "optional": false
     },
+    "react-native-incall-manager": {
+      "optional": false
+    },
     "react-native-nfc-manager": {
       "optional": false
     },
@@ -177,6 +195,9 @@
     "react-native-screens": {
       "optional": false
     },
+    "react-native-sse": {
+      "optional": false
+    },
     "react-native-svg": {
       "optional": false
     },
@@ -186,6 +207,12 @@
     "react-native-video": {
       "optional": false
     },
+    "react-native-vision-camera": {
+      "optional": false
+    },
+    "react-native-webrtc": {
+      "optional": false
+    },
     "react-native-webview": {
       "optional": false
     }

package/src/Screens/Debug/BarcodeTestScreen.tsx

@@ -0,0 +1,317 @@
+import React, { useState, useRef, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  ScrollView,
+  StatusBar,
+  TouchableOpacity,
+  type NativeSyntheticEvent,
+  type LayoutChangeEvent,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  TrustchexCamera,
+  type TrustchexCameraHandle,
+  type Frame,
+  type NativeBarcode,
+} from '../../Shared/Components/TrustchexCamera';
+import { useKeepAwake } from '../../Shared/Libs/native-keep-awake.utils';
+
+// ML Kit barcode format constants
+const BARCODE_FORMAT_NAMES: Record<number, string> = {
+  1: 'Code 128',
+  2: 'Code 39',
+  4: 'Code 93',
+  8: 'Codabar',
+  16: 'Data Matrix',
+  32: 'EAN-13',
+  64: 'EAN-8',
+  128: 'ITF',
+  256: 'QR Code',
+  512: 'UPC-A',
+  1024: 'UPC-E',
+  2048: 'PDF417',
+  4096: 'Aztec',
+};
+
+function formatName(format: number): string {
+  return BARCODE_FORMAT_NAMES[format] ?? `Format(${format})`;
+}
+
+interface BarcodeEntry {
+  rawValue: string;
+  displayValue: string;
+  format: number;
+  timestamp: number;
+}
+
+const BarcodeTestScreen = () => {
+  useKeepAwake();
+  const cameraRef = useRef<TrustchexCameraHandle>(null);
+  const [barcodes, setBarcodes] = useState<NativeBarcode[]>([]);
+  const [history, setHistory] = useState<BarcodeEntry[]>([]);
+  const [isPaused, setIsPaused] = useState<boolean>(false);
+  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 }>) => {
+      if (isPaused) return;
+
+      const frame = event.nativeEvent.frame;
+
+      if (frame.width && frame.height) {
+        setFrameSize({ width: frame.width, height: frame.height });
+      }
+
+      if (frame.barcodes && frame.barcodes.length > 0) {
+        setBarcodes(frame.barcodes);
+
+        setHistory((prev) => {
+          const incoming = frame.barcodes!;
+          const next = [...prev];
+          for (const b of incoming) {
+            const alreadyRecent = next
+              .slice(0, 5)
+              .some((h) => h.rawValue === b.rawValue);
+            if (!alreadyRecent) {
+              next.unshift({
+                rawValue: b.rawValue,
+                displayValue: b.displayValue,
+                format: b.format,
+                timestamp: Date.now(),
+              });
+            }
+          }
+          return next.slice(0, 30);
+        });
+      } else {
+        setBarcodes([]);
+      }
+    },
+    [isPaused]
+  );
+
+  return (
+    <View style={styles.container}>
+      <StatusBar
+        barStyle="light-content"
+        backgroundColor="transparent"
+        translucent
+      />
+      <View style={styles.cameraWrapper} onLayout={handleCameraLayout}>
+        <TrustchexCamera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          cameraType="back"
+          enableFrameProcessing={true}
+          enableFaceDetection={false}
+          enableTextRecognition={false}
+          enableBarcodeScanning={true}
+          includeBase64={false}
+          targetFps={15}
+          onFrameAvailable={handleFrame}
+        />
+        {barcodes.map((b, i) => {
+          const bb = b.boundingBox;
+          if (!bb) return null;
+          const scaleX = cameraLayout.width / frameSize.width;
+          const scaleY = cameraLayout.height / frameSize.height;
+          const left = bb.left * scaleX;
+          const top = bb.top * scaleY;
+          const width = (bb.right - bb.left) * scaleX;
+          const height = (bb.bottom - bb.top) * scaleY;
+          return (
+            <View
+              key={i}
+              style={[styles.barcodeBoundingBox, { left, top, width, height }]}
+            >
+              <View style={styles.barcodeBoxLabel}>
+                <Text style={styles.barcodeBoxLabelText}>
+                  {formatName(b.format)}
+                </Text>
+              </View>
+            </View>
+          );
+        })}
+      </View>
+
+      <SafeAreaView style={styles.panel} edges={['bottom']}>
+        <ScrollView style={styles.scrollView}>
+          <View style={styles.panelContent}>
+            <TouchableOpacity
+              style={styles.pauseButton}
+              onPress={() => setIsPaused(!isPaused)}
+            >
+              <Text style={styles.pauseButtonText}>
+                {isPaused ? 'Resume Processing' : 'Pause Processing'}
+              </Text>
+            </TouchableOpacity>
+
+            <Text style={styles.title}>Barcode Scanner</Text>
+
+            <Text style={styles.sectionTitle}>Live Detections</Text>
+            {barcodes.length === 0 ? (
+              <Text style={styles.bodyText}>No barcode in frame</Text>
+            ) : (
+              barcodes.map((b, i) => (
+                <View key={i} style={styles.barcodeRow}>
+                  <View style={styles.formatBadge}>
+                    <Text style={styles.formatBadgeText}>
+                      {formatName(b.format)}
+                    </Text>
+                  </View>
+                  <Text style={styles.barcodeValue}>{b.rawValue}</Text>
+                </View>
+              ))
+            )}
+
+            <Text style={styles.sectionTitle}>History ({history.length})</Text>
+            {history.length === 0 ? (
+              <Text style={styles.bodyText}>No barcodes detected yet</Text>
+            ) : (
+              history.map((entry, i) => (
+                <View key={i} style={styles.historyRow}>
+                  <View style={styles.historyMeta}>
+                    <View style={styles.formatBadge}>
+                      <Text style={styles.formatBadgeText}>
+                        {formatName(entry.format)}
+                      </Text>
+                    </View>
+                    <Text style={styles.historyTime}>
+                      {new Date(entry.timestamp).toLocaleTimeString()}
+                    </Text>
+                  </View>
+                  <Text style={styles.barcodeValue}>{entry.rawValue}</Text>
+                </View>
+              ))
+            )}
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000000',
+  },
+  cameraWrapper: {
+    flex: 2,
+    position: 'relative',
+  },
+  barcodeBoundingBox: {
+    position: 'absolute',
+    borderWidth: 2,
+    borderColor: '#00C853',
+    backgroundColor: 'rgba(0, 200, 83, 0.07)',
+  },
+  barcodeBoxLabel: {
+    position: 'absolute',
+    top: -14,
+    left: 0,
+    backgroundColor: '#00C853',
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 2,
+  },
+  barcodeBoxLabelText: {
+    color: '#000000',
+    fontSize: 8,
+    fontWeight: 'bold',
+  },
+  panel: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.95)',
+    borderTopWidth: 2,
+    borderTopColor: '#00C853',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  panelContent: {
+    padding: 10,
+  },
+  pauseButton: {
+    alignSelf: 'center',
+    borderWidth: 1,
+    borderColor: '#00C853',
+    borderRadius: 4,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    marginBottom: 8,
+  },
+  pauseButtonText: {
+    color: '#00C853',
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+  title: {
+    color: '#00C853',
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  sectionTitle: {
+    color: '#00C853',
+    fontSize: 10,
+    fontWeight: 'bold',
+    marginTop: 6,
+    marginBottom: 4,
+  },
+  bodyText: {
+    color: '#888888',
+    fontSize: 9,
+    fontFamily: 'monospace',
+  },
+  barcodeRow: {
+    marginBottom: 6,
+  },
+  historyRow: {
+    marginBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#333333',
+    paddingBottom: 6,
+  },
+  historyMeta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 2,
+    gap: 6,
+  },
+  formatBadge: {
+    backgroundColor: '#00C853',
+    borderRadius: 3,
+    paddingHorizontal: 5,
+    paddingVertical: 2,
+    alignSelf: 'flex-start',
+    marginBottom: 2,
+  },
+  formatBadgeText: {
+    color: '#000000',
+    fontSize: 8,
+    fontWeight: 'bold',
+  },
+  barcodeValue: {
+    color: '#FFFFFF',
+    fontSize: 9,
+    fontFamily: 'monospace',
+    lineHeight: 14,
+  },
+  historyTime: {
+    color: '#888888',
+    fontSize: 8,
+    fontFamily: 'monospace',
+  },
+});
+
+export default BarcodeTestScreen;

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: {