@test-web/react-native-sdk 1.0.0

package/src/screens/SelfieAdvice.tsx

@@ -0,0 +1,35 @@
+import { useNavigation } from '@react-navigation/native';
+import { Image, Text, ScrollView } from 'react-native';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import getStyles from '../styles/SelfieAdviceStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+
+export default function SelfieAdvice() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <ThemedText style={styles.maintitle} type="title">
+        Take a Selfie
+      </ThemedText>
+      {/* Add selfie.jpg image to assets/images/ */}
+      {/* <Image
+        source={require('../../assets/images/selfie.jpg')}
+        style={styles.selfie}
+        resizeMode="contain"
+      /> */}
+      <Text style={styles.text}>You have to allow Camera Permission.</Text>
+      <Button
+        title="Take a Selfie"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={() => navigation.navigate('SelfieCapture' as never)}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/SelfieCapture.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useCallback } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { TouchableOpacity, View, StyleSheet, Text } from 'react-native';
+import getStyles from '../styles/SelfieCaptureStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+import Loader from '../components/common/Loader';
+
+export default function SelfieCapture() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation();
+  const [loading, setLoading] = useState(false);
+
+  const takePhoto = useCallback(() => {
+    setLoading(true);
+    
+    // Static implementation - simulate photo capture
+    setTimeout(() => {
+      setLoading(false);
+      navigation.navigate('SelectDocuments' as never);
+    }, 1000);
+  }, [navigation]);
+
+  return (
+    <View style={styles.container}>
+      {/* Camera placeholder */}
+      <View style={StyleSheet.absoluteFill}>
+        <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
+          <Text style={[styles.text, { color: '#fff', marginTop: 100 }]}>
+            Camera View (Static)
+          </Text>
+        </View>
+      </View>
+
+      {/* Camera overlay - Add your overlay image to assets/images/photo-overlay.png */}
+      {/* <Image
+        source={require('../../assets/images/photo-overlay.png')}
+        style={styles.cameraoverlay}
+        resizeMode="contain"
+      /> */}
+
+      {/* Capture button */}
+      <View style={styles.buttonplace}>
+        <TouchableOpacity 
+          style={styles.captureButton} 
+          onPress={takePhoto}
+          activeOpacity={0.7}
+        />
+      </View>
+
+      {loading && <Loader />}
+    </View>
+  );
+}

package/src/screens/ThankYou.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View } from 'react-native';
+import ThemedText from '../components/ui/ThemedText';
+import getStyles from '../styles/ThankYouStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+
+export default function ThankYou() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+
+  return (
+    <View style={styles.container}>
+      <ThemedText style={styles.maintitle} type="title">
+        Thank You!
+      </ThemedText>
+      <ThemedText style={styles.subtitle} type="title">
+        Your information{'\n'}has been uploaded
+      </ThemedText>
+    </View>
+  );
+}

package/src/screens/VerifyIdentity.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { Text, ScrollView, View } from 'react-native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import getStyles from '../styles/VerifyIdentityStyles';
+import { useTheme } from '../context/ThemeContext';
+import { useOrientation } from '../hooks/useOrientation';
+
+type NavigationProp = NativeStackNavigationProp<any, 'VerifyIdentity'>;
+
+export default function VerifyIdentity() {
+  const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const navigation = useNavigation<NavigationProp>();
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <ThemedText style={styles.maintitle} type="title">
+        Verify your Identity
+      </ThemedText>
+      <Text style={styles.subtitle}>it will only take a few seconds</Text>
+
+      <View style={styles.list}>
+        <View style={styles.listItem}>
+          <View style={styles.numberCircle}>
+            <Text style={styles.numberText}>1</Text>
+          </View>
+          <Text style={styles.listText}>Take a Selfie</Text>
+        </View>
+
+        {orientation === 'portrait' && <View style={styles.saprater} />}
+
+        <View style={styles.listItem}>
+          <View style={styles.numberCircle}>
+            <Text style={styles.numberText}>2</Text>
+          </View>
+          <Text style={styles.listText}>Scan your ID</Text>
+        </View>
+      </View>
+
+      <Text style={styles.subtitle}>Camera and GPS Permission required</Text>
+
+      <Button
+        title="Let's Verify"
+        style={styles.buttonplace}
+        textStyle={styles.button}
+        onPress={() => navigation.navigate('SelfieAdvice' as never)}
+      />
+    </ScrollView>
+  );
+}

package/src/screens/index.tsx

@@ -0,0 +1,17 @@
+export { default as VerifyIdentity } from './VerifyIdentity';
+export { default as MrzCapture } from './MrzCapture';
+export { default as BarcodeCapture } from './BarcodeCapture';
+export { default as FrontDocumentAdvice } from './FrontDocumentAdvice';
+export { default as BackDocumentAdvice } from './BackDocumentAdvice';
+export { default as BarcodeAdvice } from './BarcodeAdvice';
+export { default as DocumentCaptureFront } from './DocumentCaptureFront';
+export { default as DocumentCaptureBack } from './DocumentCaptureBack';
+export { default as SelectDocuments } from './SelectDocuments';
+export { default as SelfieAdvice } from './SelfieAdvice';
+export { default as SelfieCapture } from './SelfieCapture';
+export { default as ThankYou } from './ThankYou';
+export { default as RetakeSelfie } from './RetakeSelfie';
+export { default as LocationPermission } from './LocationPermission';
+export { default as CameraPermission } from './CameraPermission';
+export { default as NoCameraFound } from './NoCameraFound';
+export { default as MrzAdvice } from './MrzAdvice';

package/src/styles/BarcodeAdviceStyles.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flexGrow: 1,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingTop: isPortrait ? 40 : 20,
+    },
+    maintitle: {
+      textAlign: 'center',
+      fontWeight: '300',
+      marginBottom: isPortrait ? 30 : 15,
+      color: theme.colors.text,
+    },
+    idcard: {
+      marginTop: isPortrait ? 20 : 10,
+      marginBottom: 0,
+      width: isPortrait ? 300 : 200,
+      height: isPortrait ? 200 : 150,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 80 : 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    button: {
+      backgroundColor: theme.colors.buttonBackground,
+      color: theme.colors.buttonText,
+      fontSize: 16,
+      fontWeight: 'bold',
+      paddingVertical: 6,
+      paddingHorizontal: 15,
+      borderRadius: 5,
+      textAlign: 'center',
+    },
+  });
+};

package/src/styles/DocumentAdviceStyles.ts

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+  return StyleSheet.create({
+    container: {
+      flexGrow: 1,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingTop: isPortrait ? 40 : 20,
+    },
+    maintitle: {
+      textAlign: 'center',
+      fontWeight: '300',
+      marginBottom: isPortrait ? 30 : 15,
+      color: theme.colors.text,
+    },
+    idcard: {
+      marginTop: isPortrait ? 20 : 10,
+      marginBottom: 0,
+      width: isPortrait ? 300 : 200,
+      height: isPortrait ? 200 : 150,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 80 : 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    button: {
+      backgroundColor: theme.colors.buttonBackground,
+      color: theme.colors.buttonText,
+      fontSize: 16,
+      fontWeight: 'bold',
+      paddingVertical: 6,
+      paddingHorizontal: 15,
+      borderRadius: 5,
+      textAlign: 'center',
+    },
+  });
+};

package/src/styles/DocumentCaptureStyles.ts

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      backgroundColor: '#000',
+    },
+    topLabel: {
+      position: 'absolute',
+      top: isPortrait ? 60 : 30,
+      alignSelf: 'center',
+      color: '#fff',
+      fontSize: 18,
+      fontWeight: 'bold',
+      zIndex: 10,
+    },
+    bottomLabel: {
+      position: 'absolute',
+      bottom: isPortrait ? 150 : 100,
+      alignSelf: 'center',
+      color: '#fff',
+      fontSize: 14,
+      textAlign: 'center',
+      paddingHorizontal: 20,
+      zIndex: 10,
+    },
+    cardoverlay: {
+      position: 'absolute',
+      width: '80%',
+      height: '40%',
+      alignSelf: 'center',
+      top: '30%',
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 50 : 20,
+      alignSelf: 'center',
+      zIndex: 10,
+    },
+    captureButton: {
+      width: 70,
+      height: 70,
+      backgroundColor: 'white',
+      borderRadius: 35,
+      borderWidth: 4,
+      borderColor: '#ccc',
+    },
+  });
+};

package/src/styles/PermissionStyle.ts

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flexGrow: 1,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingTop: isPortrait ? 40 : 20,
+    },
+    logo: {
+      width: 150,
+      height: 50,
+      marginBottom: 20,
+    },
+    maintitle: {
+      textAlign: 'center',
+      fontWeight: '300',
+      marginBottom: 0,
+      color: theme.colors.text,
+    },
+    selfie: {
+      marginLeft: -20,
+      marginTop: isPortrait ? 20 : 10,
+      marginBottom: 0,
+      width: isPortrait ? 200 : 150,
+      height: isPortrait ? 200 : 150,
+    },
+    text: {
+      fontSize: 16,
+      color: theme.colors.text,
+    },
+    permissionText: {
+      fontSize: 16,
+      textAlign: 'center',
+      marginBottom: 30,
+      color: theme.colors.text,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 80 : 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    button: {
+      backgroundColor: theme.colors.buttonBackground,
+      color: theme.colors.buttonText,
+      fontSize: 16,
+      fontWeight: 'bold',
+      paddingVertical: 0,
+      paddingHorizontal: 15,
+      borderRadius: 5,
+      textAlign: 'center',
+    },
+  });
+};

package/src/styles/RetakeStyles.ts

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flexGrow: 1,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingTop: isPortrait ? 40 : 20,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: 'bold',
+      color: theme.colors.text,
+      textAlign: 'center',
+      marginBottom: 10,
+    },
+    subtitle: {
+      fontSize: 18,
+      color: theme.colors.subtitle,
+      textAlign: 'center',
+      marginBottom: 20,
+    },
+    errorMessage: {
+      fontSize: 14,
+      color: '#d32f2f',
+      textAlign: 'center',
+      marginBottom: 30,
+      paddingHorizontal: 20,
+    },
+    guideTitle: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: theme.colors.text,
+      marginBottom: 15,
+    },
+    guideList: {
+      marginBottom: 30,
+    },
+    bullet: {
+      fontSize: 16,
+      color: theme.colors.text,
+      marginBottom: 10,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 80 : 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    button: {
+      backgroundColor: theme.colors.buttonBackground,
+      color: theme.colors.buttonText,
+      fontSize: 16,
+      fontWeight: 'bold',
+      paddingVertical: 6,
+      paddingHorizontal: 15,
+      borderRadius: 5,
+      textAlign: 'center',
+    },
+  });
+};

package/src/styles/ScannerStyles.ts

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#000',
+    },
+    camera: {
+      flex: 1,
+    },
+    topLabel: {
+      position: 'absolute',
+      top: isPortrait ? 60 : 30,
+      alignSelf: 'center',
+      color: '#fff',
+      fontSize: 18,
+      fontWeight: 'bold',
+      zIndex: 10,
+      textAlign: 'center',
+      paddingHorizontal: 20,
+    },
+  });
+};

package/src/styles/SelectDocumentsStyles.ts

@@ -0,0 +1,90 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingTop: isPortrait ? 60 : 20,
+    },
+    maintitle: {
+      textAlign: 'center',
+      fontWeight: '300',
+      marginBottom: 15,
+      color: theme.colors.text,
+    },
+    dropdownTrigger: {
+      marginBottom: 35,
+      width: 250,
+      borderWidth: 1,
+      borderColor: '#ccc',
+      borderRadius: 8,
+      padding: 12,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: theme.colors.background,
+    },
+    dropdownList: {
+      width: 250,
+      position: 'absolute',
+      top: 50,
+      zIndex: 1000,
+      backgroundColor: theme.colors.background,
+      borderWidth: 1,
+      borderColor: '#ccc',
+      borderRadius: 8,
+      maxHeight: 180,
+      elevation: 5,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+    },
+    downArrow: {
+      color: theme.colors.text,
+    },
+    dopDownLable: {
+      color: theme.colors.text,
+    },
+    dropdownItem: {
+      padding: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: '#eee',
+    },
+    sapraterLine: {
+      width: '120%',
+      height: 1,
+      backgroundColor: '#ccc',
+      marginBottom: 25,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 80 : 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    button: {
+      backgroundColor: theme.colors.buttonBackground,
+      color: theme.colors.buttonText,
+      fontSize: 16,
+      fontWeight: 'bold',
+      paddingVertical: 6,
+      paddingHorizontal: 15,
+      borderRadius: 5,
+      textAlign: 'center',
+    },
+    searchbox: {
+      padding: 10,
+      borderBottomWidth: 1,
+      borderColor: '#ccc',
+      color: theme.colors.text,
+    },
+  });
+};

package/src/styles/SelfieAdviceStyles.ts

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+  return StyleSheet.create({
+    container: {
+      flexGrow: 1,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingTop: isPortrait ? 40 : 20,
+    },
+    logo: {
+      width: 150,
+      height: 50,
+      marginBottom: 20,
+    },
+    maintitle: {
+      textAlign: 'center',
+      fontWeight: '300',
+      marginBottom: 0,
+      color: theme.colors.text,
+    },
+    selfie: {
+      marginLeft: -20,
+      marginTop: isPortrait ? 5 : 5,
+      marginBottom: 0,
+      width: isPortrait ? 300 : 150,
+      height: isPortrait ? 300 : 150,
+      tintColor: theme.colors.text,
+    },
+    text: {
+      fontSize: 16,
+      color: theme.colors.text,
+    },
+    permissionText: {
+      fontSize: 16,
+      textAlign: 'center',
+      marginBottom: 30,
+      color: theme.colors.text,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 80 : 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    button: {
+      backgroundColor: theme.colors.buttonBackground,
+      color: theme.colors.buttonText,
+      fontSize: 16,
+      fontWeight: 'bold',
+      paddingVertical: 6,
+      paddingHorizontal: 15,
+      borderRadius: 5,
+      textAlign: 'center',
+    },
+  });
+};

package/src/styles/SelfieCaptureStyles.ts

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background,
+    },
+    button: {
+      width: 100,
+      height: 50,
+    },
+    cameraoverlay: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 50 : 20,
+      left: '50%',
+      marginLeft: -35,
+    },
+    captureButton: {
+      width: 70,
+      height: 70,
+      backgroundColor: 'white',
+      borderRadius: 35,
+      borderWidth: 4,
+      borderColor: '#ccc',
+    },
+    text: {
+      color: theme.colors.text,
+      fontSize: 16,
+      textAlign: 'center',
+      marginBottom: 20,
+    },
+  });
+};