Untitled
unknown
plain_text
a year ago
2.3 kB
6
Indexable
import React, { useState, useEffect } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; import { Camera } from 'expo-camera'; export default function App() { const [hasPermission, setHasPermission] = useState(null); const [scanned, setScanned] = useState(false); const [type, setType] = useState(Camera.Constants.Type.back); useEffect(() => { (async () => { const { status } = await Camera.requestCameraPermissionsAsync(); setHasPermission(status === 'granted'); })(); }, []); const handleBarCodeScanned = ({ type, data }) => { setScanned(true); alert(`Bar code with type ${type} and data ${data} has been scanned!`); }; if (hasPermission === null) { return <View style={styles.container}><Text>Requesting for camera permission</Text></View>; } if (hasPermission === false) { return <View style={styles.container}><Text>No access to camera</Text></View>; } return ( <View style={styles.container}> <Camera style={styles.camera} type={type} onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}> </Camera> {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />} <Button title={'Flip Camera'} onPress={() => { setType( type === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back ); }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', justifyContent: 'flex-end', }, camera: { flex: 1, } }); { "name": "gitfood-frontend", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/metro-runtime": "~3.1.3", "expo": "~50.0.14", "expo-camera": "^14.1.1", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.73.6", "react-native-web": "~0.19.6" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true }
Editor is loading...
Leave a Comment