Undefined route.params when navigating inside nested navigators?

user_7329928 0
Viewed 1869

I'm using React Native and React Navigation. I'm attempting to only make one of my screens into mode="Modal, but the route params I pass when navigating are getting "undefined" with the error TypeError: undefined is not an object (evaluating 'route.params.title'). Why is this and how can I fix this?

My Attempt

const ModalScreen = () => (
  <Modals.Navigator mode="modal">
    <Modals.Screen
      name="Modal"
      component={Modal}
      options={({ route }) => ({
        title: route.params.title,
        headerTransparent: true,
        gestureResponseDistance: {
          vertical: 500,
        },
      })}
    />
  </Modals.Navigator>
);
const MainScreen = () => (
  <Items.Navigator>
    <Items.Screen
      name="Main"
      component={Main}
      options={{ headerShown: false }}
    />
    <Items.Screen name="Modal" component={ModalScreen} />
  </Items.Navigator>
);

// Navigating to Modal in another file.
<TouchableOpacity
  onPress={() =>
    navigation.navigate("Modal", {
      screen: "Modal",
      title: title,
    })
  }
>
react-navigation-stack react-navigation react-native reactjs javascript
2 Answers

When you are sending parameters to nested navigators you have to send it like below

      navigation.navigate('Modal', {
        screen: 'Modal',
        params: { title: 'title' },
      })

The key params specifies that its a parameter, and you can access it like any other parameter.

user_14357220

the reason its not working is because your param is on the parent stack and not on the route itself since you navigated from one stack to another

react navigation provides a dangerouslyGetParent method to solve this problem react navigation docs

user_74758320
Related