@trustchex/react-native-sdk 1.161.0

package/src/Shared/Components/LanguageSelector.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import i18n from '../../Translation';
+import AppContext from '../Contexts/AppContext';
+
+const LanguageSelector = () => {
+  const appContext = React.useContext(AppContext);
+
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={() => i18n.changeLanguage('en')}>
+        <Text
+          style={[
+            styles.buttonText,
+            i18n.language.startsWith('en') ? styles.buttonTextSelected : null,
+            {
+              color: appContext.branding.primaryColor,
+            },
+          ]}
+        >
+          EN
+        </Text>
+      </Pressable>
+      <View style={styles.verticalSeperator} />
+      <Pressable onPress={() => i18n.changeLanguage('tr')}>
+        <Text
+          style={[
+            styles.buttonText,
+            i18n.language.startsWith('tr') ? styles.buttonTextSelected : null,
+          ]}
+        >
+          TR
+        </Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 18,
+    color: 'black',
+  },
+  buttonTextSelected: {
+    color: '#000000',
+    fontWeight: 'bold',
+  },
+  verticalSeperator: {
+    borderLeftWidth: 1,
+    height: 24,
+    borderColor: 'black',
+  },
+});
+
+export default LanguageSelector;

package/src/Shared/Components/NativeCircularProgress.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+interface NativeCircularProgressProps {
+  size: number;
+  width?: number;
+  backgroundWidth?: number;
+  fill: number; // 0 to 100
+  tintColor?: string;
+  backgroundColor?: string;
+  style?: any;
+}
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const NativeCircularProgress: React.FC<NativeCircularProgressProps> = ({
+  size,
+  width = 10,
+  backgroundWidth = 5,
+  fill,
+  tintColor = '#007AFF',
+  backgroundColor = '#E5E5EA',
+  style,
+}) => {
+  const animatedFill = useRef(new Animated.Value(0)).current;
+
+  const radius = (size - width) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const center = size / 2;
+
+  useEffect(() => {
+    Animated.timing(animatedFill, {
+      toValue: fill,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [fill, animatedFill]);
+
+  const strokeDashoffset = animatedFill.interpolate({
+    inputRange: [0, 100],
+    outputRange: [circumference, 0],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View style={[style, { width: size, height: size }]}>
+      <Svg width={size} height={size} style={StyleSheet.absoluteFillObject}>
+        {/* Background circle */}
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={backgroundColor}
+          strokeWidth={backgroundWidth}
+          fill="transparent"
+        />
+        {/* Progress circle */}
+        <AnimatedCircle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={tintColor}
+          strokeWidth={width}
+          fill="transparent"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${center} ${center})`}
+        />
+      </Svg>
+    </Animated.View>
+  );
+};
+
+export default NativeCircularProgress;

package/src/Shared/Components/NativeProgressBar.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+
+interface NativeProgressBarProps {
+  progress: number; // 0 to 1
+  width?: number | null;
+  height?: number;
+  borderRadius?: number;
+  color?: string;
+  backgroundColor?: string;
+}
+
+const NativeProgressBar: React.FC<NativeProgressBarProps> = ({
+  progress,
+  width = null,
+  height = 30,
+  borderRadius = 8,
+  color = '#007AFF',
+  backgroundColor = '#E5E5EA',
+}) => {
+  const animatedProgress = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    Animated.timing(animatedProgress, {
+      toValue: progress,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [progress, animatedProgress]);
+
+  const progressWidth = animatedProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height,
+          borderRadius,
+          backgroundColor,
+          width: width || '100%',
+        },
+      ]}
+    >
+      <Animated.View
+        style={[
+          styles.progressBar,
+          {
+            width: progressWidth,
+            borderRadius,
+            backgroundColor: color,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  progressBar: {
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default NativeProgressBar;

package/src/Shared/Components/NavigationManager.tsx

@@ -0,0 +1,275 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+} from 'react';
+import AppContext from '../Contexts/AppContext';
+import type { WorkflowStep } from '../Types/identificationInfo';
+import {
+  CommonActions,
+  type EventArg,
+  type NavigationAction,
+  useNavigation,
+} from '@react-navigation/native';
+import { View, StyleSheet, Alert } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import i18n from '../../Translation';
+import { Button } from 'react-native-paper';
+
+// Simple global navigation lock
+let isNavigating = false;
+let lastNavigationTime = 0;
+
+export type NavigationManagerRef = {
+  navigateToNextStep: () => void;
+  reset: () => void;
+};
+
+export type NavigationManagerProps = {
+  canSkipStep?: boolean;
+};
+
+const NavigationManager = forwardRef(
+  ({ canSkipStep }: NavigationManagerProps, ref) => {
+    const appContext = useContext(AppContext);
+    const navigation = useNavigation();
+    const { t } = useTranslation();
+
+    const routes = {
+      VERIFICATION_SESSION_CHECK: 'VerificationSessionCheckScreen',
+      DYNAMIC_ROUTES: {
+        CONTRACT_ACCEPTANCE: 'ContractAcceptanceScreen',
+        IDENTITY_DOCUMENT_SCAN: 'IdentityDocumentScanningScreen',
+        IDENTITY_DOCUMENT_EID_SCAN: 'IdentityDocumentEIDScanningScreen',
+        LIVENESS_CHECK: 'LivenessDetectionScreen',
+      },
+      RESULT: 'ResultScreen',
+    };
+
+    React.useEffect(() => {
+      const handleRemove = (
+        event: EventArg<
+          'beforeRemove',
+          true,
+          {
+            action: NavigationAction;
+          }
+        >
+      ) => {
+        if (event.data.action.type !== 'RESET') {
+          event.preventDefault();
+        }
+      };
+
+      const handleFocus = () => {
+        // Reset navigation state when screen comes into focus
+        isNavigating = false;
+      };
+
+      navigation.addListener('beforeRemove', handleRemove);
+      navigation.addListener('focus', handleFocus);
+
+      return () => {
+        navigation.removeListener('beforeRemove', handleRemove);
+        navigation.removeListener('focus', handleFocus);
+        // Reset state on cleanup
+        isNavigating = false;
+      };
+    }, [navigation]);
+
+    const getNextRoute = useCallback(
+      (
+        workflowSteps?: WorkflowStep[],
+        currentWorkFlowStep?: WorkflowStep
+      ): string => {
+        const currentStepIndex =
+          workflowSteps?.findIndex((step) =>
+            step.id
+              ? step.id === currentWorkFlowStep?.id
+              : step.type === currentWorkFlowStep?.type
+          ) ?? -1;
+
+        const nextStep =
+          workflowSteps && currentStepIndex < workflowSteps.length
+            ? workflowSteps[currentStepIndex + 1]
+            : null;
+
+        if (!nextStep) {
+          appContext.currentWorkflowStep = undefined;
+          return routes.RESULT;
+        }
+
+        appContext.currentWorkflowStep = nextStep;
+
+        if (nextStep.type === 'CONTRACT_ACCEPTANCE') {
+          return routes.DYNAMIC_ROUTES.CONTRACT_ACCEPTANCE;
+        }
+
+        if (nextStep.type === 'IDENTITY_DOCUMENT_SCAN') {
+          return routes.DYNAMIC_ROUTES.IDENTITY_DOCUMENT_SCAN;
+        }
+
+        if (nextStep.type === 'IDENTITY_DOCUMENT_EID_SCAN') {
+          return routes.DYNAMIC_ROUTES.IDENTITY_DOCUMENT_EID_SCAN;
+        }
+
+        if (nextStep.type === 'LIVENESS_CHECK') {
+          return routes.DYNAMIC_ROUTES.LIVENESS_CHECK;
+        }
+
+        return routes.VERIFICATION_SESSION_CHECK;
+      },
+      [
+        appContext,
+        routes.VERIFICATION_SESSION_CHECK,
+        routes.DYNAMIC_ROUTES.CONTRACT_ACCEPTANCE,
+        routes.DYNAMIC_ROUTES.IDENTITY_DOCUMENT_EID_SCAN,
+        routes.DYNAMIC_ROUTES.IDENTITY_DOCUMENT_SCAN,
+        routes.DYNAMIC_ROUTES.LIVENESS_CHECK,
+        routes.RESULT,
+      ]
+    );
+
+    const goToNextRoute = useCallback(() => {
+      const currentTime = Date.now();
+      const minTimeBetweenNavigation = 1000; // 1 second minimum between navigations
+
+      // Simple protection: prevent rapid consecutive calls
+      if (
+        isNavigating ||
+        currentTime - lastNavigationTime < minTimeBetweenNavigation
+      ) {
+        return;
+      }
+
+      // Set protection flags
+      isNavigating = true;
+      lastNavigationTime = currentTime;
+
+      try {
+        const nextRoute = getNextRoute(
+          appContext.workflowSteps,
+          appContext.currentWorkflowStep
+        );
+
+        navigation.dispatch(
+          CommonActions.navigate({
+            name: nextRoute,
+            params: {
+              navId: Math.random(),
+            },
+          })
+        );
+      } catch (error) {
+        // Reset flags on error
+        isNavigating = false;
+        throw error;
+      }
+
+      // Reset flags after navigation
+      setTimeout(() => {
+        isNavigating = false;
+      }, 1000);
+    }, [
+      getNextRoute,
+      appContext.workflowSteps,
+      appContext.currentWorkflowStep,
+      navigation,
+    ]);
+
+    const goToNextRouteWithAlert = useCallback(() => {
+      // Prevent multiple alerts if already navigating
+      if (isNavigating) {
+        return;
+      }
+
+      Alert.alert(
+        t('general.warning'),
+        t('navigationManager.skipStepWarning'),
+        [
+          {
+            text: t('general.no'),
+            style: 'cancel',
+          },
+          {
+            text: t('general.yes'),
+            onPress: goToNextRoute,
+          },
+        ]
+      );
+    }, [goToNextRoute, t]);
+
+    const reset = useCallback(() => {
+      // Prevent rapid successive reset calls
+      if (isNavigating) {
+        return;
+      }
+
+      isNavigating = true;
+
+      try {
+        appContext.currentWorkflowStep = undefined;
+        appContext.workflowSteps = undefined;
+        appContext.identificationInfo = {
+          sessionId: '',
+          identificationId: '',
+          consent: {
+            contractIds: [],
+            deviceInfo: '',
+          },
+          locale: appContext.locale || i18n.language,
+        };
+        appContext.branding = {
+          logoUrl: appContext.branding?.logoUrl || '',
+          primaryColor: appContext.branding?.primaryColor || '#000000',
+          secondaryColor: appContext.branding?.secondaryColor || '#CCCCCC',
+          tertiaryColor: appContext.branding?.tertiaryColor || '#FF0000',
+        };
+
+        navigation.dispatch(
+          CommonActions.reset({
+            index: 0,
+            routes: [{ name: routes.VERIFICATION_SESSION_CHECK }],
+          })
+        );
+      } catch (error) {
+        isNavigating = false;
+        throw error;
+      }
+
+      // Reset flag after operation
+      setTimeout(() => {
+        isNavigating = false;
+      }, 1000);
+    }, [appContext, navigation, routes.VERIFICATION_SESSION_CHECK]);
+
+    useImperativeHandle(ref, () => ({
+      navigateToNextStep: goToNextRoute,
+      reset: reset,
+      allowSkipStep: appContext.currentWorkflowStep?.required,
+    }));
+
+    return (
+      appContext.currentWorkflowStep &&
+      (!appContext.currentWorkflowStep?.required || canSkipStep) && (
+        <View style={styles.container}>
+          <Button mode="text" onPress={goToNextRouteWithAlert}>
+            {t('navigationManager.skipStepLabel')}
+          </Button>
+        </View>
+      )
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    backgroundColor: 'white',
+  },
+});
+
+export default NavigationManager;

package/src/Shared/Components/OTPCodeInput.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { TextInput } from 'react-native-paper';
+
+export interface OTPCodeInputProps {
+  codeLength: number;
+  value: string;
+  onChangeText?: (value: string) => void;
+  onCodeFilled?: (value: string) => void;
+  disabled?: boolean;
+}
+
+const OTPCodeInput = ({
+  codeLength,
+  value,
+  onChangeText,
+  onCodeFilled,
+  disabled,
+}: OTPCodeInputProps) => {
+  const [code, setCode] = React.useState<string[]>(value.split(''));
+  const refArray = React.useRef<(any | null)[]>([]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputWrapper}>
+        {[...Array(codeLength)].map((_, index) => (
+          <TextInput
+            key={index}
+            mode="outlined"
+            style={[styles.input]}
+            ref={(el: any) => (refArray.current[index] = el)}
+            value={code[index]}
+            autoFocus={index === 0}
+            inputMode="numeric"
+            disabled={disabled}
+            onChangeText={(text) => {
+              code[index] = text;
+              setCode(code);
+
+              if (onChangeText) {
+                onChangeText(code.join(''));
+              }
+
+              if (
+                code.length === codeLength &&
+                code.every((c) => !!c) &&
+                onCodeFilled
+              ) {
+                onCodeFilled(code.join(''));
+              }
+            }}
+            onKeyPress={({ nativeEvent }) => {
+              if (nativeEvent.key === 'Backspace' && index > 0) {
+                refArray.current[index - 1]?.focus();
+              } else if (
+                nativeEvent.key !== 'Backspace' &&
+                index < codeLength - 1
+              ) {
+                refArray.current[index + 1]?.focus();
+              }
+            }}
+            keyboardType="number-pad"
+            maxLength={1}
+            textContentType="oneTimeCode"
+          />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inputWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  input: {
+    width: 48,
+    height: 48,
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+});
+
+export default OTPCodeInput;