how to pass params to nested navigators using React Navigation-CodePudding

Can't pass params to nested navigator. I keep getting error 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}
    />

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)

CodePudding user response：

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)

CodePudding user response：

I forgot to pass the prop into a sub component