overhaull of project sturcture, segregated screens and components
This commit is contained in:
378
App.tsx
378
App.tsx
@@ -1,377 +1,15 @@
|
|||||||
import React, { useState, useEffect, createContext, useContext } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Text, View, StyleSheet, ActivityIndicator, TouchableOpacity, FlatList } from 'react-native';
|
import AppNavigator from './navigation/AppNavigator';
|
||||||
import { NavigationContainer } from '@react-navigation/native';
|
import { QRCodeContext } from './types';
|
||||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
||||||
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
|
|
||||||
const QRCodeContext = createContext(null);
|
|
||||||
|
|
||||||
const Tab = createBottomTabNavigator();
|
const App: React.FC = () => {
|
||||||
|
const [qrCodes, setQrCodes] = useState<string[]>([]);
|
||||||
// Component for QR Scanner Screen
|
|
||||||
const QRScannerScreen: React.FC = () => {
|
|
||||||
const { qrCodes, setQrCodes } = useContext(QRCodeContext); // Access context
|
|
||||||
const [hasPermission, setHasPermission] = useState<boolean | null>(null); // State for camera permission
|
|
||||||
const [scanned, setScanned] = useState<boolean>(false); // State for scanned status
|
|
||||||
const [showSplash, setShowSplash] = useState<boolean>(true); // State for splash screen
|
|
||||||
const [scannedData, setScannedData] = useState<string>(''); // State for scanned data
|
|
||||||
const [scanResult, setScanResult] = useState<any>(null); // State for VirusTotal scan result
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const initializeApp = async () => {
|
|
||||||
const { status } = await Camera.requestCameraPermissionsAsync(); // Request camera permissions
|
|
||||||
setHasPermission(status === 'granted'); // Set permission status
|
|
||||||
setShowSplash(false); // Hide splash screen
|
|
||||||
};
|
|
||||||
|
|
||||||
initializeApp(); // Initialize app
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Function to handle barcode scanned event
|
|
||||||
const handleQRCodeSanned = async ({ type, data }: { type: string; data: string }) => {
|
|
||||||
setScanned(true);// Mark as scanned
|
|
||||||
|
|
||||||
// Determine the type of data (URL, text, or just numbers)
|
|
||||||
let dataType;
|
|
||||||
if (/^(http|https):\/\//.test(data)) {
|
|
||||||
dataType = 'URL';
|
|
||||||
} else if (/^[0-9]+$/.test(data)) {
|
|
||||||
dataType = 'Numbers';
|
|
||||||
} else {
|
|
||||||
dataType = 'Text';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Construct the scanned data with the data type
|
|
||||||
let newScannedData = `Type: ${dataType}\nData: ${data}`; // Initialize with type and 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
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error handling barcode scan:', error); // Handle error
|
|
||||||
}
|
|
||||||
|
|
||||||
setScannedData(newScannedData); // Save scanned data
|
|
||||||
setQrCodes([...qrCodes, newScannedData]); // Add scanned data to history
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function to send data to VirusTotal and get the scan ID
|
|
||||||
const scanWithVirusTotal = async (data: any) => {
|
|
||||||
const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251er'; // 4/min , 500/day
|
|
||||||
const url = 'https://www.virustotal.com/vtapi/v2/url/scan';
|
|
||||||
const params = {
|
|
||||||
apikey: apiKey,
|
|
||||||
url: data
|
|
||||||
};
|
|
||||||
|
|
||||||
// The axios to handle URL stuff
|
|
||||||
try {
|
|
||||||
const response = await axios.post(url, null, { params });
|
|
||||||
return response.data.scan_id; // Return scanID
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error scanning with VirusTotal:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 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 = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251er';
|
|
||||||
const url = 'https://www.virustotal.com/vtapi/v2/url/report';
|
|
||||||
const params = {
|
|
||||||
apikey: apiKey,
|
|
||||||
resource: scanId
|
|
||||||
};
|
|
||||||
|
|
||||||
// The axios to handle URL stuff
|
|
||||||
try {
|
|
||||||
const response = await axios.get(url, { params });
|
|
||||||
return response.data.positives; // onlt
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error getting scan result:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (showSplash) {
|
|
||||||
return (
|
|
||||||
<View style={styles.splashContainer}>
|
|
||||||
<ActivityIndicator size="large" color="#ff69b4" />
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasPermission === null) {
|
|
||||||
return <Text>Requesting for camera permission</Text>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasPermission === false) {
|
|
||||||
return <Text>No access to camera</Text>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<View style={styles.banner}>
|
|
||||||
<Text style={styles.headerText}>SafeQR</Text>
|
|
||||||
</View>
|
|
||||||
<Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
|
|
||||||
<View style={styles.cameraContainer}>
|
|
||||||
<CameraView
|
|
||||||
onBarcodeScanned={scanned ? undefined : handleQRCodeSanned}
|
|
||||||
barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
|
|
||||||
style={styles.camera}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
{scannedData !== '' && (
|
|
||||||
<View style={styles.dataBox}>
|
|
||||||
<Text style={styles.dataText}>{scannedData}</Text>
|
|
||||||
{scanResult && <Text style={styles.dataText}>{JSON.stringify(scanResult)}</Text>}
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function HistoryScreen() {
|
|
||||||
const { qrCodes } = useContext(QRCodeContext);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.welcomeText}>History Screen</Text>
|
|
||||||
<FlatList
|
|
||||||
data={qrCodes}
|
|
||||||
renderItem={({ item }) => (
|
|
||||||
<View style={styles.dataBox}>
|
|
||||||
<Text style={styles.dataText}>{item}</Text>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
keyExtractor={(item, index) => index.toString()}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SettingsScreen() {
|
|
||||||
const { setQrCodes } = useContext(QRCodeContext);
|
|
||||||
|
|
||||||
const clearHistory = () => {
|
|
||||||
setQrCodes([]);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.welcomeText}>Settings Screen</Text>
|
|
||||||
<TouchableOpacity style={styles.button} onPress={clearHistory}>
|
|
||||||
<Text style={styles.buttonText}>Clear History</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ProfileScreen() {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.welcomeText}>Profile Screen</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Custom Tab Bar Component
|
|
||||||
const CustomTabBar = ({ state, descriptors, navigation }) => {
|
|
||||||
return (
|
|
||||||
<View style={styles.tabBar}>
|
|
||||||
{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 (
|
|
||||||
<TouchableOpacity
|
|
||||||
key={index}
|
|
||||||
accessibilityRole="button"
|
|
||||||
accessibilityState={isFocused ? { selected: true } : {}}
|
|
||||||
accessibilityLabel={options.tabBarAccessibilityLabel}
|
|
||||||
testID={options.tabBarTestID}
|
|
||||||
onPress={onPress}
|
|
||||||
onLongPress={onLongPress}
|
|
||||||
style={styles.tabButton}
|
|
||||||
>
|
|
||||||
<Ionicons name={iconName} size={24} color={isFocused ? '#673ab7' : '#222'} />
|
|
||||||
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
|
|
||||||
{label}
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<View style={styles.floatingButton}>
|
|
||||||
<TouchableOpacity onPress={() => {navigation.navigate('QR Scanner');}}>
|
|
||||||
<Ionicons name="camera" size={28} color="#fff" />
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
const [qrCodes, setQrCodes] = useState([]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<QRCodeContext.Provider value={{ qrCodes, setQrCodes }}>
|
<QRCodeContext.Provider value={{ qrCodes, setQrCodes }}>
|
||||||
<NavigationContainer>
|
<AppNavigator />
|
||||||
<Tab.Navigator initialRouteName="QR Scanner" tabBar={props => <CustomTabBar {...props} />}>
|
|
||||||
<Tab.Screen name="History" component={HistoryScreen} />
|
|
||||||
<Tab.Screen name="QR Scanner" component={QRScannerScreen} />
|
|
||||||
<Tab.Screen name="Settings" component={SettingsScreen} />
|
|
||||||
</Tab.Navigator>
|
|
||||||
</NavigationContainer>
|
|
||||||
</QRCodeContext.Provider>
|
</QRCodeContext.Provider>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: '#f8f0fc',
|
|
||||||
padding: 20,
|
|
||||||
},
|
|
||||||
banner:{},
|
|
||||||
headerText:{},
|
|
||||||
|
|
||||||
splashContainer: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
backgroundColor: "#f8f0fc",
|
|
||||||
},
|
|
||||||
scanText: {
|
|
||||||
textAlign: "center",
|
|
||||||
fontSize: 24,
|
|
||||||
fontWeight: "bold",
|
|
||||||
color: "#ff69b4",
|
|
||||||
marginVertical: 10,
|
|
||||||
},
|
|
||||||
instructionText: {
|
|
||||||
textAlign: "center",
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#000",
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
cameraContainer: {
|
|
||||||
height: '60%',
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
borderRadius: 10,
|
|
||||||
overflow: "hidden",
|
|
||||||
},
|
|
||||||
camera: {
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
backgroundColor: '#333',
|
|
||||||
paddingHorizontal: 20,
|
|
||||||
paddingVertical: 10,
|
|
||||||
borderRadius: 30,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
marginVertical: 10,
|
|
||||||
},
|
|
||||||
buttonText: {
|
|
||||||
color: 'white',
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
dataBox: {
|
|
||||||
marginVertical: 10,
|
|
||||||
padding: 10,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
borderRadius: 5,
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
},
|
|
||||||
dataText: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#000",
|
|
||||||
},
|
|
||||||
welcomeText: {
|
|
||||||
textAlign: "center",
|
|
||||||
fontSize: 20,
|
|
||||||
marginVertical: 10,
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|||||||
23
components/CameraView.tsx
Normal file
23
components/CameraView.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Camera } from 'expo-camera';
|
||||||
|
import { View, StyleSheet } from 'react-native';
|
||||||
|
|
||||||
|
interface CameraViewProps {
|
||||||
|
onBarcodeScanned?: (data: any) => void;
|
||||||
|
barcodeScannerSettings?: any;
|
||||||
|
style?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CameraView: React.FC<CameraViewProps> = ({ onBarcodeScanned, barcodeScannerSettings, style }) => {
|
||||||
|
return (
|
||||||
|
<View style={style}>
|
||||||
|
<Camera
|
||||||
|
style={StyleSheet.absoluteFillObject}
|
||||||
|
onBarCodeScanned={onBarcodeScanned}
|
||||||
|
barCodeScannerSettings={barcodeScannerSettings}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CameraView;
|
||||||
115
components/CustomTabBar.tsx
Normal file
115
components/CustomTabBar.tsx
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
|
||||||
|
// Custom tab bar component
|
||||||
|
const CustomTabBar = ({ 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
|
||||||
|
? options.tabBarLabel
|
||||||
|
: options.title !== undefined
|
||||||
|
? options.title
|
||||||
|
: route.name;
|
||||||
|
|
||||||
|
// Check if the current route is focused
|
||||||
|
const isFocused = state.index === index;
|
||||||
|
|
||||||
|
// Define the onPress behavior for each tab button
|
||||||
|
const onPress = () => {
|
||||||
|
const event = navigation.emit({
|
||||||
|
type: 'tabPress',
|
||||||
|
target: route.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isFocused && !event.defaultPrevented) {
|
||||||
|
navigation.navigate(route.name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Define the onLongPress behavior for each tab button
|
||||||
|
const onLongPress = () => {
|
||||||
|
navigation.emit({
|
||||||
|
type: 'tabLongPress',
|
||||||
|
target: route.key,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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 (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={index}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityState={isFocused ? { selected: true } : {}}
|
||||||
|
accessibilityLabel={options.tabBarAccessibilityLabel}
|
||||||
|
testID={options.tabBarTestID}
|
||||||
|
onPress={onPress}
|
||||||
|
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>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{/* Floating button to navigate directly to QR Scanner */}
|
||||||
|
<View style={styles.floatingButton}>
|
||||||
|
<TouchableOpacity onPress={() => { navigation.navigate('QR Scanner'); }}>
|
||||||
|
<Ionicons name="camera" size={28} color="#fff" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
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%',
|
||||||
|
marginLeft: -30,
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default CustomTabBar;
|
||||||
30
navigation/AppNavigator.tsx
Normal file
30
navigation/AppNavigator.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { NavigationContainer } from '@react-navigation/native';
|
||||||
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||||
|
import QRScannerScreen from '../screens/QRScannerScreen';
|
||||||
|
import HistoryScreen from '../screens/HistoryScreen';
|
||||||
|
import SettingsScreen from '../screens/SettingsScreen';
|
||||||
|
import CustomTabBar from '../components/CustomTabBar';
|
||||||
|
|
||||||
|
// Create a bottom tab navigator
|
||||||
|
const Tab = createBottomTabNavigator();
|
||||||
|
|
||||||
|
// Main navigation component
|
||||||
|
const AppNavigator = () => {
|
||||||
|
return (
|
||||||
|
// Wrap the navigator in a NavigationContainer to manage the navigation tree
|
||||||
|
<NavigationContainer>
|
||||||
|
|
||||||
|
{/* Define the tab navigator with custom tab bar and initial route */}
|
||||||
|
<Tab.Navigator initialRouteName="QR Scanner" tabBar={props => <CustomTabBar {...props} />}>
|
||||||
|
|
||||||
|
{/* Define each tab with a name and corresponding component */}
|
||||||
|
<Tab.Screen name="History" component={HistoryScreen} />
|
||||||
|
<Tab.Screen name="QR Scanner" component={QRScannerScreen} />
|
||||||
|
<Tab.Screen name="Settings" component={SettingsScreen} />
|
||||||
|
</Tab.Navigator>
|
||||||
|
</NavigationContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AppNavigator;
|
||||||
50
screens/HistoryScreen.tsx
Normal file
50
screens/HistoryScreen.tsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import React, { useContext } from 'react';
|
||||||
|
import { View, Text, StyleSheet, FlatList } from 'react-native';
|
||||||
|
import { QRCodeContext } from '../types';
|
||||||
|
|
||||||
|
const HistoryScreen: React.FC = () => {
|
||||||
|
const { qrCodes } = useContext(QRCodeContext);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Text style={styles.welcomeText}>History Screen</Text>
|
||||||
|
<FlatList
|
||||||
|
data={qrCodes}
|
||||||
|
renderItem={({ item }) => (
|
||||||
|
<View style={styles.dataBox}>
|
||||||
|
<Text style={styles.dataText}>{item}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
keyExtractor={(item, index) => index.toString()}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#f8f0fc',
|
||||||
|
padding: 20,
|
||||||
|
},
|
||||||
|
welcomeText: {
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: 20,
|
||||||
|
marginVertical: 10,
|
||||||
|
color: 'black',
|
||||||
|
},
|
||||||
|
dataBox: {
|
||||||
|
marginVertical: 10,
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: 5,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
dataText: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default HistoryScreen;
|
||||||
185
screens/QRScannerScreen.tsx
Normal file
185
screens/QRScannerScreen.tsx
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
import React, { useState, useEffect, useContext } from 'react';
|
||||||
|
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
|
||||||
|
import { CameraView , Camera } from 'expo-camera';
|
||||||
|
import { QRCodeContext } from '../types';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// QR Scanner screen component
|
||||||
|
const QRScannerScreen: React.FC = () => {
|
||||||
|
const qrCodeContext = useContext(QRCodeContext);
|
||||||
|
const { qrCodes, setQrCodes } = qrCodeContext || { qrCodes: [], setQrCodes: () => {} };
|
||||||
|
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
|
||||||
|
const [scanned, setScanned] = useState<boolean>(false);
|
||||||
|
const [showSplash, setShowSplash] = useState<boolean>(true);
|
||||||
|
const [scannedData, setScannedData] = useState<string>('');
|
||||||
|
|
||||||
|
// Request camera permissions when the component mounts
|
||||||
|
useEffect(() => {
|
||||||
|
const initializeApp = async () => {
|
||||||
|
const { status } = await Camera.requestCameraPermissionsAsync();
|
||||||
|
setHasPermission(status === 'granted');
|
||||||
|
setShowSplash(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
initializeApp();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
|
// Handle the QR code scanned event
|
||||||
|
const handleQRCodeScanned = async ({ type, data }: { type: string; data: string }) => {
|
||||||
|
setScanned(true);
|
||||||
|
|
||||||
|
let dataType;
|
||||||
|
if (/^(http|https):\/\//.test(data)) {
|
||||||
|
dataType = 'URL';
|
||||||
|
} else if (/^[0-9]+$/.test(data)) {
|
||||||
|
dataType = 'Numbers';
|
||||||
|
} else {
|
||||||
|
dataType = 'Text';
|
||||||
|
}
|
||||||
|
|
||||||
|
let newScannedData = `Type: ${dataType}\nData: ${data}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const scanId = await scanWithVirusTotal(data);
|
||||||
|
const positive = await getScanResult(scanId);
|
||||||
|
newScannedData += `\nScore: ${positive}`;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error handling barcode scan:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
setScannedData(newScannedData);
|
||||||
|
setQrCodes([...qrCodes, newScannedData]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Send the scanned data to VirusTotal for scanning
|
||||||
|
const scanWithVirusTotal = async (data: any) => {
|
||||||
|
const apiKey = 'YOUR_VIRUSTOTAL_API_KEY';
|
||||||
|
const url = 'https://www.virustotal.com/vtapi/v2/url/scan';
|
||||||
|
const params = {
|
||||||
|
apikey: apiKey,
|
||||||
|
url: data,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.post(url, null, { params });
|
||||||
|
return response.data.scan_id;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error scanning with VirusTotal:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get the scan result from VirusTotal using the scan ID
|
||||||
|
const getScanResult = async (scanId: string) => {
|
||||||
|
const apiKey = 'YOUR_VIRUSTOTAL_API_KEY';
|
||||||
|
const url = 'https://www.virustotal.com/vtapi/v2/url/report';
|
||||||
|
const params = {
|
||||||
|
apikey: apiKey,
|
||||||
|
resource: scanId,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.get(url, { params });
|
||||||
|
return response.data.positives;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error getting scan result:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (showSplash) {
|
||||||
|
return (
|
||||||
|
<View style={styles.splashContainer}>
|
||||||
|
<ActivityIndicator size="large" color="#ff69b4" />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasPermission === null) {
|
||||||
|
return <Text>Requesting for camera permission</Text>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasPermission === false) {
|
||||||
|
return <Text>No access to camera</Text>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<View style={styles.banner}>
|
||||||
|
<Text style={styles.headerText}>SafeQR</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
|
||||||
|
<View style={styles.cameraContainer}>
|
||||||
|
|
||||||
|
{/* Render the CameraView component for QR scanning */}
|
||||||
|
<CameraView
|
||||||
|
onBarcodeScanned={scanned ? undefined : handleQRCodeScanned}
|
||||||
|
barcodeScannerSettings={{ barcodeTypes: ['qr', 'pdf417'] }}
|
||||||
|
style={styles.camera}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
{scannedData !== '' && (
|
||||||
|
<View style={styles.dataBox}>
|
||||||
|
<Text style={styles.dataText}>{scannedData}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#f8f0fc',
|
||||||
|
padding: 20,
|
||||||
|
},
|
||||||
|
banner: {
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
headerText: {
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#ff69b4',
|
||||||
|
},
|
||||||
|
splashContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#f8f0fc',
|
||||||
|
},
|
||||||
|
cameraContainer: {
|
||||||
|
height: '60%',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
borderRadius: 10,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
camera: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
dataBox: {
|
||||||
|
marginVertical: 10,
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: 5,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
dataText: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
welcomeText: {
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: 20,
|
||||||
|
marginVertical: 10,
|
||||||
|
color: 'black',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default QRScannerScreen;
|
||||||
49
screens/SettingsScreen.tsx
Normal file
49
screens/SettingsScreen.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import React, { useContext } from 'react';
|
||||||
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
||||||
|
import { QRCodeContext } from '../types';
|
||||||
|
|
||||||
|
const SettingsScreen: React.FC = () => {
|
||||||
|
const { setQrCodes } = useContext(QRCodeContext);
|
||||||
|
|
||||||
|
const clearHistory = () => {
|
||||||
|
setQrCodes([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Text style={styles.welcomeText}>Settings Screen</Text>
|
||||||
|
<TouchableOpacity style={styles.button} onPress={clearHistory}>
|
||||||
|
<Text style={styles.buttonText}>Clear History</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#f8f0fc',
|
||||||
|
padding: 20,
|
||||||
|
},
|
||||||
|
welcomeText: {
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: 20,
|
||||||
|
marginVertical: 10,
|
||||||
|
color: 'black',
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
backgroundColor: '#333',
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
paddingVertical: 10,
|
||||||
|
borderRadius: 30,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginVertical: 10,
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
color: 'white',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default SettingsScreen;
|
||||||
Reference in New Issue
Block a user