From 68c9e544c46f920e2ea07718575ab583e454718d Mon Sep 17 00:00:00 2001 From: Iskubee Date: Mon, 10 Jun 2024 00:29:40 +0800 Subject: [PATCH] Fix cameraContainer Size --- App.tsx | 48 +++++++++++++---------------------------------- package-lock.json | 20 ++++++++++++++++++++ package.json | 1 + 3 files changed, 34 insertions(+), 35 deletions(-) diff --git a/App.tsx b/App.tsx index 142a2bf..53aa0f5 100644 --- a/App.tsx +++ b/App.tsx @@ -2,7 +2,7 @@ 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'; // The icons used in the navigation bar +import { CameraView, Camera } from 'expo-camera'; import { Ionicons } from '@expo/vector-icons'; // Import Axios for HTTP requests for the VT API call import axios from 'axios'; // Create a Context for QR code data @@ -63,7 +63,7 @@ const QRScannerScreen: React.FC = () => { // Function to send data to VirusTotal and get the scan ID const scanWithVirusTotal = async (data: any) => { - const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; // 4/min , 500/day + const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251er'; // 4/min , 500/day const url = 'https://www.virustotal.com/vtapi/v2/url/scan'; const params = { apikey: apiKey, @@ -83,7 +83,7 @@ const QRScannerScreen: React.FC = () => { // Get the full list of scanned result based on scanID from // response above, Only want response.data.positive const getScanResult = async (scanId: Int32Array) => { - const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e'; + const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251er'; const url = 'https://www.virustotal.com/vtapi/v2/url/report'; const params = { apikey: apiKey, @@ -93,7 +93,7 @@ const QRScannerScreen: React.FC = () => { // The axios to handle URL stuff try { const response = await axios.get(url, { params }); - return response.data.positives; // Reture the value of positive: + return response.data.positives; // onlt } catch (error) { console.error('Error getting scan result:', error); throw error; @@ -118,16 +118,10 @@ const QRScannerScreen: React.FC = () => { return ( - - {/* Header banner */} SafeQR - - {/* Welcome message */} Welcome to SafeQR code Scanner - - {/* Camera view container */} { style={styles.camera} /> - - {/* Display scanned data */} {scannedData !== '' && ( {scannedData} @@ -147,8 +139,6 @@ const QRScannerScreen: React.FC = () => { ); }; - -// Component for History Screen function HistoryScreen() { const { qrCodes } = useContext(QRCodeContext); @@ -156,24 +146,24 @@ function HistoryScreen() { 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); - const clearHistory = () => {setQrCodes([]);}; // To clear History + const clearHistory = () => { + setQrCodes([]); + }; return ( @@ -185,7 +175,6 @@ function SettingsScreen() { ); } -// Component for Profile Screen function ProfileScreen() { return ( @@ -226,10 +215,7 @@ const CustomTabBar = ({ state, descriptors, navigation }) => { }); }; - // Set different icons for each tab - const iconName = route.name === 'QR Scanner' ? 'camera' - : route.name === 'History' ? 'time' - : route.name === 'Settings' ? 'settings' : 'person'; + const iconName = route.name === 'QR Scanner' ? 'camera' : route.name === 'History' ? 'time' : route.name === 'Settings' ? 'settings' : 'person'; return ( { ); }; - - - - - - - -// Main App component with bottom tab navigation export default function App() { - const [qrCodes, setQrCodes] = useState([]); // State to hold QR codes + const [qrCodes, setQrCodes] = useState([]); return ( @@ -311,7 +289,7 @@ const styles = StyleSheet.create({ marginBottom: 20, }, cameraContainer: { - flex: 1, + height: '60%', alignItems: "center", justifyContent: "center", borderRadius: 10, diff --git a/package-lock.json b/package-lock.json index ab7a101..22ee487 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "axios": "^1.7.2", "expo": "~51.0.11", "expo-camera": "~15.0.10", + "expo-image-picker": "~15.0.5", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.2", @@ -7557,6 +7558,25 @@ "expo": "*" } }, + "node_modules/expo-image-loader": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-4.7.0.tgz", + "integrity": "sha512-cx+MxxsAMGl9AiWnQUzrkJMJH4eNOGlu7XkLGnAXSJrRoIiciGaKqzeaD326IyCTV+Z1fXvIliSgNW+DscvD8g==", + "peerDependencies": { + "expo": "*" + } + }, + "node_modules/expo-image-picker": { + "version": "15.0.5", + "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-15.0.5.tgz", + "integrity": "sha512-Qqp16udsadx/YpNcNaWzfbmO0tbMxyX9bS1aFiDVC+Zffh8LY8S4HJJcnWqSC2TeuAl+9SxUwTloJagvPeMBBw==", + "dependencies": { + "expo-image-loader": "~4.7.0" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-keep-awake": { "version": "13.0.2", "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-13.0.2.tgz", diff --git a/package.json b/package.json index b5e67fa..3bc3b8e 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "axios": "^1.7.2", "expo": "~51.0.11", "expo-camera": "~15.0.10", + "expo-image-picker": "~15.0.5", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.2",