Untitled
unknown
plain_text
2 years ago
2.3 kB
7
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