@test-web/react-native-sdk 2.2.0 → 2.4.0

package/src/components/common/Header.tsx

@@ -1,29 +1,30 @@
-import React, { memo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { Image, StyleProp, View, ViewStyle } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
+import { useOrientation } from '../../hooks/useOrientation';
+import { useIDM } from '../../context/IDMConfigurationContext';
+import getStyles from '../../styles/HeaderStyles';
 
-function Header() {
+interface HeaderProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function Header({ style }: HeaderProps) {
   const { theme } = useTheme();
+  const orientation = useOrientation();
+  const { idmConf } = useIDM();
+  const styles = getStyles(theme, orientation);
+
+  // Get logo from configuration - never show default logo
+  const logo = idmConf?.configuration?.logo;
+
+  // Only render if logo is available from configuration
+  if (!logo || !logo.startsWith('data:image')) {
+    return null;
+  }
 
   return (
-    <View style={[styles.container, { backgroundColor: theme.colors.primary }]}>
-      <Text style={[styles.text, { color: theme.colors.buttonText }]}>
-        IDM Scan SDK
-      </Text>
+    <View style={[styles.container, style]}>
+      <Image source={{ uri: logo }} style={styles.logo} resizeMode="contain" />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    height: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});
-
-export default memo(Header);

package/src/components/common/Loader.tsx

@@ -1,37 +1,18 @@
-import React, { memo } from 'react';
-import { View, ActivityIndicator, StyleSheet, Text } from 'react-native';
+import { View, ActivityIndicator } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
+import { useOrientation } from '../../hooks/useOrientation';
+import getStyles from '../../styles/LoaderStyles';
 
-interface LoaderProps {
-  message?: string;
-}
-
-function Loader({ message }: LoaderProps) {
+const Loader = () => {
   const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
 
   return (
-    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+    <View style={styles.loadingContainer}>
       <ActivityIndicator size="large" color={theme.colors.primary} />
-      {message && (
-        <Text style={[styles.message, { color: theme.colors.text }]}>
-          {message}
-        </Text>
-      )}
     </View>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  message: {
-    marginTop: 16,
-    fontSize: 16,
-    textAlign: 'center',
-  },
-});
+};
 
-export default memo(Loader);
+export default Loader;

package/src/components/ui/Button.tsx

@@ -1,41 +1,33 @@
-import React, { memo } from 'react';
-import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { Pressable, StyleProp, Text, TextStyle, ViewStyle } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
 
 interface ButtonProps {
   title: string;
-  onPress: () => void;
-  style?: ViewStyle;
-  textStyle?: TextStyle;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  onPress?: () => void;
   disabled?: boolean;
 }
 
-function Button({ title, onPress, style, textStyle, disabled }: ButtonProps) {
-  return (
-    <TouchableOpacity 
-      style={[styles.button, style]} 
-      onPress={onPress}
-      disabled={disabled}
-      activeOpacity={0.7}
-    >
-      <Text style={[styles.text, textStyle]}>{title}</Text>
-    </TouchableOpacity>
-  );
-}
+export default function Button({ title, style, textStyle, onPress, disabled = false }: ButtonProps) {
+  const { theme } = useTheme();
 
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: '#007AFF',
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 8,
+  const defaultStyle: ViewStyle = {
+    backgroundColor: theme.colors.buttonBackground,
+    padding: theme.button.padding,
+    borderRadius: theme.button.borderRadius,
     alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    color: '#fff',
+  };
+
+  const defaultTextStyle: TextStyle = {
+    color: theme.colors.buttonText,
     fontSize: 16,
-    fontWeight: '600',
-  },
-});
+    fontWeight: 'bold',
+  };
 
-export default memo(Button);
+  return (
+    <Pressable style={[defaultStyle, style]} onPress={onPress} disabled={disabled}>
+      <Text style={[defaultTextStyle, textStyle]}>{title}</Text>
+    </Pressable>
+  );
+}

package/src/components/ui/ThemedText.tsx

@@ -1,42 +1,31 @@
-import React, { memo, useMemo } from 'react';
-import { Text, TextStyle, StyleSheet } from 'react-native';
+import { Text, StyleProp, TextStyle } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
 
 interface ThemedTextProps {
+  type?: 'title' | 'subtitle' | 'default';
+  style?: StyleProp<TextStyle>;
   children: React.ReactNode;
-  style?: TextStyle;
-  type?: 'default' | 'title' | 'subtitle';
 }
 
-function ThemedText({ children, style, type = 'default' }: ThemedTextProps) {
+export default function ThemedText({ type = 'default', style, children }: ThemedTextProps) {
   const { theme } = useTheme();
 
-  const textStyle = useMemo(
-    () => [
-      styles.default,
-      type === 'title' && styles.title,
-      type === 'subtitle' && styles.subtitle,
-      { color: theme.colors.text },
-      style,
-    ],
-    [theme.colors.text, type, style]
-  );
+  const defaultStyles: { [key: string]: TextStyle } = {
+    title: {
+      fontSize: 24,
+      fontWeight: '300',
+      color: theme.colors.text,
+    },
+    subtitle: {
+      fontSize: 18,
+      fontWeight: '400',
+      color: theme.colors.subtitle,
+    },
+    default: {
+      fontSize: 16,
+      color: theme.colors.text,
+    },
+  };
 
-  return <Text style={textStyle}>{children}</Text>;
+  return <Text style={[defaultStyles[type], style]}>{children}</Text>;
 }
-
-const styles = StyleSheet.create({
-  default: {
-    fontSize: 16,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: 'bold',
-  },
-  subtitle: {
-    fontSize: 18,
-    fontWeight: '500',
-  },
-});
-
-export default memo(ThemedText);

package/src/context/FailedCountContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+// Define the context shape
+interface FailedCountContextType {
+  failedCount: number;
+  setFailedCount: React.Dispatch<React.SetStateAction<number>>;
+}
+
+// Create the context
+const FailedCountContext = createContext<FailedCountContextType | undefined>(undefined);
+
+// Custom hook to consume the context
+export const useFailedCount = () => {
+  const context = useContext(FailedCountContext);
+  if (!context) {
+    throw new Error('useFailedCount must be used within a FailedCountProvider');
+  }
+  return context;
+};
+
+// Provider props interface
+interface FailedCountProviderProps {
+  children: ReactNode;
+}
+
+// Provider component
+export const FailedCountProvider: React.FC<FailedCountProviderProps> = ({ children }) => {
+  const [failedCount, setFailedCount] = useState<number>(0);
+
+  return (
+    <FailedCountContext.Provider value={{ failedCount, setFailedCount }}>
+      {children}
+    </FailedCountContext.Provider>
+  );
+};

package/src/context/IDMConfigurationContext.tsx

@@ -17,9 +17,19 @@ interface IDMProviderProps {
 export function IDMProvider({ children, initialConf }: IDMProviderProps) {
   const [idmConf, setIDMConf] = useState<IDMConf>(initialConf);
 
-  // Optimized partial update function
+  // Optimized partial update function that preserves configuration
   const updateIDMConf = useCallback((updates: Partial<IDMConf>) => {
-    setIDMConf((prev) => ({ ...prev, ...updates }));
+    setIDMConf((prev) => {
+      // Ensure configuration is preserved during updates
+      const newConf = { ...prev, ...updates };
+      
+      // If configuration exists in prev but not in updates, preserve it
+      if (prev.configuration && !updates.configuration) {
+        newConf.configuration = prev.configuration;
+      }
+      
+      return newConf;
+    });
   }, []);
 
   // Memoize context value to prevent unnecessary re-renders

package/src/context/themes.ts

@@ -10,6 +10,8 @@ export const lightTheme: Theme = {
     buttonText: '#ffffff',
     buttonBackground: '#007bff',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 8, padding: 12 },
 };
 
 // 🌑 Dark (default)
@@ -22,6 +24,8 @@ export const darkTheme: Theme = {
     buttonText: '#111827',
     buttonBackground: '#3b82f6',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 8, padding: 12 },
 };
 
 // 🌅 Sunset (warm oranges)
@@ -34,6 +38,8 @@ export const sunsetTheme: Theme = {
     buttonText: '#ffffff',
     buttonBackground: '#f97316',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 12, padding: 14 },
 };
 
 // 🌊 Ocean (blues & teal)
@@ -46,6 +52,8 @@ export const oceanTheme: Theme = {
     buttonText: '#ffffff',
     buttonBackground: '#0284c7',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 16, padding: 14 },
 };
 
 // 🌿 Forest (greens)
@@ -58,6 +66,8 @@ export const forestTheme: Theme = {
     buttonText: '#ffffff',
     buttonBackground: '#3fa564',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 20, padding: 16 },
 };
 
 // 🎨 Pastel (lavender & purple)
@@ -70,6 +80,8 @@ export const pastelTheme: Theme = {
     buttonText: '#ffffff',
     buttonBackground: '#a78bfa',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 24, padding: 14 },
 };
 
 // ⚡ High Contrast (accessibility)
@@ -82,6 +94,8 @@ export const highContrastTheme: Theme = {
     buttonText: '#000000',
     buttonBackground: '#ffcc00',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 0, padding: 14 },
 };
 
 // 💼 Professional (neutral + blue accent)
@@ -94,6 +108,8 @@ export const professionalTheme: Theme = {
     buttonText: '#ffffff',
     buttonBackground: '#2563eb',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 6, padding: 12 },
 };
 
 // 🌸 Sakura (soft pink)
@@ -106,6 +122,8 @@ export const sakuraTheme: Theme = {
     buttonText: '#ffffff',
     buttonBackground: '#ec4899',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 18, padding: 14 },
 };
 
 // 🌌 Midnight (deep purples)
@@ -118,6 +136,8 @@ export const midnightTheme: Theme = {
     buttonText: '#1e1b4b',
     buttonBackground: '#7c3aed',
   },
+  fonts: { regular: 'System', bold: 'System-Bold' },
+  button: { borderRadius: 10, padding: 12 },
 };
 
 export const themes: Record<string, Theme> = {

package/src/index.tsx

@@ -23,6 +23,7 @@ import { themes } from './context/themes';
 import { IDMConf } from './types/IDMConf';
 import { IDMProvider, useIDM } from './context/IDMConfigurationContext';
 import { KeyboardProvider, useKeyboard } from './context/KeyboardContext';
+import { FailedCountProvider } from './context/FailedCountContext';
 import Footer from './components/common/Footer';
 import Header from './components/common/Header';
 import Loader from './components/common/Loader';
@@ -31,7 +32,7 @@ import {
   generateAccessToken,
   generateRequest,
   getConfiguration,
-  getCountries,
+  countryMetaData,
 } from './apis';
 
 const Stack = createNativeStackNavigator();
@@ -54,11 +55,13 @@ interface IDMScanProps {
 
 export default function IDMScan({ idmConf }: IDMScanProps) {
   return (
-    <IDMProvider initialConf={idmConf}>
-      <KeyboardProvider>
-        <IDMScanContent />
-      </KeyboardProvider>
-    </IDMProvider>
+    <FailedCountProvider>
+      <IDMProvider initialConf={idmConf}>
+        <KeyboardProvider>
+          <IDMScanContent />
+        </KeyboardProvider>
+      </IDMProvider>
+    </FailedCountProvider>
   );
 }
 
@@ -69,6 +72,7 @@ function IDMScanContent() {
   const [currentRoute, setCurrentRoute] = useState<string | undefined>();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isActivityReady, setIsActivityReady] = useState(false);
 
   // Memoize theme calculation
   const theme = useMemo(
@@ -102,35 +106,40 @@ function IDMScanContent() {
         if (!idmConf.userDetails) {
           console.log('Fetching user data...');
           const userData = await getUserDataAPI();
-          const updatedConf = { ...idmConf, userDetails: userData };
-          setIDMConf(updatedConf);
-
+          
           // Step 2: Generate access token if not provided
           if (!idmConf.accessToken) {
             console.log('Generating access token...');
-            const token = await generateAccessToken(updatedConf);
-            const confWithToken = { ...updatedConf, accessToken: token };
-            setIDMConf(confWithToken);
+            const token = await generateAccessToken({ ...idmConf, userDetails: userData });
 
             // Step 3: Generate verification request
             console.log('Generating verification request...');
-            const requestResult = await generateRequest(confWithToken, idmConf.requestData);
-            const confWithVerifyCode = {
-              ...confWithToken,
-              verificationCode: requestResult.verificationCode,
-            };
-            setIDMConf(confWithVerifyCode);
+            const requestResult = await generateRequest(
+              { ...idmConf, userDetails: userData, accessToken: token },
+              idmConf.requestData
+            );
 
             // Step 4: Get configuration
             console.log('Fetching configuration...');
             const fetchedConfig = await getConfiguration(
-              confWithVerifyCode,
+              { ...idmConf, userDetails: userData, accessToken: token, verificationCode: requestResult.verificationCode },
               requestResult.verificationCode
             );
+
+            // Update all at once to prevent state loss
             setIDMConf({
-              ...confWithVerifyCode,
+              ...idmConf,
+              userDetails: userData,
+              accessToken: token,
+              verificationCode: requestResult.verificationCode,
               configuration: fetchedConfig,
             });
+          } else {
+            // Only update user data if token already exists
+            setIDMConf({
+              ...idmConf,
+              userDetails: userData,
+            });
           }
         }
       } catch (err: any) {
@@ -138,20 +147,23 @@ function IDMScanContent() {
         setError(err.message || 'Failed to initialize SDK');
       } finally {
         setLoading(false);
+        // Add delay to ensure Activity is fully ready before showing permission screen
+        setTimeout(() => {
+          setIsActivityReady(true);
+        }, 1000);
       }
     };
 
     initializeSDK();
   }, []); // Run once on mount
 
-  // Fetch countries when access token and verification code are available
+  // Load static country metadata when access token and verification code are available
   useEffect(() => {
-    const fetchCountriesData = async () => {
+    const loadCountriesData = () => {
       if (idmConf.accessToken && idmConf.verificationCode && !idmConf.countryDetails) {
         try {
-          console.log('Fetching countries...');
-          const response = await getCountries(idmConf);
-          const countriesArray = Array.isArray(response) ? response : response?.data || [];
+          console.log('Loading countries from static metadata...');
+          const countriesArray = countryMetaData || [];
           
           const mapped = countriesArray.map((singleCountry: any) => ({
             label: singleCountry.country,
@@ -164,12 +176,12 @@ function IDMScanContent() {
             countryDetails: mapped,
           });
         } catch (err: any) {
-          console.error('Error fetching countries:', err);
+          console.error('Error loading countries:', err);
         }
       }
     };
 
-    fetchCountriesData();
+    loadCountriesData();
   }, [idmConf.accessToken, idmConf.verificationCode]);
 
   // Determine initial route based on permissions
@@ -180,7 +192,7 @@ function IDMScanContent() {
     return 'LocationPermission';
   }, [idmConf.userDetails?.permissionGranted]);
 
-  if (loading) {
+  if (loading || !isActivityReady) {
     return (
       <ThemeProvider theme={theme}>
         <Loader />
@@ -191,7 +203,7 @@ function IDMScanContent() {
   if (error) {
     return (
       <ThemeProvider theme={theme}>
-        <Loader message={`Error: ${error}`} />
+        <Loader />
       </ThemeProvider>
     );
   }

package/src/screens/BackDocumentAdvice.tsx

@@ -1,21 +1,21 @@
 import { useNavigation } from '@react-navigation/native';
-import { Image, ScrollView, View } from 'react-native';
+import { Image, ScrollView } from 'react-native';
 import Button from '../components/ui/Button';
 import ThemedText from '../components/ui/ThemedText';
 import getStyles from '../styles/DocumentAdviceStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
 import { useMemo } from 'react';
+import { getCardScanImageBack } from '../utils/imagesHelper';
 
 export default function BackDocumentAdvice() {
   const { theme } = useTheme();
+  const { idmConf } = useIDM();
   const orientation = useOrientation();
   const navigation = useNavigation();
 
-  const styles = useMemo(
-    () => getStyles(theme, orientation),
-    [theme, orientation]
-  );
+  const styles = useMemo(() => getStyles(theme, orientation), [theme, orientation]);
 
   const handleRedirect = () => {
     navigation.navigate('DocumentCaptureBack' as never);
@@ -27,19 +27,14 @@ export default function BackDocumentAdvice() {
         Capture Your ID Back
       </ThemedText>
 
-      {/* Placeholder for ID card back image */}
-      <View
-        style={[
-          styles.idcard,
-          {
-            backgroundColor: '#f0f0f0',
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        ]}
-      >
-        <ThemedText>ID Back Image</ThemedText>
-      </View>
+      <Image
+        source={getCardScanImageBack(
+          idmConf?.selectedCountryDetails?.selectedMetaData?.type,
+          idmConf?.selectedCountryDetails?.selectedMetaData?.countryCode
+        )}
+        style={styles.idcard}
+        resizeMode="contain"
+      />
 
       <Button
         title="Take a photo"

package/src/screens/BarcodeAdvice.tsx

@@ -1,17 +1,22 @@
 import { useNavigation } from '@react-navigation/native';
-import { ScrollView, View } from 'react-native';
+import { Image, ScrollView } from 'react-native';
 import Button from '../components/ui/Button';
 import ThemedText from '../components/ui/ThemedText';
 import getStyles from '../styles/BarcodeAdviceStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
-import { useMemo } from 'react';
+import { useIDM } from '../context/IDMConfigurationContext';
+import { useEffect, useState, useMemo } from 'react';
 
 export default function BarcodeAdvice() {
   const { theme } = useTheme();
+  const { idmConf } = useIDM();
   const orientation = useOrientation();
   const navigation = useNavigation();
 
+  const [barcodeType, setBarcodeType] = useState<string | null>('PDF417 B');
+
+  // Memoize styles to avoid recalculation on every render
   const styles = useMemo(
     () => getStyles(theme, orientation),
     [theme, orientation]
@@ -21,25 +26,40 @@ export default function BarcodeAdvice() {
     navigation.navigate('BarcodeCapture' as never);
   };
 
+  useEffect(() => {
+    const metadata = idmConf?.selectedCountryDetails?.selectedMetaData;
+    if (metadata?.barcode === 'PDF417F') {
+      setBarcodeType('PDF417F');
+    } else {
+      setBarcodeType('PDF417 B');
+    }
+  }, [idmConf]);
+
   return (
     <ScrollView contentContainerStyle={styles.container}>
-      <ThemedText style={styles.maintitle} type="title">
-        Scan the barcode on the back of your ID
-      </ThemedText>
-
-      {/* Placeholder for barcode image */}
-      <View
-        style={[
-          styles.idcard,
-          {
-            backgroundColor: '#f0f0f0',
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        ]}
-      >
-        <ThemedText>Barcode Image</ThemedText>
-      </View>
+      {barcodeType === 'PDF417 B' ? (
+        <ThemedText style={styles.maintitle} type="title">
+          Scan the barcode on the back of your ID
+        </ThemedText>
+      ) : (
+        <ThemedText style={styles.maintitle} type="title">
+          Scan the barcode on the front of your ID
+        </ThemedText>
+      )}
+
+      {barcodeType === 'PDF417 B' ? (
+        <Image
+          source={require('../../assets/images/card-scan-back-icon.jpg')}
+          style={styles.idcard}
+          resizeMode="contain"
+        />
+      ) : (
+        <Image
+          source={require('../../assets/images/card-scan-front-icon.png')}
+          style={styles.idcard}
+          resizeMode="contain"
+        />
+      )}
 
       <Button
         title="Scan"