@trustchex/react-native-sdk 1.250.0 → 1.266.0

package/src/Shared/Components/FaceCamera.tsx

@@ -8,6 +8,8 @@ import {
   Platform,
   Linking,
   Dimensions,
+  ActivityIndicator,
+  NativeModules,
 } from 'react-native';
 import {
   useCameraDevice,
@@ -26,10 +28,10 @@ import {
 } from '../VisionCameraPlugins/FaceDetector';
 import { Worklets, useSharedValue } from 'react-native-worklets-core';
 import { crop } from '../VisionCameraPlugins/Cropper';
-import { isFrameBright } from '../Libs/camera.utils';
+import { isCircularRegionBright } from '../Libs/camera.utils';
 import { useTranslation } from 'react-i18next';
-import { ActivityIndicator } from 'react-native-paper';
 import StyledButton from './StyledButton';
+import { useTheme } from '../Contexts/ThemeContext';
 
 export type FaceCameraProps = {
   onFacesDetected: (
@@ -38,6 +40,12 @@ export type FaceCameraProps = {
     isImageBright: boolean
   ) => void;
   onCameraInitialized: (camera: Camera) => void;
+  previewRect?: {
+    minX: number;
+    minY: number;
+    width: number;
+    height: number;
+  };
 };
 
 const VIDEO_WIDTH = 1280;
@@ -49,8 +57,10 @@ const windowHeight = Dimensions.get('window').height;
 const FaceCamera = ({
   onFacesDetected,
   onCameraInitialized,
+  previewRect,
 }: FaceCameraProps) => {
   useKeepAwake();
+  const theme = useTheme();
   const cameraPermission = useCameraPermission();
   const microphonePermission = useMicrophonePermission();
   const [permissionsRequested, setPermissionsRequested] = useState(false);
@@ -113,10 +123,74 @@ const FaceCamera = ({
     };
   }, [device, format, isFocused]);
 
+  // Set screen brightness to maximum when camera is active
+  useEffect(() => {
+    const { DeviceBrightness } = NativeModules;
+    if (!DeviceBrightness) return;
+
+    let originalBrightness = -1;
+
+    const setBrightness = async () => {
+      if (isActive) {
+        try {
+          originalBrightness = await DeviceBrightness.getBrightness();
+          await DeviceBrightness.setBrightness(1.0);
+        } catch (error) {
+          console.log('Failed to set brightness:', error);
+        }
+      }
+    };
+
+    setBrightness();
+
+    return () => {
+      if (originalBrightness >= 0) {
+        DeviceBrightness.setBrightness(originalBrightness).catch(() => { });
+      }
+    };
+  }, [isActive]);
+
   const handleWorklet = (frame: Frame) => {
     'worklet';
     try {
-      const isBright = isFrameBright(frame);
+      // Calculate brightness based on the circular preview area if provided
+      // Otherwise fall back to entire frame brightness
+      let isBright = false;
+      if (previewRect) {
+        // Convert preview rect from screen coordinates to frame coordinates
+        const scaleX = frame.width / windowWidth;
+        const scaleY = frame.height / windowHeight;
+        const frameCircleRect = {
+          minX: Math.floor(previewRect.minX * scaleX),
+          minY: Math.floor(previewRect.minY * scaleY),
+          width: Math.floor(previewRect.width * scaleX),
+          height: Math.floor(previewRect.height * scaleY),
+        };
+        isBright = isCircularRegionBright(frame, frameCircleRect, 60);
+      } else {
+        // Fallback: check entire frame brightness (use legacy method)
+        const buffer = frame.toArrayBuffer();
+        const data = new Uint8Array(buffer);
+        const width = frame.width;
+        const height = frame.height;
+        let luminanceSum = 0;
+        let pixelCount = 0;
+        const centerX = Math.floor(width / 2);
+        const centerY = Math.floor(height / 2);
+        const halfSizeX = Math.floor(width / 2);
+        const halfSizeY = Math.floor(height / 2);
+
+        for (let y = centerY - halfSizeY; y < centerY + halfSizeY; y++) {
+          for (let x = centerX - halfSizeX; x < centerX + halfSizeX; x++) {
+            const index = y * width + x;
+            if (data[index] !== undefined) {
+              luminanceSum += data[index];
+              pixelCount++;
+            }
+          }
+        }
+        isBright = (luminanceSum / pixelCount) > 60;
+      }
 
       const image = crop(frame, {
         cropRegion: {
@@ -164,12 +238,13 @@ const FaceCamera = ({
   if (!permissionsRequested) {
     return (
       <View style={styles.permissionContainer}>
-        <ActivityIndicator size="large" />
+        <ActivityIndicator size="large" color={theme.colors.primary} />
       </View>
     );
   }
 
   if (!cameraPermission.hasPermission) {
+    // Camera permission denied by user - their choice, not actionable
     return (
       <View style={styles.permissionContainer}>
         <Text style={styles.permissionText}>
@@ -188,6 +263,7 @@ const FaceCamera = ({
   }
 
   if (!microphonePermission.hasPermission) {
+    // Microphone permission denied by user - their choice, not actionable
     return (
       <View style={styles.permissionContainer}>
         <Text style={styles.permissionText}>
@@ -206,6 +282,7 @@ const FaceCamera = ({
   }
 
   if (device == null) {
+    // No camera device - device limitation, not actionable
     return (
       <View style={styles.permissionContainer}>
         <Text style={styles.permissionText}>

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -11,6 +11,7 @@ import {
   Text,
   Linking,
   Image,
+  ActivityIndicator,
 } from 'react-native';
 import {
   Camera,
@@ -46,11 +47,11 @@ import {
 import { getAverageBrightness } from '../Libs/camera.utils';
 import { useTranslation } from 'react-i18next';
 import LottieView from 'lottie-react-native';
-import { ActivityIndicator } from 'react-native-paper';
 import StyledButton from './StyledButton';
 import { type Barcode, scanCodes } from '../VisionCameraPlugins/BarcodeScanner';
 import { speakWithDebounce } from '../Libs/tts.utils';
 import AppContext from '../Contexts/AppContext';
+import { useTheme } from '../Contexts/ThemeContext';
 
 export type DocumentScannedData = {
   documentType: 'ID_FRONT' | 'ID_BACK' | 'PASSPORT' | 'UNKNOWN';
@@ -133,6 +134,7 @@ const IdentityDocumentCamera = ({
   showDebugImages = false,
 }: IdentityDocumentCameraProps) => {
   useKeepAwake();
+  const theme = useTheme();
   const appContext = React.useContext(AppContext);
   const cameraRef = React.useRef<Camera>(null);
   const cameraPermission = useCameraPermission();
@@ -504,10 +506,10 @@ const IdentityDocumentCamera = ({
           face.bounds.x >= width ||
           face.bounds.y >= height
         ) {
-          console.warn(
-            'Invalid face bounds detected, skipping face:',
-            face.bounds
-          );
+          // console.warn(
+          //   'Invalid face bounds detected, skipping face:',
+          //   face.bounds
+          // );
           continue;
         }
 
@@ -971,7 +973,7 @@ const IdentityDocumentCamera = ({
   if (!permissionsRequested) {
     return (
       <View style={styles.permissionContainer}>
-        <ActivityIndicator size="large" />
+        <ActivityIndicator size="large" color={theme.colors.primary} />
       </View>
     );
   }

package/src/Shared/Components/LanguageSelector.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import i18n from '../../Translation';
-import AppContext from '../Contexts/AppContext';
+import { useTheme } from '../Contexts/ThemeContext';
 
 const LanguageSelector = () => {
-  const appContext = React.useContext(AppContext);
+  const theme = useTheme();
+  const isEnglish = i18n.language.startsWith('en');
+  const isTurkish = i18n.language.startsWith('tr');
 
   return (
     <View style={styles.container}>
@@ -12,21 +14,22 @@ const LanguageSelector = () => {
         <Text
           style={[
             styles.buttonText,
-            i18n.language.startsWith('en') ? styles.buttonTextSelected : null,
-            {
-              color: appContext.branding.primaryColor,
-            },
+            isEnglish && styles.buttonTextSelected,
+            isEnglish && { color: theme.colors.primary },
           ]}
         >
           EN
         </Text>
       </Pressable>
-      <View style={styles.verticalSeperator} />
+      <View
+        style={[styles.verticalSeperator, { borderColor: theme.colors.border }]}
+      />
       <Pressable onPress={() => i18n.changeLanguage('tr')}>
         <Text
           style={[
             styles.buttonText,
-            i18n.language.startsWith('tr') ? styles.buttonTextSelected : null,
+            isTurkish && styles.buttonTextSelected,
+            isTurkish && { color: theme.colors.primary },
           ]}
         >
           TR
@@ -46,16 +49,14 @@ const styles = StyleSheet.create({
   },
   buttonText: {
     fontSize: 18,
-    color: 'black',
+    color: '#999999',
   },
   buttonTextSelected: {
-    color: '#000000',
     fontWeight: 'bold',
   },
   verticalSeperator: {
     borderLeftWidth: 1,
     height: 24,
-    borderColor: 'black',
   },
 });
 

package/src/Shared/Components/NavigationManager.tsx

@@ -14,7 +14,8 @@ import {
 import { View, StyleSheet, Alert } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import i18n from '../../Translation';
-import { Button } from 'react-native-paper';
+import StyledButton from './StyledButton';
+import { analyticsService } from '../Services/AnalyticsService';
 
 // Simple global navigation lock
 let isNavigating = false;
@@ -187,6 +188,7 @@ const NavigationManager = forwardRef(
         appContext.currentWorkflowStep = undefined;
         appContext.workflowSteps = undefined;
         appContext.isDemoSession = false;
+        analyticsService.setDemoSession(false);
         appContext.identificationInfo = {
           sessionId: '',
           identificationId: '',
@@ -235,9 +237,9 @@ const NavigationManager = forwardRef(
       appContext.currentWorkflowStep &&
       (!appContext.currentWorkflowStep?.required || canSkipStep) && (
         <View style={styles.container}>
-          <Button mode="text" onPress={goToNextRouteWithAlert}>
+          <StyledButton mode="text" onPress={goToNextRouteWithAlert}>
             {t('navigationManager.skipStepLabel')}
-          </Button>
+          </StyledButton>
         </View>
       )
     );

package/src/Shared/Components/QrCodeScannerCamera.tsx

@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next';
 import LottieView from 'lottie-react-native';
 import { type Barcode, scanCodes } from '../VisionCameraPlugins/BarcodeScanner';
 import StyledButton from './StyledButton';
+import { useTheme } from '../Contexts/ThemeContext';
 
 export interface QrCodeScannerCameraProps {
   onQrCodeScanned: (data: string) => void;
@@ -30,6 +31,7 @@ export interface QrCodeScannerCameraProps {
 
 const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
   useKeepAwake();
+  const theme = useTheme();
   const cameraPermission = useCameraPermission();
   const [permissionsRequested, setPermissionsRequested] = React.useState(false);
   const [isActive, setIsActive] = React.useState(false);
@@ -164,12 +166,13 @@ const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
   if (!permissionsRequested) {
     return (
       <View style={styles.permissionContainer}>
-        <ActivityIndicator size="large" />
+        <ActivityIndicator size="large" color={theme.colors.primary} />
       </View>
     );
   }
 
   if (!cameraPermission.hasPermission) {
+    // Camera permission denied by user - their choice, not actionable
     return (
       <View style={styles.permissionContainer}>
         <Text style={styles.permissionText}>
@@ -188,6 +191,7 @@ const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
   }
 
   if (device == null) {
+    // No camera device - device limitation, not actionable
     return (
       <View style={styles.permissionContainer}>
         <TextView style={styles.permissionText}>

package/src/Shared/Components/StyledButton.tsx

@@ -1,21 +1,127 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
-import { Button } from 'react-native-paper';
-import type { ButtonProps } from 'react-native-paper';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { useTheme } from '../Contexts/ThemeContext';
 
-type StyledButtonProps = ButtonProps;
+// Calculate if a color is light or dark to determine text color
+const isLightColor = (color: string): boolean => {
+  // Remove # if present
+  const hex = color.replace('#', '');
+
+  // Convert to RGB
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  // Calculate relative luminance using WCAG formula
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // Return true if light (luminance > 0.5)
+  return luminance > 0.5;
+};
+
+interface StyledButtonProps {
+  mode?: 'text' | 'outlined' | 'contained';
+  onPress?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  children: React.ReactNode;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
+  buttonColor?: string;
+  textColor?: string;
+}
 
 const StyledButton: React.FC<StyledButtonProps> = ({
+  mode = 'contained',
+  onPress,
+  disabled = false,
+  loading = false,
+  children,
   style,
   labelStyle,
-  ...props
+  buttonColor,
+  textColor,
 }) => {
+  const theme = useTheme();
+  const primaryColor = buttonColor || theme.colors.primary;
+
+  // Determine text color based on background color for contained mode
+  const getContainedTextColor = () => {
+    if (textColor) return textColor;
+    return isLightColor(primaryColor) ? '#000000' : '#FFFFFF';
+  };
+
+  const containedTextColor = getContainedTextColor();
+
+  const getButtonStyle = () => {
+    const baseStyle = [styles.button, style];
+    if (mode === 'contained') {
+      return [
+        ...baseStyle,
+        styles.containedButton,
+        { backgroundColor: primaryColor },
+        disabled && styles.disabledButton,
+      ];
+    }
+    if (mode === 'outlined') {
+      return [
+        ...baseStyle,
+        styles.outlinedButton,
+        { borderColor: primaryColor },
+        disabled && styles.disabledButton,
+      ];
+    }
+    return [...baseStyle, styles.textButton];
+  };
+
+  const getTextStyle = () => {
+    const baseStyle = [styles.label, labelStyle];
+    if (mode === 'contained') {
+      return [
+        ...baseStyle,
+        styles.containedLabel,
+        { color: containedTextColor },
+        disabled && styles.disabledLabel,
+      ];
+    }
+    if (mode === 'outlined') {
+      return [
+        ...baseStyle,
+        styles.outlinedLabel,
+        { color: primaryColor },
+        disabled && styles.disabledLabel,
+      ];
+    }
+    return [
+      ...baseStyle,
+      styles.textLabel,
+      { color: primaryColor },
+      disabled && styles.disabledLabel,
+    ];
+  };
+
+  const loadingColor = mode === 'contained' ? containedTextColor : primaryColor;
+
   return (
-    <Button
-      {...props}
-      style={[styles.button, style]}
-      labelStyle={[styles.label, labelStyle]}
-    />
+    <TouchableOpacity
+      style={getButtonStyle()}
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.7}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={loadingColor} />
+      ) : (
+        <Text style={getTextStyle()}>{children}</Text>
+      )}
+    </TouchableOpacity>
   );
 };
 
@@ -24,11 +130,36 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     height: 56,
     justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  containedButton: {
     elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  outlinedButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+  },
+  textButton: {
+    backgroundColor: 'transparent',
+  },
+  disabledButton: {
+    opacity: 0.5,
   },
   label: {
     fontWeight: 'bold',
     fontSize: 16,
+    textAlign: 'center',
+  },
+  containedLabel: {},
+  outlinedLabel: {},
+  textLabel: {},
+  disabledLabel: {
+    opacity: 0.6,
   },
 });
 

package/src/Shared/Components/StyledTextInput.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  View,
+  Text,
+  type TextInputProps,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+
+interface StyledTextInputProps extends TextInputProps {
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  placeholderStyle?: TextStyle;
+  borderColor?: string;
+  focusedBorderColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  placeholderColor?: string;
+}
+
+const StyledTextInput = React.forwardRef<TextInput, StyledTextInputProps>(
+  (
+    {
+      containerStyle,
+      inputStyle,
+      placeholderStyle,
+      borderColor = '#DDDDDD',
+      focusedBorderColor,
+      backgroundColor = '#FFFFFF',
+      textColor = '#000000',
+      placeholderColor = '#999999',
+      style,
+      placeholderTextColor,
+      onFocus,
+      onBlur,
+      value,
+      ...props
+    },
+    ref
+  ) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const hasValue = value !== undefined && value !== '';
+
+    const handleFocus = (e: any) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: any) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+
+    const currentBorderColor = isFocused
+      ? focusedBorderColor || borderColor
+      : borderColor;
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        <TextInput
+          ref={ref}
+          {...props}
+          value={value}
+          placeholder=""
+          style={[
+            styles.input,
+            {
+              backgroundColor,
+              borderColor: currentBorderColor,
+              color: textColor,
+            },
+            inputStyle,
+            style,
+          ]}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        {!hasValue && props.placeholder && (
+          <View style={styles.placeholderContainer} pointerEvents="none">
+            <Text
+              style={[
+                styles.placeholderText,
+                { color: placeholderColor || placeholderTextColor || '#999' },
+                placeholderStyle,
+              ]}
+            >
+              {props.placeholder}
+            </Text>
+          </View>
+        )}
+      </View>
+    );
+  }
+);
+
+StyledTextInput.displayName = 'StyledTextInput';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'relative',
+  },
+  input: {
+    borderWidth: 2,
+    borderRadius: 8,
+    height: 56,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    fontWeight: '400',
+  },
+  placeholderContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  placeholderText: {
+    fontSize: 16,
+    fontWeight: '400',
+  },
+});
+
+export default StyledTextInput;

package/src/Shared/Contexts/AppContext.ts

@@ -19,6 +19,8 @@ export type AppContextType = {
   currentWorkflowStep?: WorkflowStep;
   onCompleted?: () => void;
   onError?: (error: string) => void;
+  setSessionId?: (id: string) => void;
+  setBaseUrl?: (url: string) => void;
 };
 
 export default createContext<AppContextType>({
@@ -44,4 +46,6 @@ export default createContext<AppContextType>({
   currentWorkflowStep: undefined,
   onCompleted: undefined,
   onError: undefined,
+  setSessionId: undefined,
+  setBaseUrl: undefined,
 });