React Navigation 3.2 Back Behaviours for Tab Navigators
BY SEBASTIEN LORBER
Follow on twitter
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
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.
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