NavBar Done, Need to fix setScanned(false)

App.tsx

@@ -2,40 +2,39 @@ import React, { useState, useEffect, createContext, useContext } from 'react';
 import { Text, View, StyleSheet, ActivityIndicator, TouchableOpacity, FlatList } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { CameraView, Camera } from 'expo-camera'; // 
+import { CameraView, Camera } from 'expo-camera';
-import { Ionicons } from '@expo/vector-icons'; // The icons used in the navigation bar
+import { Ionicons } from '@expo/vector-icons';
-import axios from 'axios'; // Import Axios for HTTP requests for the VT API call
+import axios from 'axios';
 
-
+const QRCodeContext = createContext(null);
-// Create a Context for QR code data
-const QRCodeContext = createContext();
 
 const Tab = createBottomTabNavigator();
 
-// Component for QR Scanner Screen
+
-function QRScannerScreen() {
+const QRScannerScreen: React.FC = () => {
-  const { qrCodes, setQrCodes } = useContext(QRCodeContext); // Access context
+  const { qrCodes, setQrCodes } = useContext(QRCodeContext);
-  const [hasPermission, setHasPermission] = useState(null); // State for camera permission
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
-  const [scanned, setScanned] = useState(false); // State for scanned status
+  const [scanned, setScanned] = useState<boolean>(false);
-  const [showSplash, setShowSplash] = useState(true); // State for splash screen
+  const [showSplash, setShowSplash] = useState<boolean>(true);
-  const [scannedData, setScannedData] = useState(''); // State for scanned data
+  const [scannedData, setScannedData] = useState<string>('');
-  const [scanResult, setScanResult] = useState(null); // State for VirusTotal scan result
+  const [scanResult, setScanResult] = useState<any>(null);
+
 
   useEffect(() => {
     const initializeApp = async () => {
-      const { status } = await Camera.requestCameraPermissionsAsync(); // Request camera permissions
+      const { status } = await Camera.requestCameraPermissionsAsync();
-      setHasPermission(status === 'granted'); // Set permission status
+      setHasPermission(status === 'granted');
-      setShowSplash(false); // Hide splash screen
+      setShowSplash(false);
     };
 
-    initializeApp(); // Initialize app
+    initializeApp();
   }, []);
 
-// Function to handle barcode scanned event
-  const handleBarCodeScanned = async ({ type, data }) => {
-  setScanned(true); // Mark as scanned
 
-  // Determine the type of data (URL, text, or just numbers)
+
+
+  const handleQRCodeSanned = async ({ type, data }: { type: string; data: string }) => {
+    setScanned(true);
     let dataType;
     if (/^(http|https):\/\//.test(data)) {
       dataType = 'URL';
@@ -45,24 +44,22 @@ function QRScannerScreen() {
       dataType = 'Text';
     }
 
-  // Construct the scanned data with the data type
+    let newScannedData = `Type: ${dataType}\nData: ${data}`;
-  let newScannedData = `Type: ${dataType}\nData: ${data}`; // Initialize with type and data
 
     try {
-    const scanId = await scanWithVirusTotal(data); // Send data to VirusTotal and get scan ID
+      const scanId = await scanWithVirusTotal(data);
-    const positive = await getScanResult(scanId); // Get scan result and extract positive score
+      const positive = await getScanResult(scanId);
-    newScannedData += `\nScore: ${positive}`; // Append positive score to newScannedData
+      newScannedData += `\nScore: ${positive}`;
     } catch (error) {
-    console.error('Error handling barcode scan:', error); // Handle error
+      console.error('Error handling barcode scan:', error);
     }
 
-  setScannedData(newScannedData); // Save scanned data
+    setScannedData(newScannedData);
-  setQrCodes([...qrCodes, newScannedData]); // Add scanned data to history
+    setQrCodes([...qrCodes, newScannedData]);
   };
 
-// Function to send data to VirusTotal and get the scan ID
+  const scanWithVirusTotal = async (data: any) => {
-  const scanWithVirusTotal = async (data) => {
+    const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e';
-  const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; // Replace with your VirusTotal API key
     const url = 'https://www.virustotal.com/vtapi/v2/url/scan';
     const params = {
       apikey: apiKey,
@@ -70,17 +67,16 @@ function QRScannerScreen() {
     };
 
     try {
-    const response = await axios.post(url, null, { params }); // Send URL scan request
+      const response = await axios.post(url, null, { params });
-    return response.data.scan_id; // Return scan ID
+      return response.data.scan_id;
     } catch (error) {
-    console.error('Error scanning with VirusTotal:', error); // Handle error
+      console.error('Error scanning with VirusTotal:', error);
-    throw error; // Propagate error
+      throw error;
     }
   };
 
-// Function to get scan result from VirusTotal and return the positive score
+  const getScanResult = async (scanId: Int32Array) => {
-  const getScanResult = async (scanId) => {
+    const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e';
-  const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; // Replace with your VirusTotal API key
     const url = 'https://www.virustotal.com/vtapi/v2/url/report';
     const params = {
       apikey: apiKey,
@@ -88,11 +84,11 @@ function QRScannerScreen() {
     };
 
     try {
-    const response = await axios.get(url, { params }); // Get scan result
+      const response = await axios.get(url, { params });
-    return response.data.positives; // Return positive score
+      return response.data.positives;
     } catch (error) {
-    console.error('Error getting scan result:', error); // Handle error
+      console.error('Error getting scan result:', error);
-    throw error; // Propagate error
+      throw error;
     }
   };
 
@@ -114,66 +110,49 @@ function QRScannerScreen() {
 
   return (
     <View style={styles.container}>
-      {/* Header banner */}
       <View style={styles.banner}>
         <Text style={styles.headerText}>SafeQR</Text>
       </View>
-      {/* Welcome message */}
       <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
-      {/* Camera view container */}
       <View style={styles.cameraContainer}>
         <CameraView
-          onBarcodeScanned={scanned ? undefined : handleBarCodeScanned} // Disable scanner if already scanned
+          onBarcodeScanned={scanned ? undefined : handleQRCodeSanned}
-          barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }} // Scanner settings
+          barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
-          style={styles.camera} // Apply styles
+          style={styles.camera}
         />
       </View>
-   {/* Display scanned data */}
       {scannedData !== '' && (
         <View style={styles.dataBox}>
           <Text style={styles.dataText}>{scannedData}</Text>
           {scanResult && <Text style={styles.dataText}>{JSON.stringify(scanResult)}</Text>}
         </View>
       )}
-      {/* Button to scan again */}
-      {scanned && (
-        <TouchableOpacity style={styles.button} onPress={() => setScanned(false)}>
-          <Text style={styles.buttonText}>Tap to Scan Again</Text>
-        </TouchableOpacity>
-      )}
-      {/* Menu (Placeholder for additional menu items) */}
-      <View style={styles.menu}>
-        {/* Your existing menu items */}
-      </View>
     </View>
   );
-}
+};
 
-// Component for History Screen
 function HistoryScreen() {
-  const { qrCodes } = useContext(QRCodeContext); // Access context
+  const { qrCodes } = useContext(QRCodeContext);
 
   return (
     <View style={styles.container}>
       <Text style={styles.welcomeText}>History Screen</Text>
       <FlatList
-        data={qrCodes} // Data for FlatList
+        data={qrCodes}
         renderItem={({ item }) => (
           <View style={styles.dataBox}>
             <Text style={styles.dataText}>{item}</Text>
           </View>
         )}
-        keyExtractor={(item, index) => index.toString()} // Key extractor for FlatList
+        keyExtractor={(item, index) => index.toString()}
       />
     </View>
   );
 }
 
-// Component for Settings Screen
 function SettingsScreen() {
-  const { setQrCodes } = useContext(QRCodeContext); // Access context
+  const { setQrCodes } = useContext(QRCodeContext);
 
-  // Function to clear history
   const clearHistory = () => {
     setQrCodes([]);
   };
@@ -188,7 +167,6 @@ function SettingsScreen() {
   );
 }
 
-// Component for Profile Screen
 function ProfileScreen() {
   return (
     <View style={styles.container}>
@@ -197,55 +175,92 @@ function ProfileScreen() {
   );
 }
 
-// Main App component with bottom tab navigation
+// Custom Tab Bar Component
+const CustomTabBar = ({ state, descriptors, navigation }) => {
+  return (
+    <View style={styles.tabBar}>
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const label = options.tabBarLabel !== undefined
+          ? options.tabBarLabel
+          : options.title !== undefined
+            ? options.title
+            : route.name;
+
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        const iconName = route.name === 'QR Scanner' ? 'camera' : route.name === 'History' ? 'time' : route.name === 'Settings' ? 'settings' : 'person';
+
+        return (
+          <TouchableOpacity
+            key={index}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={styles.tabButton}
+          >
+            <Ionicons name={iconName} size={24} color={isFocused ? '#673ab7' : '#222'} />
+            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
+              {label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+      <View style={styles.floatingButton}>
+        <TouchableOpacity onPress={() => {navigation.navigate('QR Scanner');}}>
+          <Ionicons name="camera" size={28} color="#fff" />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
 export default function App() {
-  const [qrCodes, setQrCodes] = useState([]); // State to hold QR codes
+  const [qrCodes, setQrCodes] = useState([]);
 
   return (
     <QRCodeContext.Provider value={{ qrCodes, setQrCodes }}>
       <NavigationContainer>
-        <Tab.Navigator
+        <Tab.Navigator tabBar={props => <CustomTabBar {...props} />}>
-          screenOptions={({ route }) => ({
-            tabBarIcon: ({ color, size }) => {
-              let iconName;
-
-              // Set different icons for each tab
-              if (route.name === 'QR Scanner') {
-                iconName = 'qr-code-outline';
-              } else if (route.name === 'History') {
-                iconName = 'time-outline';
-              } else if (route.name === 'Settings') {
-                iconName = 'settings-outline';
-              } else if (route.name === 'Profile') {
-                iconName = 'person-outline';
-              }
-
-              // Return the appropriate icon
-              return <Ionicons name={iconName} size={size} color={color} />;
-            },
-          })}
-          tabBarOptions={{
-            activeTintColor: 'tomato', // Active tab color
-            inactiveTintColor: 'gray', // Inactive tab color
-          }}
-        >
-          <Tab.Screen name="QR Scanner" component={QRScannerScreen} />
           <Tab.Screen name="History" component={HistoryScreen} />
+          <Tab.Screen name="QR Scanner" component={QRScannerScreen} />
           <Tab.Screen name="Settings" component={SettingsScreen} />
-          <Tab.Screen name="Profile" component={ProfileScreen} />
         </Tab.Navigator>
       </NavigationContainer>
     </QRCodeContext.Provider>
   );
 }
 
-// StyleSheet for styling components
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#f8f0fc',
     padding: 20,
   },
+  banner:{},
+  headerText:{},
+  
   splashContainer: {
     flex: 1,
     justifyContent: "center",
@@ -273,8 +288,8 @@ const styles = StyleSheet.create({
     overflow: "hidden",
   },
   camera: {
-    width: "80%",
+    width: '100%',
-    height: "60%",
+    height: '100%',
   },
   button: {
     backgroundColor: '#333',
@@ -305,6 +320,48 @@ const styles = StyleSheet.create({
     textAlign: "center",
     fontSize: 20,
     marginVertical: 10,
-    color: "black", 
+    color: "black",
   },
+  tabBar: {
+    position: 'absolute',
+    bottom: 20,
+    left: 20,
+    right: 20,
+    height: 70,
+    borderRadius: 35,
+    backgroundColor: '#fff',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 10,
+    elevation: 5,
+  },
+  tabButton: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  floatingButton: {
+    position: 'absolute',
+    bottom: 30,
+    left: '50%', // Position from the left
+    marginLeft: -30, // Half of the button width to center it
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#673ab7',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 5,
+    elevation: 3,
+  },
+
+
+
 });