I am a newcomer to React Native and facing challenges in passing data to another page. Specifically, I want to transmit data from the QR Reader to another Page.
Below is my code on the first screen:
const LoginScreen = (props) => {
const onSuccess = e => {
const Data = e.data
console.log(Data);
props.navigation.replace("Input Water Transaction", {result: Data })
};
return (
<QRCodeScanner
onRead={onSuccess}
flashMode={RNCamera.Constants.FlashMode.off}
topContent={
<Text>
Scan QR Water
</Text>
}
bottomContent={
<TouchableOpacity style={styles.buttonTouchable}>
<Text style={styles.buttonText}>Scan QR Water</Text>
</TouchableOpacity>
}
/>
);
}
This is the second screen:
const InputWater = (props) => {
const navigation = useNavigation();
const QRResult = props.navigation.getParam('result', 'nothing sent')
return (
<ScrollView>
<View style={{
flex:1,
}}>
<Root>
<TouchableOpacity
onPress={() =>
Popup.show({
type: 'Success',
title: 'Upload complete',
button: true,
textBody: 'Congrats! Your upload was successful!',
buttontext: 'Ok',
callback: () => navigation.navigate('Scan QR Water')
})
}
>
<View style={{
backgroundColor: '#4cd137',
marginTop: 10,
borderRadius: 10,
}}>
<Text style={{
marginTop: 10,
marginBottom: 10,
fontWeight: 'bold',
textAlign: 'center'
}}>{QRResult}</Text>
</View>
</TouchableOpacity>
</Root>
<View style={{
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
alignContent: 'center',
marginTop: 10,
}}>
<View style={{
width: 350,
minWidth: 310,
maxWidth: 310,
backgroundColor: '#d6e0f0',
marginTop: 10,
borderRadius: 10,
alignItems: 'stretch',
}}>
<View style={{
backgroundColor: '#fff',
marginTop: 5,
marginLeft: 5,
marginRight: 5,
borderRadius: 10,
marginBottom: 5
}}>
<View style={{
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
flexDirection: 'column'
}}>
<Text>Electricity Meter No</Text>
<TextInput style={{
backgroundColor: '#ecf0f1',
borderRadius: 10,
height: 35,
minWidth: 240,
maxWidth: 280,
marginTop: 5,
}}/>
<Text style={{
marginTop: 10
}}>Start Electricity Meter</Text>
<TextInput style={{
backgroundColor: '#ecf0f1',
borderRadius: 10,
height: 35,
minWidth: 240,
maxWidth: 280,
marginTop: 5,
}}/>
<Text style={{
marginTop: 10
}}>Last Electricity Meter</Text>
<TextInput style={{
backgroundColor: '#ecf0f1',
borderRadius: 10,
height: 35,
minWidth: 240,
maxWidth: 280,
marginTop: 5,
}}/>
<Text style={{
marginTop: 10
}}>Lost Electricity(%)</Text>
<TextInput style={{
backgroundColor: '#ecf0f1',
borderRadius: 10,
height: 35,
minWidth: 240,
maxWidth: 280,
marginTop: 5,
}}/>
</View>
</View>
</View>
<View style={{
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
marginTop: 200
}}>
<Text style={{
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center'
}}>Water Transaction</Text>
</View>
</View>
</View>
</ScrollView>
);
};
However, an error occurred:
ERROR TypeError: props.navigation.getParam is not a function. (In 'props.navigation.getParam('result', 'nothing sent')', 'props.navigation.getParam' is undefined)
How can I retrieve values from the first screen? Am I doing something wrong here? Any suggestions are much appreciated. Thank you!