CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigationreact-navigation-stack
Californium
Californium

Reputation: 591

Undefined route.params when navigating inside nested navigators?

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,
    })
  }
>

Upvotes: 2

Views: 2596

Answers (2)

Walter Shub
Walter Shub

Reputation: 662

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

Upvotes: 0

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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.

Upvotes: 10

Related Questions