diff --git a/App.tsx b/App.tsx index 95521f6..c735d33 100644 --- a/App.tsx +++ b/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([]); + const [scannedData, setScannedData] = useState(''); + + const clearScanData = () => { + setScannedData(''); + }; return ( - + + } + > + + + {(props) => } + + + + ); }; diff --git a/components/CustomTabBar.tsx b/components/CustomTabBar.tsx index e73bd4f..1ff2a8b 100644 --- a/components/CustomTabBar.tsx +++ b/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 = ({ state, descriptors, navigation }) => { +const CustomTabBar: React.FC = ({ state, descriptors, navigation, clearScanData }) => { return ( {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 = ({ 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 ( = ({ state, descriptors, navigat onLongPress={onLongPress} style={styles.tabButton} > - + {/* Check if label is a string before rendering */} {typeof label === 'string' ? ( @@ -61,8 +76,14 @@ const CustomTabBar: React.FC = ({ state, descriptors, navigat ); })} - - { navigation.navigate('QR Scanner'); }}> + + { + clearScanData(); + navigation.reset({ + index: 0, + routes: [{ name: 'QRScanner' }], + }); + }}> @@ -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, }, }); diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index e4a535a..a427ab6 100644 --- a/screens/QRScannerScreen.tsx +++ b/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 = ({ clearScanData }) => { + const navigation = useNavigation(); const qrCodeContext = useContext(QRCodeContext); const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} }; const [hasPermission, setHasPermission] = useState(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 ( @@ -116,7 +137,7 @@ const QRScannerScreen: React.FC = () => { return ( - SafeQR v0.35 + SafeQR v0.55 Welcome to SafeQR code Scanner