react navigation 3.2: new back behaviors for tab navigators
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
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.
