[fa icon="calendar"] Publié le 09 January 2018 par Thomas Pucci


One thing we learnt from using React Navigation with React Native is how hard it is to go back properly in our nested stack navigators.

For example, let’s take this navigator router: it has a StackNavigator as its root navigator and other nested navigators.

const RootNavigator = StackNavigator(
{
home: {
screen: DrawerNavigator(
{
home: {
screen: Pages.Home,
},
},
{
initialRouteName: 'home',
}
),
path: 'home',
},
authentication: {
screen: StackNavigator({
login: {
screen: Pages.Login,
},
signin: {
...
},
signup: {
...
},
}),
},
},
{
initialRouteName: 'home',
}
);

 

While you navigate in your application, at some point you might want to go back to the home page and clear all your navigation stack.

 

For example, if you are located on the login page, in your redux inspector, you would see:

nav(pin)
index(pin): 1
▼routes(pin)
▼0(pin)
type(pin): "Navigation/NAVIGATE"
routeName(pin): "home"
▶routes(pin): [{…}, {…}, {…}]
index(pin): 0
key(pin): "id-1234567890123-3"
▼1(pin)
index(pin): 0
▼routes(pin)
▼0(pin)
routeName(pin): "login"
key(pin): "Init-id-1234567890123-5"
key(pin): "id-1234567890123-6"
routeName(pin): "authentication"

 

The React Navigation reset method

In order to go back to the home page, you shouldn’t use the method backof react-navigation repeatedly as it is suggested at the end of this thread for example. Instead, use reset with a key: null to ask react-navigation to reset the root navigator.

 

Don’t: this might be OK in dev environnement, but this will certainly make your bundled application crash in production environnement

yield put(NavigationActions.back({ key: null }));
yield put(NavigationActions.back({ key: null }));
yield put(NavigationActions.back({ key: null }));
yield put(NavigationActions.back({ key: null }));

Do: properly reset the navigator

yield put(
NavigationActions.reset({
key: null,
index: 0,
actions: [NavigationActions.navigate({ routeName: 'home' })],
})
);

 

How does reset works ?

  • key refers to your nested navigator key you want to reset. As it is often complicated to get one navigator's key, the easiest way to use it is:
    • either leave it undefined: this way reset will apply to your current navigator:
    • either set it to null: this way reset will apply to your root navigator.

  • actions is an array of actions used to set the new navigation state.
  • index refers to the active screen in this new state.

 

For example…

NavigationActions.reset({
index: 1,
actions: [
NavigationActions.navigate({ routeName: 'home' }),
NavigationActions.navigate({ routeName: 'settings' })
]
});

… will replace your current navigator state by a state with the 'settings' route on top of the 'home' route; and the active route is the one which index is 1 i.e. the 'settings' route.

 

Finally, in order to use properly React Navigation API, dispatch only one action at a time.


Liked this article? Interested in building an app with us?

Contact a React Native expert in Paris




Want to rate this article?
Submit Rating

Topics: React, React Native, navigation, bug