From 9d878640c0f70d6a67b7c52d3c0538de21e8e503 Mon Sep 17 00:00:00 2001 From: iskubee Date: Fri, 7 Jun 2024 13:30:44 +0800 Subject: [PATCH] Minimum scanning app with UI --- App.tsx | 114 ++++++++-- package-lock.json | 569 +++++++++++++++++++++++++++++++++------------- package.json | 14 +- 3 files changed, 513 insertions(+), 184 deletions(-) diff --git a/App.tsx b/App.tsx index 91f8d7f..5af7865 100644 --- a/App.tsx +++ b/App.tsx @@ -1,16 +1,22 @@ -import React, { useState, useEffect } from "react"; -import { Text, View, StyleSheet, Button, ActivityIndicator } from "react-native"; -import { CameraView, Camera } from "expo-camera"; +import React, { useState, useEffect } from 'react'; +import { Text, View, StyleSheet, Button, ActivityIndicator } 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'; -export default function App() { +const Tab = createBottomTabNavigator(); + +function QRScannerScreen() { const [hasPermission, setHasPermission] = useState(null); const [scanned, setScanned] = useState(false); const [showSplash, setShowSplash] = useState(true); + const [scannedData, setScannedData] = useState(''); useEffect(() => { const initializeApp = async () => { const { status } = await Camera.requestCameraPermissionsAsync(); - setHasPermission(status === "granted"); + setHasPermission(status === 'granted'); setShowSplash(false); }; @@ -19,6 +25,7 @@ export default function App() { const handleBarCodeScanned = ({ type, data }) => { setScanned(true); + setScannedData(`Type: ${type}\nData: ${data}`); alert(`Bar code with type ${type} and data ${data} has been scanned!`); }; @@ -39,34 +46,25 @@ export default function App() { return ( - {/* Top Banner */} SafeQR - - {/* Welcome Text */} Welcome to SafeQR code Scanner - - {/* Camera Container */} - - {/* Scan Again Button */} - {scanned && ( -