From 1363b245d7ac504bd2524aee6133aa5ec70e8d14 Mon Sep 17 00:00:00 2001 From: Iskubee Date: Sun, 9 Jun 2024 23:13:10 +0800 Subject: [PATCH] NavBar Done, Need to fix setScanned(false) --- App.tsx | 263 ++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 160 insertions(+), 103 deletions(-) diff --git a/App.tsx b/App.tsx index bbb7692..5b12b90 100644 --- a/App.tsx +++ b/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 { Ionicons } from '@expo/vector-icons'; // The icons used in the navigation bar -import axios from 'axios'; // Import Axios for HTTP requests for the VT API call +import { CameraView, Camera } from 'expo-camera'; +import { Ionicons } from '@expo/vector-icons'; +import axios from 'axios'; - -// Create a Context for QR code data -const QRCodeContext = createContext(); +const QRCodeContext = createContext(null); const Tab = createBottomTabNavigator(); -// Component for QR Scanner Screen -function QRScannerScreen() { - const { qrCodes, setQrCodes } = useContext(QRCodeContext); // Access context - const [hasPermission, setHasPermission] = useState(null); // State for camera permission - const [scanned, setScanned] = useState(false); // State for scanned status - const [showSplash, setShowSplash] = useState(true); // State for splash screen - const [scannedData, setScannedData] = useState(''); // State for scanned data - const [scanResult, setScanResult] = useState(null); // State for VirusTotal scan result + +const QRScannerScreen: React.FC = () => { + const { qrCodes, setQrCodes } = useContext(QRCodeContext); + const [hasPermission, setHasPermission] = useState(null); + const [scanned, setScanned] = useState(false); + const [showSplash, setShowSplash] = useState(true); + const [scannedData, setScannedData] = useState(''); + const [scanResult, setScanResult] = useState(null); + useEffect(() => { const initializeApp = async () => { - const { status } = await Camera.requestCameraPermissionsAsync(); // Request camera permissions - setHasPermission(status === 'granted'); // Set permission status - setShowSplash(false); // Hide splash screen + const { status } = await Camera.requestCameraPermissionsAsync(); + setHasPermission(status === 'granted'); + 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}`; // Initialize with type and data + let newScannedData = `Type: ${dataType}\nData: ${data}`; try { - const scanId = await scanWithVirusTotal(data); // Send data to VirusTotal and get scan ID - const positive = await getScanResult(scanId); // Get scan result and extract positive score - newScannedData += `\nScore: ${positive}`; // Append positive score to newScannedData + const scanId = await scanWithVirusTotal(data); + const positive = await getScanResult(scanId); + 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 - setQrCodes([...qrCodes, newScannedData]); // Add scanned data to history + setScannedData(newScannedData); + setQrCodes([...qrCodes, newScannedData]); }; -// Function to send data to VirusTotal and get the scan ID - const scanWithVirusTotal = async (data) => { - const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; // Replace with your VirusTotal API key + const scanWithVirusTotal = async (data: any) => { + const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; 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 - return response.data.scan_id; // Return scan ID + const response = await axios.post(url, null, { params }); + return response.data.scan_id; } catch (error) { - console.error('Error scanning with VirusTotal:', error); // Handle error - throw error; // Propagate error + console.error('Error scanning with VirusTotal:', error); + throw error; } }; -// Function to get scan result from VirusTotal and return the positive score - const getScanResult = async (scanId) => { - const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; // Replace with your VirusTotal API key + const getScanResult = async (scanId: Int32Array) => { + const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; 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 - return response.data.positives; // Return positive score + const response = await axios.get(url, { params }); + return response.data.positives; } catch (error) { - console.error('Error getting scan result:', error); // Handle error - throw error; // Propagate error + console.error('Error getting scan result:', error); + throw error; } }; @@ -114,66 +110,49 @@ function QRScannerScreen() { return ( - {/* Header banner */} SafeQR - {/* Welcome message */} Welcome to SafeQR code Scanner - {/* Camera view container */} - {/* Display scanned data */} {scannedData !== '' && ( {scannedData} {scanResult && {JSON.stringify(scanResult)}} )} - {/* Button to scan again */} - {scanned && ( - setScanned(false)}> - Tap to Scan Again - - )} - {/* Menu (Placeholder for additional menu items) */} - - {/* Your existing menu items */} - ); -} +}; -// Component for History Screen function HistoryScreen() { - const { qrCodes } = useContext(QRCodeContext); // Access context + const { qrCodes } = useContext(QRCodeContext); return ( History Screen ( {item} )} - keyExtractor={(item, index) => index.toString()} // Key extractor for FlatList + keyExtractor={(item, index) => index.toString()} /> ); } -// 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 ( @@ -197,55 +175,92 @@ function ProfileScreen() { ); } -// Main App component with bottom tab navigation +// Custom Tab Bar Component +const CustomTabBar = ({ state, descriptors, navigation }) => { + return ( + + {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 ( + + + + {label} + + + ); + })} + + {navigation.navigate('QR Scanner');}}> + + + + + ); +}; + export default function App() { - const [qrCodes, setQrCodes] = useState([]); // State to hold QR codes + const [qrCodes, setQrCodes] = useState([]); return ( - ({ - 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 ; - }, - })} - tabBarOptions={{ - activeTintColor: 'tomato', // Active tab color - inactiveTintColor: 'gray', // Inactive tab color - }} - > - + }> + - ); } -// 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%", - height: "60%", + width: '100%', + 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, + }, + + + });