Initial route params in React Navigation v5?

Question

React Navigation v3 was featuring an initialRouteParams property to pass initial values to this.navigation.props. Is there a way to set initial route params to be accessed via route.params in the React Navigation v5?

function MainScreen({route, navigation}) {
    return (
        // how to pass default values to route in here?
        // route.params.userParam ?
        ...
    );
}

Denis Kulagin · Accepted Answer · 2020-02-10T12:03:06.353

24

It could be accomplished by passing initialParams to the Stack.Screen:

<Stack.Screen
    name="Main"
    component={MainScreen}
    initialParams={{ /* initialParams */ }}
/>

There is also a handy default syntax one can use (see No more getParam):

route.params?.userParam ?? 'defaultValue'

edited Feb 10 '20 at 12:03

answered Feb 08 '20 at 05:41

Denis Kulagin

8,472
17
60
129

5

This does not seem to work when the "Main" screen is actually another Stack.Navigator. Then the params are not passed to the Screen rendered in this navigator. – philk Aug 27 '20 at 08:07
Of great help thanks. – Contestosis Jan 14 '22 at 09:36

Initial route params in React Navigation v5?

1 Answers1

Linked