javascript - 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} />