Before react navigation 3.2, the only back behaviors available for a tab navigator were:

- none: the back action does not affect the tabs at all
- initialRoute: the back action resets to the config’s initial route

For a long time, it has been requested to add more back behaviors to tab navigators (backBehavior, historyStack, additional backBehavior, backNavigate, previousTab). An official RFC was made to design the feature.

In case you missed it, two new back behaviors were implemented on this PR and released on react navigation 3.2: order and history. They mostly make sense for tab navigators, but you are free to use them on any navigator that uses a SwitchRouter: switch navigator, tab navigator…

Order

This new back behavior will simply navigate to the previous tab in the config order. When on 4th screen, back actions will lead to 3rd screen, 2nd screen, 1st screen, and then exit.

History

This new back behavior will navigate to the previously displayed tab in the navigation history. This is the navigation pattern used on Instagram app.

Tab deduplication will happen when a tab is visited more than once. In the example below with 4 tabs, it is guaranteed to exit the tab navigator within 4 back actions.
‍

Try it out

The examples above are published on Expo and runnable from the react-navigation-core repo

Thanks to Brent, Eric and Satyajit for their help.

Interested to learn more about react navigation, react native, Expo or Typescript? Follow our guest blogger Sébastien Lorber on Github and Twitter.

Thanks to G2i for publishing this post. G2i is a hiring platform run by engineers that matches clients with pre-vetted React, React Native, GraphQL, and native iOS/Android focused engineers you can trust.

‍