overhaull of project sturcture, segregated screens and components

components/CameraView.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Camera } from 'expo-camera';
+import { View, StyleSheet } from 'react-native';
+
+interface CameraViewProps {
+  onBarcodeScanned?: (data: any) => void;
+  barcodeScannerSettings?: any;
+  style?: any;
+}
+
+const CameraView: React.FC<CameraViewProps> = ({ onBarcodeScanned, barcodeScannerSettings, style }) => {
+  return (
+    <View style={style}>
+      <Camera
+        style={StyleSheet.absoluteFillObject}
+        onBarCodeScanned={onBarcodeScanned}
+        barCodeScannerSettings={barcodeScannerSettings}
+      />
+    </View>
+  );
+};
+
+export default CameraView;

components/CustomTabBar.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+// Custom tab bar component
+const CustomTabBar = ({ state, descriptors, navigation }) => {
+  return (
+    <View style={styles.tabBar}>
+      {/* Iterate through each route in the state to render tab buttons */}
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const label = options.tabBarLabel !== undefined
+          ? options.tabBarLabel
+          : options.title !== undefined
+            ? options.title
+            : route.name;
+
+        // Check if the current route is focused
+        const isFocused = state.index === index;
+
+        // Define the onPress behavior for each tab button
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name);
+          }
+        };
+
+        // Define the onLongPress behavior for each tab button
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        // Determine the icon name based on the route name
+        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}
+          >
+            {/* Render the icon and label for each tab */}
+            <Ionicons name={iconName} size={24} color={isFocused ? '#673ab7' : '#222'} />
+            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
+              {label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+      {/* Floating button to navigate directly to QR Scanner */}
+      <View style={styles.floatingButton}>
+        <TouchableOpacity onPress={() => { navigation.navigate('QR Scanner'); }}>
+          <Ionicons name="camera" size={28} color="#fff" />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  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%',
+    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,
+  },
+});
+
+export default CustomTabBar;