CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stackreact-navigation-drawer
Jerry Seigle
Jerry Seigle

Reputation: 253

how to pass params to nested navigators using React Navigation

Can't pass params to the nested navigator. I keep getting errors undefined is not an object evaluating route.params.data

I do have different stack navigators for homeDrawer and LiveModeDrawer. I am using React navigation version 6. I looked over the documents however what I have read is not working.

app.js

<Drawer.Navigator>
  <Drawer.Screen
    name="HomeDrawer"
    options={{ headerShown: false }}
    component={MainNavigator}
  />
  <Drawer.Screen
    name="LiveModeDrawer"
    options={{ headerShown: false }}
    component={LiveModeStackNavigator}
  />
</Drawer.Navigator>;

todo.js

this.props.navigation.navigate("LiveModeDrawer", {
  screen: "LiveModeAlertOnly",
  params: { data: "jane" },
});

live.js

export default function LiveModeAlertsNotifications({ route, navigation }) {
  const { data } = route.params;
  console.info(data);
}

Upvotes: 0

Views: 1390

Answers (2)

Jerry Seigle
Jerry Seigle

Reputation: 253

I forgot to pass the prop into a sub component

Upvotes: 1

Michael Bahl
Michael Bahl

Reputation: 3649

AFAIK the second parameter already are the Params

Change this:

this.props.navigation.navigate('LiveModeDrawer', {
        screen: 'LiveModeAlertOnly',
        params: {data: 'jane'},
      });

To:

this.props.navigation.navigate('LiveModeDrawer', {
       data: 'jane,
      });

Or:

export default function LiveModeAlertsNotifications({route, navigation}) {
   const {data} = route.params.params; // Add another params
   console.info(data)

Upvotes: 2

Related Questions