I'm currently working on a React-Native application.

I've successfully integrated a QR-code scanner using the Expo-Camera module. However, I've encountered an issue during scanning. When I attempt to scan a QR code, the console displays multiple code scans in rapid succession, typically between 3 to 5 scans within a single millisecond. I'm wondering why the camera is triggering multiple scans simultaneously, and I'm looking for a solution to limit it to just one scan per attempt.

Furthermore, if an invalid code is scanned, I've implemented a toast notification. The problem is that the notification appears multiple times, corresponding to the number of unsuccessful scans. Additionally, the device's vibration function is triggered multiple times when scanning fails, again ranging from 3 to 5 times.

I'm seeking guidance on how to ensure that the QR code scanner only performs a single scan attempt.

Sample part of the code

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

  return (
    <View style={styles.container}>
      <Camera
        barcodeSettings={{
            interval: 1000, // scan once per second
          }}
        style={styles.camera}
        type={type}
        onBarCodeScanned={handleBarCodeScanned}
        ratio="16:9">
      </Camera>
    </View>
  );
}

Logs:

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

The point is that the code is scanned several times per millisecond. I can't control this even with the interval property

Snack example

Environment

expo-env-info 1.0.5 environment info:
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
npmPackages:
expo: ^49.0.13 => 49.0.13
react: 18.2.0 => 18.2.0
react-native: 0.72.6 => 0.72.6
Expo Workflow: managed

You could use state to determine wether something has been scanned so far. You handler function would include an if check to see if something has been scanned in the past and only proceed if not.

I am on mobile right now, but I will add a code example in a couple of minutes.

  const [scanned, setScanned] = useState(false);
  const handleBarCodeScanned = async ({ typeCode, data }) => {
    if (scanned) {
      return
    }
    console.log("NEW code scanned");
    ToastAndroid.show("scanned", ToastAndroid.SHORT)
    setScanned(true);
    };

  return (
    <View style={styles.container}>
      <Camera
        barcodeSettings={{
            interval: 1000, // scan once per second
          }}
        style={styles.camera}
        type={type}
        onBarCodeScanned={handleBarCodeScanned}
        ratio="16:9">
      </Camera>
    </View>
  );
}