ROUISSI Mohamed ALi
ROUISSI Mohamed ALi

Reputation: 61

CameraView from expo SDK 51 on react native, onBarcodeScanned invoked more than once when with old barcode data

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

Answers (0)

Related Questions