Reputation: 61
The first scan works fine, but as soon as I tap the scan button to set the state to false to be able to scan again, the handleBarcodeScanned
gets invoked for second and time with the previous barcode.
here is my code that used to be working with Camera component from SDK 50:
import * as React from 'react';
import { useState, useEffect } from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import AppButton from '../components/AppButton';
import colors from '../../config/colors';
import { CameraView, Camera, useCameraPermissions } from 'expo-camera';
import Screen from '../components/Screen';
import Constants from 'expo-constants';
import localization from '../i18n/setUpLocalization';
function ScanScreen() {
const [permission, requestPermission] = useCameraPermissions();
const [scanned, setScanned] = useState(false);
useEffect(() => {
requestPermission()
}, []);
const handleBarcodeScanned = ({ type, data }) => {
setScanned(true);
alert(`barcode with type ${type} and data ${data} has been scanned!`);
}
if (!permission) {
//Camera permissions are still loading.
return <View />;
}
if (!permission.granted) {
return (
<View style={styles.container}>
<Text style={{ textAlign: 'center' }}>We need your permission to show the camera</Text>
<Button onPress={requestPermission} title="grant permission" />
</View>
);
}
return (
<Screen style={styles.container}>
<CameraView
style={styles.camera}
onBarcodeScanned={scanned ? undefined : handleBarcodeScanned}>
<View style={styles.showContainer}>
</View>
{scanned &&
<View style={[styles.resultContainer, { backgroundColor: 'green' }]}>
<View>
<AppButton title={localization.t('scan')} onPress={() => setScanned(false)} />
</View>
</View>
}
</CameraView>
</Screen>
);
}
const styles = StyleSheet.create({
barcodeTotalInfo: {
flexDirection:"row",
marginRight: 120,
marginBottom: 10
},
bottomBar: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
height: 50,
backgroundColor: colors.light,
opacity: 0.5,
},
button: {
flex: 1,
alignSelf: 'flex-end',
alignItems: 'center',
},
buttonContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'transparent',
margin: 64,
},
camera: {
flex: 1,
},
container: {
flex: 1,
// opacity: 1,
flexDirection: 'column',
// justifyContent: 'center',
backgroundColor: 'red',
},
resultContainer: {
flex: 1,
opacity: 0.7,
justifyContent: 'center',
alignContent: 'center',
},
resultSymbole: {
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center',
marginTop: 5,
},
resultInfo: {
opacity: 0.8,
justifyContent: 'center',
},
resultTitle: {
color: colors.white,
fontSize: 20,
marginBottom: 10,
},
showContainer: {
backgroundColor: colors.primary,
opacity: 0.9,
paddingTop: Constants.statusBarHeight,
height: 70,
},
scanModeContainer:{
flexDirection: 'row',
marginBottom: 10,
},
showTitle: {
color: colors.white,
fontSize: 20,
top:-30,
},
statisticsContainer: {
// backgroundColor: "green",
marginLeft: 20
},
text: {
fontSize: 24,
fontWeight: 'bold',
color: 'white',
}
});
export default ScanScreen;
Please advice on how to fix? thank you in advance
Upvotes: 0
Views: 41