react-native navigation 5 undefined params

Question

i have a problem with react-native/navigation. i'm using

npm -> 6.14.8
node -> 14.15.0
pod -> 1.10.0

// package.json
"react": "16.13.1",
"react-native": "0.63.3",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8"

i'm passing between screens params, and gate undefined

//Homescreen.js const HomeScreen = ({ navigation }) => { return( <TouchableOpacity onPress={() => { navigation.navigate('Shop', { value: 'Shop' }) }}> go Shop )}

//ShopScreen.js
const ShopScreen = ({ route, navigation }) => {
  // const { value } = route.params // get error
  console.log(route) // get {"key": "Shop-BJc0xwbAXOUpmKPB424H0", "name": "Shop", "params": undefined}
  console.log(route.params) // get undefined
  console.log(route.params?.value) // get undefined
  return (
    <>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home', { value: 'Home' })}
      />
      <ShopContainer />
    </>
  )
}

// rootNavigator.js
    function HomeStackScreen(props) {
  return (
    <HomeStack.Navigator initialRouteName={'Home'}>
      <HomeStack.Screen
        name={'Home'}
        component={HomeScreen}
        options={{
          headerTitle: () => <Logo />,
          headerRight: () => <SideContainer />,
          headerLeft: () => <SideContainer image={VIDEOCAM} />
        }}
      />
    </HomeStack.Navigator>
  )
}

function ShopStackScreen(props) {
  return (
    <ShopStack.Navigator initialRouteName={'Shop'}>
      <ShopStack.Screen
        name={'Shop'}
        component={ShopScreen}
        options={{
          headerTitle: () => <Logo />
        }}
      />
    </ShopStack.Navigator>
  )
}

Can you try the same, but with push instead of navigate? Just to see if this changes something — Leo Odishvili
its working, but is not redirect me to Shop or Home screen @LeoOdishvili — Andu
using push('Home', {value: 'Home'}) is not redirect me to specific screen — Andu

Bora Sumer Bora Sumer · Accepted Answer · 2020-12-16T17:18:33

You need to use this structure to pass params between screens.

navigation.navigate('MainNavigationName', {
        screen: 'ScreenNameToNavigate',
        params: { propertyKey: propertyValue },
      })

react-native navigation 5 undefined params

1 Answers