Hi. 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
I need the code to be scanned once when pointing the camera at it. help