React Navigation 3.2 Back Behaviours for Tab Navigators

BY SEBASTIEN LORBER

/ 07/02/2019

Sébastien Lorber is a React Native developer, member of the react navigation team. He’s pleased to announce his latest contribution: Instagram-like history-based back behavior for all tab navigators.

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 (link1 link2 link3 link4 link5). 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.

Content Management with Gatsby, Contentful & Netlify

Babs Craig /

02/18/2019

Gatsby, Contentful, Netlify — The Triple Threat For Content Management Success

Focus Management with React Native on TV Plaforms

Guillermo Velásquez /

03/06/2019

Helping frontend / React engineers prepare for interviews with mock interviews

How to set up a Monorepo with React Native You.I and Yarn Workspaces

Andrei Calazans /

02/06/2020

In order to simplify dependency management, code reuse, and collaboration across teams, many projects have sought out to use the Monorepo structure.