@test-web/react-native-sdk 1.0.0

package/src/context/KeyboardContext.tsx

@@ -0,0 +1,61 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  ReactNode,
+} from 'react';
+import { Keyboard } from 'react-native';
+
+interface KeyboardContextType {
+  isKeyboardVisible: boolean;
+  setKeyboardVisible: (visible: boolean) => void;
+}
+
+const KeyboardContext = createContext<KeyboardContextType | undefined>(
+  undefined
+);
+
+interface KeyboardProviderProps {
+  children: ReactNode;
+}
+
+export function KeyboardProvider({ children }: KeyboardProviderProps) {
+  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardVisible(true);
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardVisible(false);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  // Memoize context value to prevent unnecessary re-renders
+  const value = useMemo(
+    () => ({ isKeyboardVisible, setKeyboardVisible }),
+    [isKeyboardVisible]
+  );
+
+  return (
+    <KeyboardContext.Provider value={value}>
+      {children}
+    </KeyboardContext.Provider>
+  );
+}
+
+export function useKeyboard() {
+  const context = useContext(KeyboardContext);
+  if (!context) {
+    throw new Error('useKeyboard must be used within KeyboardProvider');
+  }
+  return context;
+}

package/src/context/ThemeContext.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Theme } from '../types';
+import { themes } from './themes';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = React.createContext<ThemeContextType>({
+  theme: themes.light,
+  setTheme: () => {},
+});
+
+export const useTheme = () => React.useContext(ThemeContext);
+
+export const ThemeProvider = ({
+  children,
+  theme: initialTheme = themes.light,
+}: {
+  children: React.ReactNode;
+  theme?: Theme;
+}) => {
+  const [theme, setTheme] = React.useState(initialTheme);
+
+  // Memoize context value to prevent unnecessary re-renders
+  const value = React.useMemo(() => ({ theme, setTheme }), [theme]);
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/src/context/themes.ts

@@ -0,0 +1,134 @@
+import { Theme } from '../types';
+
+// 🌞 Light (default)
+export const lightTheme: Theme = {
+  colors: {
+    primary: '#007bff',
+    background: '#ffffff',
+    text: '#111827',
+    subtitle: '#6b7280',
+    buttonText: '#ffffff',
+    buttonBackground: '#007bff',
+  },
+};
+
+// 🌑 Dark (default)
+export const darkTheme: Theme = {
+  colors: {
+    primary: '#3b82f6',
+    background: '#111827',
+    text: '#f9fafb',
+    subtitle: '#9ca3af',
+    buttonText: '#111827',
+    buttonBackground: '#3b82f6',
+  },
+};
+
+// 🌅 Sunset (warm oranges)
+export const sunsetTheme: Theme = {
+  colors: {
+    primary: '#f97316',
+    background: '#fff7ed',
+    text: '#7c2d12',
+    subtitle: '#b45309',
+    buttonText: '#ffffff',
+    buttonBackground: '#f97316',
+  },
+};
+
+// 🌊 Ocean (blues & teal)
+export const oceanTheme: Theme = {
+  colors: {
+    primary: '#0284c7',
+    background: '#f0f9ff',
+    text: '#0c4a6e',
+    subtitle: '#0369a1',
+    buttonText: '#ffffff',
+    buttonBackground: '#0284c7',
+  },
+};
+
+// 🌿 Forest (greens)
+export const forestTheme: Theme = {
+  colors: {
+    primary: '#16a34a',
+    background: '#ffffff',
+    text: '#16a34a',
+    subtitle: '#16a34a',
+    buttonText: '#ffffff',
+    buttonBackground: '#3fa564',
+  },
+};
+
+// 🎨 Pastel (lavender & purple)
+export const pastelTheme: Theme = {
+  colors: {
+    primary: '#a78bfa',
+    background: '#faf5ff',
+    text: '#4c1d95',
+    subtitle: '#7c3aed',
+    buttonText: '#ffffff',
+    buttonBackground: '#a78bfa',
+  },
+};
+
+// ⚡ High Contrast (accessibility)
+export const highContrastTheme: Theme = {
+  colors: {
+    primary: '#ffcc00',
+    background: '#000000',
+    text: '#ffffff',
+    subtitle: '#ffcc00',
+    buttonText: '#000000',
+    buttonBackground: '#ffcc00',
+  },
+};
+
+// 💼 Professional (neutral + blue accent)
+export const professionalTheme: Theme = {
+  colors: {
+    primary: '#2563eb',
+    background: '#f9fafb',
+    text: '#1f2937',
+    subtitle: '#4b5563',
+    buttonText: '#ffffff',
+    buttonBackground: '#2563eb',
+  },
+};
+
+// 🌸 Sakura (soft pink)
+export const sakuraTheme: Theme = {
+  colors: {
+    primary: '#ec4899',
+    background: '#fff0f6',
+    text: '#831843',
+    subtitle: '#db2777',
+    buttonText: '#ffffff',
+    buttonBackground: '#ec4899',
+  },
+};
+
+// 🌌 Midnight (deep purples)
+export const midnightTheme: Theme = {
+  colors: {
+    primary: '#7c3aed',
+    background: '#1e1b4b',
+    text: '#f5f3ff',
+    subtitle: '#a78bfa',
+    buttonText: '#1e1b4b',
+    buttonBackground: '#7c3aed',
+  },
+};
+
+export const themes: Record<string, Theme> = {
+  light: lightTheme,
+  dark: darkTheme,
+  sunset: sunsetTheme,
+  ocean: oceanTheme,
+  forest: forestTheme,
+  pastel: pastelTheme,
+  highContrast: highContrastTheme,
+  professional: professionalTheme,
+  sakura: sakuraTheme,
+  midnight: midnightTheme,
+};

package/src/hooks/useOrientation.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import { Dimensions } from 'react-native';
+
+export type Orientation = 'portrait' | 'landscape';
+
+export function useOrientation(): Orientation {
+  const [orientation, setOrientation] = useState<Orientation>(
+    getOrientation()
+  );
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', () => {
+      setOrientation(getOrientation());
+    });
+
+    return () => subscription?.remove();
+  }, []);
+
+  return orientation;
+}
+
+function getOrientation(): Orientation {
+  const { width, height } = Dimensions.get('window');
+  return width > height ? 'landscape' : 'portrait';
+}

package/src/index.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import BarcodeCapture from './screens/BarcodeCapture';
+import FrontDocumentAdvice from './screens/FrontDocumentAdvice';
+import BackDocumentAdvice from './screens/BackDocumentAdvice';
+import BarcodeAdvice from './screens/BarcodeAdvice';
+import DocumentCaptureFront from './screens/DocumentCaptureFront';
+import DocumentCaptureBack from './screens/DocumentCaptureBack';
+import SelectDocuments from './screens/SelectDocuments';
+import SelfieAdvice from './screens/SelfieAdvice';
+import SelfieCapture from './screens/SelfieCapture';
+import ThankYou from './screens/ThankYou';
+import VerifyIdentity from './screens/VerifyIdentity';
+import RetakeSelfie from './screens/RetakeSelfie';
+import LocationPermission from './screens/LocationPermission';
+import CameraPermission from './screens/CameraPermission';
+import NoCameraFound from './screens/NoCameraFound';
+import MrzCapture from './screens/MrzCapture';
+import MrzAdvice from './screens/MrzAdvice';
+import { ThemeProvider } from './context/ThemeContext';
+import { themes } from './context/themes';
+import { IDMConf } from './types/IDMConf';
+import { IDMProvider } from './context/IDMConfigurationContext';
+import { KeyboardProvider, useKeyboard } from './context/KeyboardContext';
+import Footer from './components/common/Footer';
+import Header from './components/common/Header';
+
+const Stack = createNativeStackNavigator();
+
+// Screen options constant to avoid recreation
+const SCREEN_OPTIONS = { headerShown: false };
+
+// Routes where header/footer should be hidden
+const HIDE_HEADER_FOOTER_ROUTES = new Set([
+  'SelfieCapture',
+  'DocumentCaptureFront',
+  'DocumentCaptureBack',
+  'BarcodeCapture',
+  'MrzCapture',
+]);
+
+interface IDMScanProps {
+  idmConf?: IDMConf;
+}
+
+export default function IDMScan({ idmConf = {} }: IDMScanProps) {
+  return (
+    <IDMProvider initialConf={idmConf}>
+      <KeyboardProvider>
+        <IDMScanContent idmConf={idmConf} />
+      </KeyboardProvider>
+    </IDMProvider>
+  );
+}
+
+function IDMScanContent({ idmConf }: { idmConf: IDMConf }) {
+  const { isKeyboardVisible } = useKeyboard();
+  const navigationRef = useNavigationContainerRef();
+  const [currentRoute, setCurrentRoute] = useState<string | undefined>();
+
+  // Memoize theme calculation
+  const theme = useMemo(
+    () =>
+      typeof idmConf.theme === 'string'
+        ? themes[idmConf.theme] || themes.light
+        : idmConf.theme || themes.light,
+    [idmConf.theme]
+  );
+
+  // Memoize header/footer visibility
+  const shouldShowHeaderFooter = useMemo(
+    () => !HIDE_HEADER_FOOTER_ROUTES.has(currentRoute || ''),
+    [currentRoute]
+  );
+
+  // Optimize navigation state change handler
+  const handleStateChange = useCallback(() => {
+    const route = navigationRef.getCurrentRoute();
+    setCurrentRoute(route?.name);
+  }, [navigationRef]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      {shouldShowHeaderFooter && <Header />}
+      <NavigationContainer ref={navigationRef} onStateChange={handleStateChange}>
+        <Stack.Navigator initialRouteName="VerifyIdentity" screenOptions={SCREEN_OPTIONS}>
+          <Stack.Screen name="VerifyIdentity" component={VerifyIdentity} />
+          <Stack.Screen name="SelfieAdvice" component={SelfieAdvice} />
+          <Stack.Screen name="SelfieCapture" component={SelfieCapture} />
+          <Stack.Screen name="SelectDocuments" component={SelectDocuments} />
+          <Stack.Screen name="FrontDocumentAdvice" component={FrontDocumentAdvice} />
+          <Stack.Screen name="BackDocumentAdvice" component={BackDocumentAdvice} />
+          <Stack.Screen name="BarcodeAdvice" component={BarcodeAdvice} />
+          <Stack.Screen name="DocumentCaptureFront" component={DocumentCaptureFront} />
+          <Stack.Screen name="DocumentCaptureBack" component={DocumentCaptureBack} />
+          <Stack.Screen name="BarcodeCapture" component={BarcodeCapture} />
+          <Stack.Screen name="ThankYou" component={ThankYou} />
+          <Stack.Screen name="RetakeSelfie" component={RetakeSelfie} />
+          <Stack.Screen name="LocationPermission" component={LocationPermission} />
+          <Stack.Screen name="CameraPermission" component={CameraPermission} />
+          <Stack.Screen name="NoCameraFound" component={NoCameraFound} />
+          <Stack.Screen name="MrzCapture" component={MrzCapture} />
+          <Stack.Screen name="MrzAdvice" component={MrzAdvice} />
+        </Stack.Navigator>
+      </NavigationContainer>
+      {!isKeyboardVisible && shouldShowHeaderFooter && <Footer />}
+    </ThemeProvider>
+  );
+}

package/src/native/NativeModule.ts

@@ -0,0 +1,10 @@
+import { NativeModules } from 'react-native';
+
+const { YourSDKModule } = NativeModules;
+
+export interface NativeSDKModule {
+  initialize(apiKey: string): Promise<string>;
+  performAction(action: string): Promise<string>;
+}
+
+export default YourSDKModule as NativeSDKModule;

package/src/screens/BackDocumentAdvice.tsx

@@ -0,0 +1,52 @@
+import { useNavigation } from '@react-navigation/native';
+import { Image, ScrollView, View } 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 { useMemo } from 'react';
+
+export default function BackDocumentAdvice() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const navigation = useNavigation();
+
+  const styles = useMemo(
+    () => getStyles(theme, orientation),
+    [theme, orientation]
+  );
+
+  const handleRedirect = () => {
+    navigation.navigate('DocumentCaptureBack' as never);
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <ThemedText style={styles.maintitle} type="title">
+        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>
+
+      <Button
+        title="Take a photo"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={handleRedirect}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/BarcodeAdvice.tsx

@@ -0,0 +1,52 @@
+import { useNavigation } from '@react-navigation/native';
+import { ScrollView, View } 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';
+
+export default function BarcodeAdvice() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const navigation = useNavigation();
+
+  const styles = useMemo(
+    () => getStyles(theme, orientation),
+    [theme, orientation]
+  );
+
+  const handleRedirect = () => {
+    navigation.navigate('BarcodeCapture' as never);
+  };
+
+  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>
+
+      <Button
+        title="Scan"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={handleRedirect}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/BarcodeCapture.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+import getStyles from '../styles/ScannerStyles';
+import Loader from '../components/common/Loader';
+
+export default function BarcodeCapture() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+  const [loading, setLoading] = useState(false);
+
+  // Static implementation - simulate barcode scanning
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(true);
+      setTimeout(() => {
+        setLoading(false);
+        navigation.navigate('ThankYou' as never);
+      }, 2000);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [navigation]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.topLabel}>
+        Fill the box with the barcode{'\n'}until it turns green
+      </Text>
+
+      {/* Camera placeholder */}
+      <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
+        <Text
+          style={{
+            color: '#fff',
+            textAlign: 'center',
+            marginTop: 200,
+            fontSize: 16,
+          }}
+        >
+          Barcode Scanner (Static)
+        </Text>
+      </View>
+
+      {/* Barcode overlay box */}
+      <View
+        style={{
+          position: 'absolute',
+          top: '40%',
+          alignSelf: 'center',
+          width: 350,
+          height: 100,
+          borderWidth: 2,
+          borderColor: '#00ff00',
+          backgroundColor: 'transparent',
+        }}
+      />
+
+      {loading && <Loader />}
+    </View>
+  );
+}

package/src/screens/CameraPermission.tsx

@@ -0,0 +1,74 @@
+import { useNavigation } from '@react-navigation/native';
+import * as React from 'react';
+import { ScrollView, Text, View, PermissionsAndroid, Platform } from 'react-native';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import { useTheme } from '../context/ThemeContext';
+import getStyles from '../styles/PermissionStyle';
+import { useOrientation } from '../hooks/useOrientation';
+
+export default function CameraPermission() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+
+  const requestCameraPermission = async () => {
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.CAMERA,
+          {
+            title: 'Camera Permission',
+            message: 'This app needs access to your camera to take selfies.',
+            buttonPositive: 'OK',
+          }
+        );
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('VerifyIdentity' as never);
+          }
+        }
+      } catch (err) {
+        console.warn(err);
+      }
+    } else {
+      // For iOS, navigate directly (implement iOS permission separately)
+      if (navigation.canGoBack()) {
+        navigation.goBack();
+      } else {
+        navigation.navigate('VerifyIdentity' as never);
+      }
+    }
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <ThemedText style={styles.maintitle} type="title">
+        Camera Access Required
+      </ThemedText>
+
+      <View style={{ padding: 20 }}>
+        <Text
+          style={{
+            color: theme.colors.text,
+            textAlign: 'center',
+            marginBottom: 20,
+          }}
+        >
+          This app needs access to your camera to continue. Please grant camera
+          permission.
+        </Text>
+      </View>
+
+      <Button
+        title="Grant Permission"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={requestCameraPermission}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/DocumentCaptureBack.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import getStyles from '../styles/DocumentCaptureStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+import Loader from '../components/common/Loader';
+
+export default function DocumentCaptureBack() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+  const [loading, setLoading] = useState(false);
+
+  const takePhoto = async () => {
+    try {
+      setLoading(true);
+      // Static implementation - simulate photo capture
+      setTimeout(() => {
+        setLoading(false);
+        // Navigate to ThankYou after capturing back
+        navigation.navigate('ThankYou' as never);
+      }, 1000);
+    } catch (error) {
+      console.error('Error taking photo:', error);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.topLabel}>Document Back Side</Text>
+
+      {/* Camera placeholder */}
+      <View style={StyleSheet.absoluteFill}>
+        <View
+          style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}
+        ></View>
+      </View>
+
+      {/* Card overlay placeholder */}
+      <View
+        style={[
+          styles.cardoverlay,
+          {
+            borderWidth: 2,
+            borderColor: '#fff',
+            backgroundColor: 'transparent',
+          },
+        ]}
+      />
+
+      <Text style={styles.bottomLabel}>
+        Position your document fully within the frame
+      </Text>
+
+      <View style={styles.buttonplace}>
+        <TouchableOpacity style={styles.captureButton} onPress={takePhoto} />
+      </View>
+
+      {loading && <Loader />}
+    </View>
+  );
+}