Get data into the input field after Qr code Scanned

Question

I'm trying to get id from Qr code to input field every time Qr is scanned. I tried to use Async-storage to store data after scanned but it whenever i scan different qr code it shows the same qr code that is scanned for the very first time. .

Here is the code that i have used to create scanner page.

import React, { useState, useEffect } from "react";
import { Text, SafeAreaView, StyleSheet, Button, Dimensions,Image } from "react-native";
import { BarCodeScanner } from "expo-barcode-scanner";
import colors from "../config/colors";
import AsyncStorage from "@react-native-community/async-storage";

function QrScanner({navigation}) {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  useEffect(() => {
    handleBarCodeScanned();
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  }, []);

  const handleBarCodeScanned = async({ type, data }) => {
    setScanned(true);
    await AsyncStorage.setItem('key', data);
    alert(`Bar code with type ${type},and data ${data} has been scanned!`);
     console.log(await AsyncStorage.getItem('key'));
    
  };
  

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <SafeAreaView
      style={{
        flex: 1,
        flexDirection: "column",
        justifyContent: "flex-end",
      }}
    >
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={[StyleSheet.absoluteFill, styles.container]}>
        <Text style={styles.description}>Scan your QR code</Text>
        <Text
          onPress={() =>navigation.navigate('TempRecordStack')}
          style={styles.cancel}>
          Back
        </Text>
        
        </BarCodeScanner>
        {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </SafeAreaView>
  );
}
export default QrScanner;

const { width } = Dimensions.get('window')
const qrSize = width * 0.7
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  description: {
    fontSize: width * 0.09,
    fontWeight:"bold",
    marginTop: '30%',
    textAlign: 'center',
    width: '70%',
    color: colors.purple,
    
  },
  cancel: {
    backgroundColor:colors.dark,
    fontSize: width * 0.05,
    fontWeight:"bold",
    padding:4,
    textAlign: 'center',
    width: '30%',
    opacity:0.6,
    color: colors.purple,
  },
})

Here is the line of code that i have used to get data from Async-storage to get scanned id

const [studentId, setStudentId] = useState({});

    
//To get Scanned data
      const getUserId = async () => {
        var code = await AsyncStorage.getItem("key");
        setStudentId(code);
      };

Input field

<Text style={styles.text1}>UserId : </Text>
        <View style={styles.action}>
          <TextInput style={styles.Input} value={studentId} />

          <FontAwesome
            name="camera"
            size={20}
            onPress={() => {
              navigation.navigate("QrScanner");
            }}
          />
        </View>

Answer 1

You dont have to use AsyncStorage here which is adding unwanted complexity, you can do this using the parameters like below

  const handleBarCodeScanned = async({ type, data }) => {
    setScanned(true);
    alert(`Bar code with type ${type},and data ${data} has been scanned!`);
     navigation.navigate('TempRecordStack',{code:data})
  };

And in the other screen you can do like below Have a use effect

  React.useEffect(() => {
    if (route.params?.code) {
      setStudentId(route.params?.code);
    }
  }, [route.params?.code]);

This will set the code correctly when the user is navigated back.