Fix cameraContainer Size

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 (
     <View style={styles.container}>
-
-       {/* Header banner */}
       <View style={styles.banner}>
         <Text style={styles.headerText}>SafeQR</Text>
       </View>
-
-      {/* Welcome message */}
       <Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
-
-      {/* Camera view container */}
       <View style={styles.cameraContainer}>
         <CameraView
           onBarcodeScanned={scanned ? undefined : handleQRCodeSanned}
@@ -135,8 +129,6 @@ const QRScannerScreen: React.FC = () => {
           style={styles.camera}
         />
       </View>
-
-      {/* Display scanned data */}
       {scannedData !== '' && (
         <View style={styles.dataBox}>
           <Text style={styles.dataText}>{scannedData}</Text>
@@ -147,8 +139,6 @@ const QRScannerScreen: React.FC = () => {
   );
 };
 
-
-// Component for History Screen
 function HistoryScreen() {
   const { qrCodes } = useContext(QRCodeContext);
 
@@ -156,24 +146,24 @@ function HistoryScreen() {
     <View style={styles.container}>
       <Text style={styles.welcomeText}>History Screen</Text>
       <FlatList
-        data={qrCodes} // Data for FlatList
+        data={qrCodes}
         renderItem={({ item }) => (
           <View style={styles.dataBox}>
             <Text style={styles.dataText}>{item}</Text>
           </View>
         )}
-        keyExtractor={(item, index) => index.toString()} // Key extractor for FlatList
+        keyExtractor={(item, index) => index.toString()}
       />
     </View>
   );
 }
 
-
-// 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 (
     <View style={styles.container}>
@@ -185,7 +175,6 @@ function SettingsScreen() {
   );
 }
 
-// Component for Profile Screen
 function ProfileScreen() {
   return (
     <View style={styles.container}>
@@ -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 (
           <TouchableOpacity
@@ -258,16 +244,8 @@ const CustomTabBar = ({ state, descriptors, navigation }) => {
   );
 };
 
-
-
-
-
-
-
-
-// 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 (
     <QRCodeContext.Provider value={{ qrCodes, setQrCodes }}>
@@ -311,7 +289,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   cameraContainer: {
-    flex: 1,
+    height: '60%', 
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 10,

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",

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",