The code from the camera is scanned several times in a row. (React Native)

Hi. I’m developing an application in react-native.
I implemented a code scanner using expo-camera. Everything works fine. But when scanning, I have 3-5 codes displayed in the console at once in a millisecond. Why does the camera scan several times in a millisecond at once and how to get rid of it??? When I have an invalid code scanned, a toast notification appears, but it appears as many times as the code was scanned unsuccessfully. Accordingly, the vibration in case of unsuccessful scanning is triggered from 3 to 5 times. How do I do a scan once?? Scan once and close the scanner.

export default function QRScannerCamera({ navigation }) {
    const toggleFlashlight = () => {
        setIsFlashlightOn(!isFlashlightOn);
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    };

    const getSIFromTheDatabaseByCode = async (barcodeData) => {
        if (!apiUrl || !scannedText) {
            console.error("apiUrl or text is missing.");
            return;
        }

        setLoading(true);

        try {
            const response = await fetch(`${localAdres}/code/${barcodeData}`);
            if (!response.ok) {
                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
                setDataFromServer([]);
                return;
            }
            const json = await response.json();
            if (!json) {
                console.error("Err");
                setDataFromServer([]);
                return;
            }
            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
            setDataFromServer(json);
            return Object.keys(json).length > 0;
        } catch (error) {
            console.error("An error occurred during the request", error);
            return false;
        } finally {
            setLoading(false);
        }
    };

    const handleBarCodeScanned = async ({ type, data }) => {
        setScannedText(data);
        console.log("NEW code scanned, Type: " + type + " Data: " + data + "Time scan: " + new Date());

        try {
            const result = await getSIFromTheDatabaseByCode(data);
            if (result) {
                setIsFlashlightOn(false);
                setIsModalVisible(true);
            } else {
                navigation.navigate("Scanner Stack");
                ToastAndroid.show("No data!", ToastAndroid.SHORT);
            }
        } catch (error) {
            ToastAndroid.show("Err!", ToastAndroid.SHORT);
        }
    };

    return (
        <View style={{ flex: 1, justifyContent: "center" }}>
            {isCameraVisible && !isModalVisible ? (
                <Camera
                    onBarCodeScanned={handleBarCodeScanned}
                    style={{ flex: 1 }}
                    ratio="16:9"
                    type={Camera.Constants.Type.back}
                    flashMode={isFlashlightOn ? FlashMode.torch : FlashMode.off}
                />
            ) : null}

            <View style={[styles.headerQRScanner, { top: 30 + top }]}>
                <BlurView
                    style={{
                        paddingHorizontal: 16,
                        paddingVertical: 20,
                        marginBottom: 130,
                        borderRadius: 16,
                        overflow: "hidden",
                        justifyContent: "center",
                        alignItems: "center",
                    }}
                    intensity={80}
                    tint="dark"
                >
                    <Text style={{ color: "#fff", backgroundColor: "transparent", textAlign: "center", fontSize: 16, fontWeight: "500" }}>
                        Scan
                    </Text>
                </BlurView>
                <QRIndicator />
            </View>

    );
}

LOGS:

LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Tue Oct 24 2023 16:34:08 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Tue Oct 24 2023 16:34:08 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Tue Oct 24 2023 16:34:08 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Tue Oct 24 2023 16:34:08 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Tue Oct 24 2023 16:34:08 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Tue Oct 24 2023 16:34:08 GMT+0300

At 16:34:08, the code was scanned 6 times in one millisecond

One of the BarCodeScanner options is interval, so you can tell it how often to scan.

Also think about manually turning it on in that code, then onBarCodeScanned, turn it off as you don’t now need the camera running, you just need to analyse the picture.

1 Like

this property does not work. I tried adding it earlier

<Camera
                    barCodeScannerSettings={{ interval: 50 }}
                    onBarCodeScanned={handleBarCodeScanned}
                    style={{ flex: 1 }}
                    ratio="16:9"
                    type={Camera.Constants.Type.back}
                    flashMode={isFlashlightOn ? FlashMode.torch : FlashMode.off}
                />

I even tried increasing the time. Nothing helps. Your camera also scans and vibrates several times per millisecond.

 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Wed Nov 01 2023 15:36:24 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Wed Nov 01 2023 15:36:24 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Wed Nov 01 2023 15:36:24 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Wed Nov 01 2023 15:36:24 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Wed Nov 01 2023 15:36:28 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Wed Nov 01 2023 15:36:28 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Wed Nov 01 2023 15:36:28 GMT+0300
 LOG  NEW code scanned, Type: 256 Data: 044922Time scan: Wed Nov 01 2023 15:36:28 GMT+0300
 <Camera
                    barCodeScannerSettings={{ interval: 5000000 }}
                    onBarCodeScanned={handleBarCodeScanned}
                    style={{ flex: 1 }}
                    ratio="16:9"
                    type={Camera.Constants.Type.back}
                    flashMode={isFlashlightOn ? FlashMode.torch : FlashMode.off}
                />

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.