From 7e0e9ec1bb8a41b90df8d16caa0867d32bcd65a9 Mon Sep 17 00:00:00 2001
From: Iskubee <iskandershah_ss43@hotmail.com>
Date: Mon, 10 Jun 2024 21:54:22 +0800
Subject: [PATCH] fixed warning in all tsx file except for CameraView.tsx

---
 components/CustomTabBar.tsx | 54 ++++++++++++++++++++++---------------
 screens/HistoryScreen.tsx   |  4 ++-
 screens/QRScannerScreen.tsx |  2 +-
 screens/SettingsScreen.tsx  |  6 ++++-
 4 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/components/CustomTabBar.tsx b/components/CustomTabBar.tsx
index 7dcae26..e73bd4f 100644
--- a/components/CustomTabBar.tsx
+++ b/components/CustomTabBar.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { Ionicons } from '@expo/vector-icons';
 
-// Custom tab bar component
-const CustomTabBar = ({ state, descriptors, navigation }) => {
+// Custom tab bar component with typings
+const CustomTabBar: React.FC<BottomTabBarProps> = ({ 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
@@ -15,14 +15,14 @@ const CustomTabBar = ({ state, descriptors, navigation }) => {
             ? options.title
             : route.name;
 
-        // Check if the current route is focused
         const isFocused = state.index === index;
 
-        // Define the onPress behavior for each tab button
+        // Event handler for tab press
         const onPress = () => {
           const event = navigation.emit({
             type: 'tabPress',
             target: route.key,
+            canPreventDefault: true
           });
 
           if (!isFocused && !event.defaultPrevented) {
@@ -30,7 +30,7 @@ const CustomTabBar = ({ state, descriptors, navigation }) => {
           }
         };
 
-        // Define the onLongPress behavior for each tab button
+        // Event handler for tab long press
         const onLongPress = () => {
           navigation.emit({
             type: 'tabLongPress',
@@ -38,7 +38,6 @@ const CustomTabBar = ({ state, descriptors, navigation }) => {
           });
         };
 
-        // 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 (
@@ -52,17 +51,18 @@ const CustomTabBar = ({ state, descriptors, navigation }) => {
             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>
+            {/* Check if label is a string before rendering */}
+            {typeof label === 'string' ? (
+              <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
+                {label}
+              </Text>
+            ) : null}
           </TouchableOpacity>
         );
       })}
-      {/* Floating button to navigate directly to QR Scanner */}
-      <View style={styles.floatingButton}>
-        <TouchableOpacity onPress={() => { navigation.navigate('QR Scanner'); }}>
+      <View style={styles.floatingButtonContainer}>
+        <TouchableOpacity style={styles.floatingButton} onPress={() => { navigation.navigate('QR Scanner'); }}>
           <Ionicons name="camera" size={28} color="#fff" />
         </TouchableOpacity>
       </View>
@@ -93,22 +93,32 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  floatingButton: {
+  floatingButtonContainer: {
     position: 'absolute',
-    bottom: 30,
+    top: -30,
     left: '50%',
-    marginLeft: -30,
+    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: {
     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/HistoryScreen.tsx b/screens/HistoryScreen.tsx
index 91f2663..9b071e3 100644
--- a/screens/HistoryScreen.tsx
+++ b/screens/HistoryScreen.tsx
@@ -3,8 +3,10 @@ import { View, Text, StyleSheet, FlatList } from 'react-native';
 import { QRCodeContext } from '../types';
 
 const HistoryScreen: React.FC = () => {
-  const { qrCodes } = useContext(QRCodeContext);
+  const qrCodeContext = useContext(QRCodeContext);
 
+  // Safely access qrCodes and handle the case when the context is null
+  const qrCodes = qrCodeContext ? qrCodeContext.qrCodes : [];
   return (
     <View style={styles.container}>
       <Text style={styles.welcomeText}>History Screen</Text>
diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx
index d77b7a6..d201852 100644
--- a/screens/QRScannerScreen.tsx
+++ b/screens/QRScannerScreen.tsx
@@ -109,7 +109,7 @@ const QRScannerScreen: React.FC = () => {
   return (
     <View style={styles.container}>
       <View style={styles.banner}>
-        <Text style={styles.headerText}>SafeQR</Text>
+        <Text style={styles.headerText}>SafeQR v0.16</Text>
       </View>
       <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
       <View style={styles.cameraContainer}>
diff --git a/screens/SettingsScreen.tsx b/screens/SettingsScreen.tsx
index fc1e63e..8b2638b 100644
--- a/screens/SettingsScreen.tsx
+++ b/screens/SettingsScreen.tsx
@@ -3,8 +3,12 @@ import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { QRCodeContext } from '../types';
 
 const SettingsScreen: React.FC = () => {
-  const { setQrCodes } = useContext(QRCodeContext);
+  const qrCodeContext = useContext(QRCodeContext);
 
+  // Safely access setQrCodes and handle the case when the context is null
+  const setQrCodes = qrCodeContext ? qrCodeContext.setQrCodes : () => {};
+
+  
   const clearHistory = () => {
     setQrCodes([]);
   };