working on creating and integrating the required native modules and implementing the iCamera SDK display on the React Native side.

App.tsx

@@ -16,8 +16,9 @@ import Login from './src/components/Login';
 import Register from './src/components/Register';
 import { authAPI } from './src/services/authAPI';
 import { networkService } from './src/services/networkService';
+import { ScannerScreen } from './src/screens/ScannerScreen';
 
-type Screen = 'login' | 'register' | 'home';
+type Screen = 'login' | 'register' | 'home' | 'scanner';
 const { MyNativeModule } = NativeModules;
 
 function App() {
@@ -28,6 +29,7 @@ function App() {
   const [currentUser, setCurrentUser] = useState<any>(null);
   const [qrCode, setQrCode] = useState<string | null>(null);
   const [isGeneratingQR, setIsGeneratingQR] = useState(false);
+  const [scannedCodes, setScannedCodes] = useState<any[]>([]);
 
   // Initialize app
   useEffect(() => {
@@ -111,121 +113,183 @@ Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}
     }
   };
 
-  const generateQRCode = async () => {
+  const handleScanResult = (result: any) => {
-    if (!currentUser?.email) {
+    console.log('Scan result:', result);
-      Alert.alert('Error', 'No user email available');
+    setScannedCodes(prev => [
-      return;
+      {
-    }
+        code: result.code,
-
+        format: result.format,
-    setIsGeneratingQR(true);
+        timestamp: new Date().toLocaleTimeString(),
-    try {
+      },
-      const qrData = `User: ${currentUser.fullName}\nEmail: ${currentUser.email}`;
+      ...prev,
-      const base64Image = await MyNativeModule.generateQRCode(qrData, 300, 300);
+    ]);
-      setQrCode(base64Image);
+    Alert.alert(
-      Alert.alert('Success', 'QR Code generated successfully!');
+      '✓ Scanned Successfully',
-    } catch (error) {
+      `Code: ${result.code}\nFormat: ${result.format}`,
-      console.error('QR Code generation error:', error);
+      [
-      Alert.alert('Error', 'Failed to generate QR code');
+        {
-    } finally {
+          text: 'Close',
-      setIsGeneratingQR(false);
+          onPress: () => setCurrentScreen('home'),
-    }
+        },
-  };
+      ]
-
-  const renderScreen = () => {
-    switch (currentScreen) {
-      case 'login':
-        return (
-          <Login
-            onNavigateToRegister={navigateToRegister}
-            onLoginSuccess={navigateToHome}
-          />
-        );
-      case 'register':
-        return (
-          <Register
-            onNavigateToLogin={navigateToLogin}
-            onRegisterSuccess={navigateToHome}
-          />
-        );
-      case 'home':
-        return (
-          <ScrollView style={styles.homeContainer} contentContainerStyle={styles.scrollContent}>
-            <View style={styles.statusBar}>
-              <Text style={styles.statusText}>
-                {isOnline ? '🟢 Online' : '🔴 Offline'}
-              </Text>
-            </View>
-
-            <Text style={styles.welcomeText}>
-              Welcome, {currentUser?.fullName || 'User'}!
-            </Text>
-
-            <Text style={styles.emailText}>
-              {currentUser?.email}
-            </Text>
-
-            {qrCode && (
-              <View style={styles.qrContainer}>
-                <Text style={styles.qrLabel}>Your QR Code:</Text>
-                <Image
-                  source={{ uri: qrCode }}
-                  style={styles.qrImage}
-                />
-              </View>
-            )}
-
-            <View style={styles.buttonContainer}>
-              <TouchableOpacity
-                style={styles.qrButton}
-                onPress={generateQRCode}
-                disabled={isGeneratingQR}
-              >
-                <Text style={styles.buttonText}>
-                  {isGeneratingQR ? 'Generating...' : 'Generate QR Code'}
-                </Text>
-              </TouchableOpacity>
-
-              <TouchableOpacity style={styles.statusButton} onPress={showAppStatus}>
-                <Text style={styles.buttonText}>App Status</Text>
-              </TouchableOpacity>
-
-              <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
-                <Text style={styles.buttonText}>Logout</Text>
-              </TouchableOpacity>
-            </View>
-
-            <Text style={styles.infoText}>
-              {isOnline
-                ? 'Your data is synced with the cloud'
-                : 'Working offline - data saved locally'}
-            </Text>
-          </ScrollView>
-        );
-      default:
-        return null;
-    }
-  };
-
-  // Show loading screen while initializing
-  if (!isInitialized) {
-    return (
-      <SafeAreaProvider>
-        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-        <View style={styles.loadingContainer}>
-          <Text style={styles.loadingText}>Initializing...</Text>
-        </View>
-      </SafeAreaProvider>
     );
+  };
+
+  const openScanner = () => {
+    setCurrentScreen('scanner');
+  } catch (error) {
+    Alert.alert('Error', 'Failed to get app status');
+  }
+};
+
+const generateQRCode = async () => {
+  if (!currentUser?.email) {
+    Alert.alert('Error', 'No user email available');
+    return;
   }
 
+  setIsGeneratingQR(true);
+  try {
+    const qrData = `User: ${currentUser.fullName}\nEmail: ${currentUser.email}`;
+    const base64Image = await MyNativeModule.generateQRCode(qrData, 300, 300);
+    setQrCode(base64Image);
+    Alert.alert('Success', 'QR Code generated successfully!');
+  } catch (error) {
+    console.error('QR Code generation error:', error);
+    Alert.alert('Error', 'Failed to generate QR code');
+  } finally {
+    setIsGeneratingQR(false);
+  }
+};
+
+const renderScreen = () => {
+  switch (currentScreen) {
+    case 'login':
+      return (
+        <Login
+          onNavigateToRegister={navigateToRegister}
+          onLoginSuccess={navigateToHome}
+        />
+      );
+    case 'register':
+      return (
+        <Register
+          onNavigateToLogin={navigateToLogin}
+          onRegisterSuccess={navigateToHome}
+        />
+      );
+    case 'scanner':
+      return (
+        <ScannerScreen
+          presignedUrl="https://your-backend-presigned-url.com"
+          onScan={handleScanResult}
+        />
+      );
+    case 'home':
+      return (
+        <ScrollView style={styles.homeContainer} contentContainerStyle={styles.scrollContent}>
+          <View style={styles.statusBar}>
+            <Text style={styles.statusText}>
+              {isOnline ? '🟢 Online' : '🔴 Offline'}
+            </Text>
+          </View>
+
+          <Text style={styles.welcomeText}>
+            Welcome, {currentUser?.fullName || 'User'}!
+          </Text>
+
+          <Text style={styles.emailText}>
+            {currentUser?.email}
+          </Text>
+
+          {qrCode && (
+            <View style={styles.qrContainer}>
+              <Text style={styles.qrLabel}>Your QR Code:</Text>
+              <Image
+                source={{ uri: qrCode }}
+                style={styles.qrImage}
+              />
+            </View>
+          )}
+
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity
+              style={styles.scannerButton}
+              onPress={openScanner}
+            >
+              <Text style={styles.buttonText}>
+                📱 Scan QR/Barcode
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.qrButton}
+              onPress={generateQRCode}
+              disabled={isGeneratingQR}
+            >
+              <Text style={styles.buttonText}>
+                {isGeneratingQR ? 'Generating...' : 'Generate QR Code'}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.statusButton} onPress={showAppStatus}>
+              <Text style={styles.buttonText}>App Status</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+              <Text style={styles.buttonText}>Logout</Text>
+            </TouchableOpacity>
+          </View>
+
+          {scannedCodes.length > 0 && (
+            <View style={styles.scannedContainer}>
+              <Text style={styles.scannedTitle}>
+                Scanned Codes ({scannedCodes.length})
+              </Text>
+              {scannedCodes.slice(0, 5).map((item, index) => (
+                <View key={index} style={styles.scannedItem}>
+                  <Text style={styles.scannedCode}>{item.code}</Text>
+                  <View style={styles.scannedFooter}>
+                    <Text style={styles.scannedFormat}>{item.format}</Text>
+                    <Text style={styles.scannedTime}>{item.timestamp}</Text>
+                  </View>
+                </View>
+              ))}
+            </View>
+          )}
+
+          <Text style={styles.infoText}>
+            {isOnline
+              ? 'Your data is synced with the cloud'
+              : 'Working offline - data saved locally'}
+          </Text>
+        </ScrollView>
+      );
+    default:
+      return null;
+  }
+};
+
+// Show loading screen while initializing
+if (!isInitialized) {
   return (
     <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      {renderScreen()}
+      <View style={styles.loadingContainer}>
+        <Text style={styles.loadingText}>Initializing...</Text>
+      </View>
     </SafeAreaProvider>
   );
 }
 
+return (
+  <SafeAreaProvider>
+    <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+    {renderScreen()}
+  </SafeAreaProvider>
+);
+}
+
 const styles = StyleSheet.create({
   loadingContainer: {
     flex: 1,
@@ -310,6 +374,13 @@ const styles = StyleSheet.create({
     marginBottom: 30,
     width: '100%',
   },
+  scannerButton: {
+    backgroundColor: '#9333ea',
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderRadius: 25,
+    alignItems: 'center',
+  },
   qrButton: {
     backgroundColor: '#10b981',
     paddingHorizontal: 20,
@@ -336,6 +407,52 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     fontSize: 16,
   },
+  scannedContainer: {
+    width: '100%',
+    marginBottom: 20,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  scannedTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12,
+  },
+  scannedItem: {
+    backgroundColor: '#f5f5f5',
+    borderLeftWidth: 4,
+    borderLeftColor: '#9333ea',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginBottom: 8,
+    borderRadius: 4,
+  },
+  scannedCode: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#000',
+    marginBottom: 4,
+  },
+  scannedFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  scannedFormat: {
+    fontSize: 11,
+    color: '#666',
+    fontWeight: '500',
+  },
+  scannedTime: {
+    fontSize: 11,
+    color: '#999',
+  },
   infoText: {
     fontSize: 14,
     color: '#888',

index.js

@@ -7,3 +7,16 @@ import App from './App';
 import { name as appName } from './app.json';
 LogBox.ignoreAllLogs();
 AppRegistry.registerComponent(appName, () => App);
+
+
+// 1. Hook (Easiest) ⭐
+// const scanner = useCameraScanner({
+//   presignedUrl: 'https://...',
+//   onScanResult: (result) => console.log(result.code),
+// });
+
+// 2. Ready Screen
+//<ScannerScreen presignedUrl="..." onScan={handleScan} />
+
+// 3. Direct Module
+// const { ICameraSDK } = NativeModules;