I've been trying to pass data from my home.js screen to my merchant.js screen by using navigation.navigate('Merchant', store ) but when I try to actually use route.params I get undefined.
Here's my home.js
export default function Home( { navigation }) {
...
{storeData.map(store => {
return (
<View>
<TouchableOpacity>
<Text style={styles.categoryName}
onPress={() => {navigation.navigate('Merchant', store)}}>
{store.name}
</Text>
</TouchableOpacity>
Merchant.js
function Merchant({ navigation, route }) {
console.log(route);
...
}
Output:
{"key": "Merchant-86K9u5ytF32VGMRcO9s2g", "name": "Merchant", "params": undefined}
Again I have no idea what is going on. I've tried navigation.push(), I've tried using navigate('Merchant', {name: store.name}) but I still get undefined.
If you would like to paste more code with my stack navigation I can.
Have you try this?
navigation.navigate('Merchant', store)
Access the value by:
navigation.getParam('onePropertyOfStoreHere');
Alright, so I figured why it was undefined. It was because I had another stack that started with Merchant.js on the top.
<Stack.Navigator initialRouteName="Merchant" headerShown='false'>
<Stack.Screen name="Merchant" component={Merchant} />
<Stack.Screen name="ProductInfo" component={ProductInfo}/>
</Stack.Navigator>
This must of confused the app as I was moving from Home to Merchant screen but it went into another stack.