added reset when press Scanbutton to clear dataBox

App.tsx

@@ -1,13 +1,36 @@
 import React, { useState } from 'react';
-import AppNavigator from './navigation/AppNavigator';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import QRScannerScreen from './screens/QRScannerScreen';
+import HistoryScreen from './screens/HistoryScreen';
+import SettingsScreen from './screens/SettingsScreen';
 import { QRCodeContext } from './types';
+import CustomTabBar from './components/CustomTabBar';
+
+const Tab = createBottomTabNavigator();
 
 const App: React.FC = () => {
   const [qrCodes, setQrCodes] = useState<string[]>([]);
+  const [scannedData, setScannedData] = useState<string>('');
+
+  const clearScanData = () => {
+    setScannedData('');
+  };
 
   return (
     <QRCodeContext.Provider value={{ qrCodes, setQrCodes }}>
-      <AppNavigator />
+      <NavigationContainer>
+        <Tab.Navigator
+          initialRouteName="QRScanner"
+          tabBar={(props) => <CustomTabBar {...props} clearScanData={clearScanData} />}
+        >
+          <Tab.Screen name="History" component={HistoryScreen} />
+          <Tab.Screen name="QRScanner">
+            {(props) => <QRScannerScreen {...props} clearScanData={clearScanData} />}
+          </Tab.Screen>
+          <Tab.Screen name="Settings" component={SettingsScreen} />
+        </Tab.Navigator>
+      </NavigationContainer>
     </QRCodeContext.Provider>
   );
 };

components/CustomTabBar.tsx

@@ -3,34 +3,49 @@ import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { Ionicons } from '@expo/vector-icons';
 
+
+// Define custom props for CustomTabBar
+interface CustomTabBarProps extends BottomTabBarProps {
+  clearScanData: () => void;
+}
+
+
 // Custom tab bar component with typings
-const CustomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => {
+const CustomTabBar: React.FC<CustomTabBarProps> =  ({ state, descriptors, navigation, clearScanData }) => {
   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
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
             ? options.title
             : route.name;
 
         const isFocused = state.index === index;
 
-        // Event handler for tab press
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true
-          });
+     // Event handler for tab press
+     const onPress = () => {
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: route.key,
+        canPreventDefault: true
+      });
 
           if (!isFocused && !event.defaultPrevented) {
             navigation.navigate(route.name);
           }
+
+          if (route.name === 'QRScanner') {
+            clearScanData();
+            navigation.reset({
+              index: 0,
+              routes: [{ name: 'QRScanner' }],
+            });
+          }
         };
 
-        // Event handler for tab long press
         const onLongPress = () => {
           navigation.emit({
             type: 'tabLongPress',
@@ -38,7 +53,7 @@ const CustomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
           });
         };
 
-        const iconName = route.name === 'QR Scanner' ? 'camera' : route.name === 'History' ? 'time' : route.name === 'Settings' ? 'settings' : 'person';
+        const iconName = route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings';
 
         return (
           <TouchableOpacity
@@ -51,7 +66,7 @@ const CustomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
             onLongPress={onLongPress}
             style={styles.tabButton}
           >
-            <Ionicons name={iconName} size={24} color={isFocused ? '#673ab7' : '#222'} />
+           <Ionicons name={iconName} size={24} color={isFocused ? '#673ab7' : '#222'} />
             {/* Check if label is a string before rendering */}
             {typeof label === 'string' ? (
               <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
@@ -61,8 +76,14 @@ const CustomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
           </TouchableOpacity>
         );
       })}
-      <View style={styles.floatingButtonContainer}>
-        <TouchableOpacity style={styles.floatingButton} onPress={() => { navigation.navigate('QR Scanner'); }}>
+      <View style={styles.floatingButton}>
+        <TouchableOpacity onPress={() => { 
+          clearScanData();
+          navigation.reset({
+            index: 0,
+            routes: [{ name: 'QRScanner' }],
+          });
+        }}>
           <Ionicons name="camera" size={28} color="#fff" />
         </TouchableOpacity>
       </View>
@@ -93,32 +114,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  floatingButtonContainer: {
-    position: 'absolute',
-    top: -30,
-    left: '50%',
-    marginLeft: -35,
-    width: 70,
-    height: 70,
-    borderRadius: 35,
-    backgroundColor: '#fff',
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOpacity: 0.2,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 5,
-    elevation: 3,
-    borderWidth: 3,
-    borderColor: '#673ab7',
-  },
   floatingButton: {
+    position: 'absolute',
+    bottom: 30,
+    left: '50%',
+    marginLeft: -30,
     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,
   },
 });
 

screens/QRScannerScreen.tsx

@@ -4,8 +4,15 @@ import { CameraView, Camera } from 'expo-camera';
 import { QRCodeContext } from '../types';
 import axios from 'axios';
 import { Ionicons } from '@expo/vector-icons';
+import { useNavigation } from '@react-navigation/native';
 
-const QRScannerScreen: React.FC = () => {
+// Define the props for QRScannerScreen
+interface QRScannerScreenProps {
+  clearScanData: () => void;
+}
+
+const QRScannerScreen: React.FC<QRScannerScreenProps> = ({ clearScanData }) => {
+  const navigation = useNavigation();
   const qrCodeContext = useContext(QRCodeContext);
   const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} };
   const [hasPermission, setHasPermission] = useState<boolean | null>(null);
@@ -95,6 +102,20 @@ const QRScannerScreen: React.FC = () => {
     }
   };
 
+  const clearScanDataInternal = () => {
+    setScannedData('');
+    setScanResult(null);
+    setScanned(false);
+    setDataType('');
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      clearScanDataInternal();
+    });
+    return unsubscribe;
+  }, [navigation]);
+  
   if (showSplash) {
     return (
       <View style={styles.splashContainer}>
@@ -116,7 +137,7 @@ const QRScannerScreen: React.FC = () => {
   return (
     <View style={styles.container}>
       <View style={styles.banner}>
-        <Text style={styles.headerText}>SafeQR v0.35</Text>
+        <Text style={styles.headerText}>SafeQR v0.55</Text>
       </View>
       <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
       <View style={styles.cameraContainer}>