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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@test-web/react-native-sdk",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Dynamic React Native SDK for document verification with API-driven configuration",
   "main": "src/index.tsx",
   "types": "src/index.tsx",

package/src/components/common/Footer.tsx

@@ -1,30 +1,30 @@
-import React, { memo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { StyleProp, Text, View, ViewStyle } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
+import { useOrientation } from '../../hooks/useOrientation';
+import { useIDM } from '../../context/IDMConfigurationContext';
+import { useEffect, useState } from 'react';
+import getStyles from '../../styles/FooterStyles';
 
-function Footer() {
+interface FooterProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function Footer({ style }: FooterProps) {
   const { theme } = useTheme();
+  const orientation = useOrientation();
+  const styles = getStyles(theme, orientation);
+  const { idmConf } = useIDM();
+  const [showFooterTenantName, setShowFooterTenantName] = useState<string>('IDMERIT');
+
+  useEffect(() => {
+    if (idmConf.configuration?.showFooterTenantName && idmConf.configuration?.tenantName) {
+      setShowFooterTenantName(idmConf.configuration?.tenantName);
+    }
+  }, [idmConf.configuration]);
 
   return (
-    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
-      <Text style={[styles.text, { color: theme.colors.subtitle }]}>
-        Powered by IDMerit
-      </Text>
+    <View style={[styles.footer, style]}>
+      <Text style={styles.text}>Powered by {showFooterTenantName}</Text>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    height: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderTopWidth: 1,
-    borderTopColor: '#e0e0e0',
-  },
-  text: {
-    fontSize: 12,
-  },
-});
-
-export default memo(Footer);

package/src/components/common/Header.tsx

@@ -1,29 +1,33 @@
-import React, { memo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { Image, StyleProp, View, ViewStyle, ImageSourcePropType } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
+import { useOrientation } from '../../hooks/useOrientation';
+import { useIDM } from '../../context/IDMConfigurationContext';
+import { useEffect, useState } from 'react';
+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);
+
+  const defaultLogo = require('../../../assets/images/logo.png');
+  const [logoSource, setLogoSource] = useState<ImageSourcePropType>(defaultLogo);
+
+  useEffect(() => {
+    const logo = idmConf?.configuration?.logo;
+    if (logo?.startsWith('data:image')) {
+      setLogoSource({ uri: logo });
+    }
+  }, [idmConf]);
 
   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={logoSource} 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/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

@@ -191,7 +191,7 @@ function IDMScanContent() {
   if (error) {
     return (
       <ThemeProvider theme={theme}>
-        <Loader message={`Error: ${error}`} />
+        <Loader />
       </ThemeProvider>
     );
   }

package/src/screens/BarcodeCapture.tsx

@@ -190,7 +190,7 @@ export default function BarcodeCapture() {
         }}
       />
 
-      {loading && <Loader message="Processing barcode..." />}
+      {loading && <Loader />}
     </View>
   );
 }

package/src/screens/MrzCapture.tsx

@@ -247,7 +247,7 @@ export default function MrzCapture() {
         }}
       />
 
-      {loading && <Loader message="Processing MRZ..." />}
+      {loading && <Loader />}
     </View>
   );
 }

package/src/screens/SelfieAdvice.tsx

@@ -17,12 +17,11 @@ export default function SelfieAdvice() {
       <ThemedText style={styles.maintitle} type="title">
         Take a Selfie
       </ThemedText>
-      {/* Add selfie.jpg image to assets/images/ */}
-      {/* <Image
+      <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"

package/src/screens/ThankYou.tsx

@@ -50,7 +50,7 @@ export default function ThankYou() {
       <ThemedText style={styles.subtitle} type="title">
         Your information{'\n'}has been uploaded
       </ThemedText>
-      {loading && <Loader message="Finalizing verification..." />}
+      {loading && <Loader />}
     </View>
   );
 }

package/src/styles/FooterStyles.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types/IDMConf';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) =>
+  StyleSheet.create({
+    footer: {
+      position: 'absolute',
+      bottom: 50,
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+    },
+    text: {
+      fontSize: 14,
+      color: theme.colors.text,
+    },
+  });

package/src/styles/HeaderStyles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types/IDMConf';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) =>
+  StyleSheet.create({
+    container: {
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+      backgroundColor: theme.colors.background,
+    },
+    logo: {
+      marginHorizontal: 'auto',
+      marginTop: '5%',
+      marginBottom: 0,
+      width: 190,
+      height: 76,
+    },
+  });

package/src/styles/LoaderStyles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types/IDMConf';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) =>
+  StyleSheet.create({
+    loadingContainer: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 10,
+    },
+  });

package/src/types/index.ts

@@ -7,6 +7,14 @@ export interface Theme {
     buttonBackground: string;
     buttonText: string;
   };
+  fonts: {
+    regular: string;
+    bold: string;
+  };
+  button: {
+    borderRadius: number;
+    padding: number;
+  };
 }
 
 export * from './IDMConf';