Adam Silver Adam Silver - 1 year ago 179
React JSX Question

Passing props with screen option in DrawerNavigator

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 Source

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} />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download