Passing props with screen option in DrawerNavigator

Question

I am using DrawerNavigator in https://reactnavigation.org/docs/navigators/drawer.

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications: {
        screen: MyNotificationsScreen,
    },
});

I have multiple screens that are using MyNotificationsScreen component with different props.

How can I do something like:

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications1: {
        screen: MyNotificationsScreen(propName=val1),
    },
    Notifications2: {
        screen: MyNotificationsScreen(propName=val2),
    },
});

Answer 1

Better way in many cases I think:

screen: (props) => <MyNotificationsScreen {...props} propName={val1} />

This will put your nav props in props.navigation.state.params. If you want them to appear in this.props instead (which will mean your component is not tightly coupled to react-navigation) then use:

screen: (props) => <MyNotificationsScreen {...props.navigation.state.params} propName={val1} />

Answer 2

You do have two options here:

1- You pass the parameter in the 'navigate call':

this.props.navigation.navigate('Notifications1', {propName: 'val1'})

2- The other way around is to create Notifications1

class Notifications1 
{
  render ( )
  {
    return <MyNotificationsScreen propName="val1" />
  }
}