I am trying to make a react native application. I am using Bottom Tab Navigation, and I have 2 screens. On the first screen, a qr code is first scanned, it contains a string, which is written on the screen.
Then I would like to write out the afformentioned string on the second tab.
How can I pass this data between the screens of the Bottom Tab Navigator?
App:
import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import QrcodeScreen from './src/screens/QrcodeScreen'; import EttermekScreen from './src/screens/EttermekScreen'; const Tab =createBottomTabNavigator(); export default function App() { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name='Qrcode' component={QrcodeScreen} /> <Tab.Screen name='Ettermek' component={EttermekScreen} /> </Tab.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
QrcodeScreen:
import { StatusBar } from 'expo-status-bar'; import React, { useState, useEffect } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; import { BarCodeScanner } from 'expo-barcode-scanner'; export default function QrcodeScreen() { const [hasPermission, setHasPermission] = useState(null); const [scanned, setScanned] = useState(false); const [text, setText] = useState('Not yet scanned') const askForCameraPermission = () => { (async () => { const { status } = await BarCodeScanner.requestPermissionsAsync(); setHasPermission(status === 'granted'); })() } // Request Camera Permission useEffect(() => { askForCameraPermission(); }, []); // What happens when we scan the bar code const handleBarCodeScanned = ({ type, data }) => { setScanned(true); setText(data) console.log('Type: ' + type + 'nData: ' + data) }; // 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' />} </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' } });
The screen I would like to print the string:
import { StyleSheet, Text, View } from 'react-native'; import React from 'react'; import { StatusBar } from 'expo-status-bar'; import QrcodeScreen from './QrcodeScreen'; export default function EttermekScreen({ route }) { const { varisId } = route.params return ( <View style={styles.container}> <Text>ÉTTERMEK</Text> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Advertisement
Answer
In EttermekScreen
, you already have this line, const { varisId } = route.params
, and grabbing from the props route
, so you should be good with it.
Assuming you wanna send data
in handleBarCodeScanned
to EttermekScreen
as a parameter called varisId
, you could do it this way:
import { StatusBar } from 'expo-status-bar'; import React, { useState, useEffect } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; import { BarCodeScanner } from 'expo-barcode-scanner'; export default function QrcodeScreen({navigation}) { const [hasPermission, setHasPermission] = useState(null); const [scanned, setScanned] = useState(false); const [text, setText] = useState('Not yet scanned') const askForCameraPermission = () => { (async () => { const { status } = await BarCodeScanner.requestPermissionsAsync(); setHasPermission(status === 'granted'); })() } // Request Camera Permission useEffect(() => { askForCameraPermission(); }, []); // What happens when we scan the bar code const handleBarCodeScanned = ({ type, data }) => { setScanned(true); setText(data); navigation.navigate('Ettermek', { varisId: data }); }; // 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' />} </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' } });