I am new to react native I want to ask that if i wanted to show the data from the barcode after scanned to another screen. how to do it here is my code

App.js

import Scanner from './jscan/Scanner';
import Home from './jscan/Home';

import{NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import{createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
const Tab= createBottomTabNavigator();
function App(){
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home}/>
      <Stack.Screen name="Scanner" component={Scanner}/>
   
    </Stack.Navigator>
  );
}
export default () => {
  return(
    <NavigationContainer>
      <App/>
    </NavigationContainer>
  )

}

here is my Home.js it is the place that i wanted to show my barcode data and also it is the first screen

Home.js

import {View,Text, Button, StyleSheet} from 'react-native';
import React, {useState,Component} from 'react';
import {useNavigation} from'@react-navigation/native';
import {StatusBar} from'expo-status-bar';
import Scanner from './Scanner';


export default function Home ({route}){
    
    const navigation = useNavigation();
    
    return(
        <View style={styles.container}>
          
          <Button title = 'Scan' onPress={()=> navigation.navigate('Scanner')}/>
          <Text></Text>
          <StatusBar style="auto"/>
        </View>
       
    );
     
  
     
}

const styles= StyleSheet.create({
  container : {
      flex:1,
      backgroundColor:'#fff',
      alignItems:'center',
      justifyContent:'center'
  }
  
  
})

here is the scanner scanner.js

import React, { useState, useEffect,Component,onMount} from 'react';
import { Text,TextInput, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import {useNavigation} from'@react-navigation/native';
import {StatusBar} from 'expo-status-bar';

 

export default function App() {
  
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [text, setText] = useState('Not yet scanned')
  const [currentDate, setCurrentDate] = useState('');
  const navigation = useNavigation();


  const askForCameraPermission = () => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })()
  }

  // Request Camera Permission
  useEffect(() => {
    askForCameraPermission();
  }, []);

  useEffect(() => {
    var date = new Date().getDate(); //Current Date
    var month = new Date().getMonth()   1; //Current Month
    var year = new Date().getFullYear(); //Current Year
    var hours = new Date().getHours(); //Current Hours
    var min = new Date().getMinutes(); //Current Minutes
    var sec = new Date().getSeconds(); //Current Seconds
    setCurrentDate(
      date   '/'   month   '/'   year 
        ' '   hours   ':'   min   ':'   sec
    );
  }, []);
  // What happens when we scan the bar code
 
  const handleBarCodeScanned = ({ type, data }) => {

   
    setScanned(true);
     
     
     setText(data  '\n'  currentDate)
     
   
  };
 
  // Check permissions and return the screens
  if (hasPermission === null) {
    return (
      <View style={styles.container}>
        <Text>Requesting for camera permission</Text>
      </View>)
  }
  if (hasPermission === false) {
    return (
      <View style={styles.container}>
        <Text style={{ margin: 10 }}>No access to camera</Text>
        <Button title={'Allow Camera'} onPress={() => askForCameraPermission()} />
      </View>)
  }
 
  // Return the View
  return (
     
    <View style={styles.container}>
      <View style={styles.barcodebox}>
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
          style={{ height: 400, width: 400 }} />
      </View>
      <Text style={styles.maintext}>{text}</Text>
       
      {
        scanned && <Button title={'Scan again?'} onPress={() => setScanned(false)} color='tomato' />
         
      }
     
      {
        scanned && <Button title={'OK'} onPress={()=> navigation.navigate('Home')} />
         
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  maintext: {
    fontSize: 16,
    margin: 20,
  },
  barcodebox: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 300,
    width: 300,
    overflow: 'hidden',
    borderRadius: 30,
    backgroundColor: 'tomato'
  }
});

I have tried some method from other source but it still cant work with it. hope u guys help thanks

CodePudding user response：

You can pass the data to Home screen with params.

Scanner.js:

// Pass the text parameter as a second argument to navigate function
<Button title={'OK'} onPress={()=> navigation.navigate('Home', { text })} />

Home.js:

// Accessing the passed parameter
export default function Home ({ route }){
  ...
  return (
    ...
    <Text>{route.params && route.params.text}</Text>
    ...
  )
}

Check out react-navigation documentation for more info: https://reactnavigation.org/docs/params/