Refactor App component and add Map screen with location permissions handling

- Updated App component to improve structure and readability.
- Replaced ICameraSDK with MyNativeModule for native interactions.
- Enhanced error handling during app initialization and QR code generation.
- Introduced a new Map screen that requests location permissions and handles user alerts for permission status.
- Added new dependencies for location permissions management.

App.tsx

@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from 'react';
 import {
   StatusBar,
   useColorScheme,
@@ -12,6 +11,7 @@ import {
   ScrollView,
 } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { useState, useEffect } from 'react';
 
 import Login from './src/components/Login';
 import Register from './src/components/Register';
@@ -21,10 +21,9 @@ import { ScannerScreen } from './src/screens/ScannerScreen';
 
 type Screen = 'login' | 'register' | 'home' | 'scanner';
 
-// ✅ Correct native module
+const { MyNativeModule } = NativeModules;
-const { ICameraSDK } = NativeModules;
 
-function App(): JSX.Element {
+function App() {
   const isDarkMode = useColorScheme() === 'dark';
 
   const [currentScreen, setCurrentScreen] = useState<Screen>('login');
@@ -39,10 +38,10 @@ function App(): JSX.Element {
   useEffect(() => {
       initializeApp();
 
-    console.log('ICameraSDK:', ICameraSDK);
+      console.log('MyNativeModule:', MyNativeModule);
-    ICameraSDK?.greet?.('John')
+      MyNativeModule?.greet?.('John').then((msg: any) => {
-      .then((msg: string) => console.log(msg))
+          console.log(msg);
-      .catch(console.error);
+      });
 
       const unsubscribe = networkService.addListener(networkState => {
           setIsOnline(networkState.isConnected);
@@ -54,14 +53,15 @@ function App(): JSX.Element {
   const initializeApp = async () => {
       try {
           await authAPI.initialize();
-      const loggedIn = await authAPI.isLoggedIn();
+
-      if (loggedIn) {
+          const isLoggedIn = await authAPI.isLoggedIn();
+          if (isLoggedIn) {
               const user = await authAPI.getCurrentUser();
               setCurrentUser(user);
               setCurrentScreen('home');
           }
-    } catch (e) {
+      } catch (error) {
-      console.error(e);
+          console.error('Initialization error:', error);
       } finally {
           setIsInitialized(true);
       }
@@ -93,6 +93,7 @@ function App(): JSX.Element {
   const handleLogout = async () => {
       try {
           await authAPI.logout();
+          setQrCode(null);
           navigateToLogin();
           Alert.alert('Success', 'Logged out successfully');
       } catch {
@@ -100,20 +101,35 @@ function App(): JSX.Element {
       }
   };
 
+  const showAppStatus = async () => {
+      try {
+          const status = await authAPI.getAppStatus();
+          Alert.alert(
+              'App Status',
+              `Network: ${status.network.isOnline ? 'Online' : 'Offline'}
+Users: ${status.storage.totalUsers}
+Current User: ${status.authentication.currentUser || 'None'}
+Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}`
+          );
+      } catch {
+          Alert.alert('Error', 'Failed to get app status');
+      }
+  };
+
   const generateQRCode = async () => {
-    if (!currentUser?.email || !ICameraSDK) {
+      if (!currentUser?.email) {
-      Alert.alert('Error', 'Native QR module not available');
+          Alert.alert('Error', 'No user email available');
           return;
       }
 
       setIsGeneratingQR(true);
       try {
           const qrData = `User: ${currentUser.fullName}\nEmail: ${currentUser.email}`;
-      const base64 = await ICameraSDK.generateQRCode(qrData, 300, 300);
+          const base64Image = await MyNativeModule.generateQRCode(qrData, 300, 300);
-      setQrCode(base64);
+          setQrCode(base64Image);
-    } catch (e) {
+      } catch (error) {
-      console.error(e);
+          console.error(error);
-      Alert.alert('Error', 'QR generation failed');
+          Alert.alert('Error', 'Failed to generate QR code');
       } finally {
           setIsGeneratingQR(false);
       }
@@ -130,7 +146,7 @@ function App(): JSX.Element {
       ]);
 
       Alert.alert(
-      'Scanned',
+          'Scanned Successfully',
           `Code: ${result.code}\nFormat: ${result.format}`,
           [{ text: 'OK', onPress: () => setCurrentScreen('home') }]
       );
@@ -165,46 +181,53 @@ function App(): JSX.Element {
 
     case 'home':
   return (
-          <ScrollView
+      <ScrollView style= { styles.homeContainer } contentContainerStyle = { styles.scrollContent } >
-            style={styles.homeContainer}
-            contentContainerStyle={styles.scrollContent}
-          >
           <Text style={ styles.welcomeText }>
-              Welcome, {currentUser?.fullName || 'User'}
+              Welcome, { currentUser?.fullName || 'User'
+}
 </Text>
 
-            {qrCode && <Image source={{ uri: qrCode }} style={styles.qrImage} />}
+{
+  qrCode && (
+      <Image source={ { uri: qrCode } } style = { styles.qrImage } />
+          )
+}
 
-            <TouchableOpacity style={styles.button} onPress={openScanner}>
+<TouchableOpacity style={ styles.scannerButton } onPress = { openScanner } >
   <Text style={ styles.buttonText }> Scan QR / Barcode </Text>
       </TouchableOpacity>
 
       < TouchableOpacity
-              style={[styles.button, styles.qrButton]}
+style = { styles.qrButton }
 onPress = { generateQRCode }
 disabled = { isGeneratingQR }
   >
   <Text style={ styles.buttonText }>
-                {isGeneratingQR ? 'Generating...' : 'Generate QR'}
+      { isGeneratingQR? 'Generating...': 'Generate QR Code' }
       </Text>
       </TouchableOpacity>
 
-            <TouchableOpacity
+      < TouchableOpacity style = { styles.statusButton } onPress = { showAppStatus } >
-              style={[styles.button, styles.logoutButton]}
+          <Text style={ styles.buttonText }> App Status </Text>
-              onPress={handleLogout}
+              </TouchableOpacity>
-            >
+
+              < TouchableOpacity style = { styles.logoutButton } onPress = { handleLogout } >
                   <Text style={ styles.buttonText }> Logout </Text>
                       </TouchableOpacity>
                       </ScrollView>
       );
+
+    default:
+return null;
   }
 };
 
+/* -------------------- LOADING -------------------- */
 if (!isInitialized) {
   return (
       <SafeAreaProvider>
-        <View style={styles.loading}>
+      <View style= { styles.loadingContainer } >
-          <Text>Initializing...</Text>
+      <Text style={ styles.loadingText }> Initializing...</Text>
           </View>
           </SafeAreaProvider>
   );
@@ -218,25 +241,18 @@ function App(): JSX.Element {
 );
 }
 
-export default App;
-
-/* -------------------- STYLES -------------------- */
-
 const styles = StyleSheet.create({
-  loading: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  loadingText: { fontSize: 18, fontWeight: '600' },
   homeContainer: { flex: 1 },
   scrollContent: { alignItems: 'center', padding: 20 },
   welcomeText: { fontSize: 24, fontWeight: '700', marginBottom: 20 },
   qrImage: { width: 300, height: 300, marginBottom: 20 },
-  button: {
+  scannerButton: { backgroundColor: '#9333ea', padding: 14, borderRadius: 20, marginBottom: 10 },
-    backgroundColor: '#6366f1',
+  qrButton: { backgroundColor: '#10b981', padding: 14, borderRadius: 20, marginBottom: 10 },
-    padding: 14,
+  statusButton: { backgroundColor: '#3bb6d8', padding: 14, borderRadius: 20, marginBottom: 10 },
-    borderRadius: 18,
+  logoutButton: { backgroundColor: '#ff6b6b', padding: 14, borderRadius: 20 },
-    marginBottom: 12,
-    minWidth: 220,
-    alignItems: 'center',
-  },
-  qrButton: { backgroundColor: '#10b981' },
-  logoutButton: { backgroundColor: '#ef4444' },
   buttonText: { color: '#fff', fontWeight: '600' },
 });
+
+export default App;

package.json

@@ -10,12 +10,16 @@
     "test": "jest"
   },
   "dependencies": {
+    "@mapbox/polyline": "^1.2.1",
     "@react-native-async-storage/async-storage": "^1.24.0",
+    "@react-native-community/geolocation": "^3.4.0",
     "@react-native-community/netinfo": "^11.3.1",
     "@react-native/new-app-screen": "0.82.1",
     "lynkeduppro-login-sdk": "^0.1.9",
     "react": "19.1.1",
     "react-native": "0.82.1",
+    "react-native-maps": "^1.26.20",
+    "react-native-permissions": "^5.4.4",
     "react-native-safe-area-context": "^5.5.2"
   },
   "devDependencies": {

src/screens/Map.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import { View, Text, Platform, Alert, Linking } from 'react-native';
+import { check, PERMISSIONS, request, RESULTS } from 'react-native-permissions';
+
+export default function Map() {
+
+    useEffect(() => {
+        const init = async () => {
+            const hasPermission = await requestLocationPermission();
+            if (hasPermission) {
+            console.log('Permission granted');
+          } else {
+            console.log('Permission denied');
+          }
+        };
+        init();
+    }, []);
+
+    async function requestLocationPermission(): Promise<boolean> {
+        try {
+          const permission = Platform.select({
+            
+            android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
+            ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
+            default: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
+          });
+    
+          const status = await check(permission);
+          if (status === RESULTS.GRANTED) {
+            console.log('Location permission already granted');
+            return true;
+          }
+    
+          if (status === RESULTS.UNAVAILABLE) {
+            console.log('Location permission not available on this device');
+            return false;
+          }
+    
+          const result = await request(permission);
+          if (result === RESULTS.GRANTED) {
+            console.log('Location permission granted');
+            return true;
+          } else if (result === RESULTS.DENIED) {
+            console.log('Location permission denied');
+            return false;
+          } else if (result === RESULTS.BLOCKED) {
+            console.log('Location permission permanently denied');
+            Alert.alert(
+              'Location Permission Blocked',
+              'Location permission is required to use this feature.',
+              [
+                { text: 'Cancel', style: 'cancel' },
+                { text: 'Open Settings', onPress: () => Linking.openSettings() },
+              ],
+              { cancelable: true },
+            );
+            return false;
+          }
+    
+          return false;
+        } catch (error) {
+          console.error('Location permission error:', error);
+          return false;
+        }
+      }
+
+    return (
+        <View>
+            <Text>Map</Text>
+        </View>
+    );
+}