Printing the information on the new page as soon as the QR Code is scanned-CodePudding

I am working on a QR Code scanner. As soon as the QR Code is scanned, I can print the information on the screen with an alert. But what I want is to print the information in the code on a new page as soon as it is scanned in the camera.

Actions to be taken when opening the camera and scanning the qr code

CodePudding user response：

First of all, we create a new page where the information in our QR code will be transferred. Then we integrate my App.js page with Stack Navigator to enable transition between pages.

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name='QRScanner' component={Home} />
      <Stack.Screen name='Scanner' component={Scanner} />
      <Stack.Screen name='Scanned' component={Scanned} />
    </Stack.Navigator>
  );
}

Then we come to the 'Scanner' page and from here we make the QR code go to the 'Scanned' page when scanned.(This process allows us to send the information in the QR Code to the 'Scanned' page.)

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    navigation.navigate("Scanned", { data });

  };

As a final step, we create a 'filter' value to print the information on the 'Scanned' page and make it appear on the screen.

const Scanned = ({ route }) => {
  const { data } = route.params;
  const filter = data.replace(/@/g, "\n");
  return (
    <View style={{ marginHorizontal: 25, marginVertical: 20 }}>
      <Text>{filter}</Text>
    </View>
  );
};

export default Scanned;