react native - How to properly add timeout between each scan of QR for Expo Camera? - Stack Overflow

admin管理员组

文章数量:1278789

I am currently developing an app that has a netflix like authentification system: with a main account that has multiple profiles. For this I am trying to implement a QR code login option, where if a user is authenticated he can generate a QR code that can be scanned in the app to instantly authenticate the person scanning. For this I am using expo-camera library to scan the QR codes. The problem is that the camera scans like 100 times per second, and since my process is about authentication I do not want the user to send 100 auth requests to the server on a QR scan.

import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet, Button } from "react-native";
import { CameraView, useCameraPermissions } from "expo-camera";
import { auth } from "../../firebase/firebaseConfig";
import {signInWithCustomToken} from "firebase/auth"
const QRcodeScan = ({ navigation }) => {
  const [scanned, setScanned] = useState(false);
 
///random functions///

  const handleBarcodeScanned = async (scannedData) => {
    console.log("Scanned token:", scannedData);
    // Used the scanned data as the custom token and try signing in
      try {
        const userCredential = await signInWithCustomToken(auth, scannedData);
        console.log("Signed in successfully as:", userCredential.user.uid);
        // Navigate to the next screen after a successful sign-in
        navigation.navigate("ProfileSelection");
      } catch (error) {
        console.error("Error signing in with custom token:", error);
        // Handle error
      }

  };

  return (
    <View style={styles.container}>
      <CameraView
        style={styles.camera}
        facing={facing}
        onBarcodeScanned={({ data }) => {
          if(data && !scanned) {
            setScanned(true);
            setTimeout(async () => {
              await handleBarcodeScanned(data);
            }, 500)
          
          }
        }}
        >
{/* Rest of the code */}

I wasn't able to make it work. Imo this should be something handled in the "onBarcodeScanned" function to add a delay for each scan, idk why they didn't think of this.

The desired behaviour would be to scan -> wait for confirmation of sucess/failure -> scan again if failure.

I tried adding some delay as you can see, but that delays basically just the function that is triggered on scan, not the actual scans.

I am currently developing an app that has a netflix like authentification system: with a main account that has multiple profiles. For this I am trying to implement a QR code login option, where if a user is authenticated he can generate a QR code that can be scanned in the app to instantly authenticate the person scanning. For this I am using expo-camera library to scan the QR codes. The problem is that the camera scans like 100 times per second, and since my process is about authentication I do not want the user to send 100 auth requests to the server on a QR scan.

import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet, Button } from "react-native";
import { CameraView, useCameraPermissions } from "expo-camera";
import { auth } from "../../firebase/firebaseConfig";
import {signInWithCustomToken} from "firebase/auth"
const QRcodeScan = ({ navigation }) => {
  const [scanned, setScanned] = useState(false);
 
///random functions///

  const handleBarcodeScanned = async (scannedData) => {
    console.log("Scanned token:", scannedData);
    // Used the scanned data as the custom token and try signing in
      try {
        const userCredential = await signInWithCustomToken(auth, scannedData);
        console.log("Signed in successfully as:", userCredential.user.uid);
        // Navigate to the next screen after a successful sign-in
        navigation.navigate("ProfileSelection");
      } catch (error) {
        console.error("Error signing in with custom token:", error);
        // Handle error
      }

  };

  return (
    <View style={styles.container}>
      <CameraView
        style={styles.camera}
        facing={facing}
        onBarcodeScanned={({ data }) => {
          if(data && !scanned) {
            setScanned(true);
            setTimeout(async () => {
              await handleBarcodeScanned(data);
            }, 500)
          
          }
        }}
        >
{/* Rest of the code */}

I wasn't able to make it work. Imo this should be something handled in the "onBarcodeScanned" function to add a delay for each scan, idk why they didn't think of this.

The desired behaviour would be to scan -> wait for confirmation of sucess/failure -> scan again if failure.

I tried adding some delay as you can see, but that delays basically just the function that is triggered on scan, not the actual scans.

• react-native
• expo
• expo-camera
• expocameraissue

Share Improve this question Follow asked Feb 25 at 9:11 Development DOEdealDevelopment DOEdeal 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You may try this solution this works for you. I had faced same issue but using one flag state I can able to maintain the APIs call.

import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet, Button } from "react-native";
import { CameraView, useCameraPermissions } from "expo-camera";
import { auth } from "../../firebase/firebaseConfig";
import {signInWithCustomToken} from "firebase/auth"
const QRcodeScan = ({ navigation }) => {
  const [scanned, setScanned] = useState(false);
  const [isScanned,setIsScanned] useState(false) // flag state
///random functions///

  const handleBarcodeScanned = async (scannedData) => {
    setIsScanned(true)
    console.log("Scanned token:", scannedData);
    // Used the scanned data as the custom token and try signing in
      try {
        const userCredential = await signInWithCustomToken(auth, scannedData);
        console.log("Signed in successfully as:", userCredential.user.uid);
        // reset flag
        setIsScanned(false)
        // Navigate to the next screen after a successful sign-in
        navigation.navigate("ProfileSelection");
      } catch (error) {
        console.error("Error signing in with custom token:", error);
        // Handle error
        // reset flag
        setIsScanned(false)
      }

  };

  return (
    <View style={styles.container}>
      <CameraView
        style={styles.camera}
        facing={facing}
        onBarcodeScanned={({ data }) => {
          if(data && !scanned) {
            setScanned(true);
          if(!isScanned)
            setTimeout(async () => {
              await handleBarcodeScanned(data);
            }, 500)
          }
        }}
        >
{/* Rest of the code */}

本文标签： react nativeHow to properly add timeout between each scan of QR for Expo CameraStack Overflow