CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-bottom-tab
Michał Frączek
Michał Frączek

Reputation: 21

Remove a certain screen from the stack on Tab bar press in React Native Navigation Bottom Tabs

Take a look at this navigation structure:

Tab bar:
-StackNavigatorA:
--Screen A1
--Screen A2
--Screen A3
--Screen A4
-StackNavigatorB:
--Screen B1

Upon changing the tab from StackA to StackB and returning to StackA I want to keep all the screens as they were, apart from ScreenA4.

So if a user is on ScreenA3, switches tab to StackB, and goes back to StackA I want to keep ScreenA3 open, the same thing with screen A2

But if a user is on ScreenA4, switches tab to StackB, and goes back to StackA I want to remove ScreenA4 and display ScreenA3

Sorry if my explanation is confusing

I tried using global NavigationRef and its state however I couldn't find a way to get the last active route's name on the Tab bar press

Upvotes: 0

Views: 108

Answers (1)

ko100v.d
ko100v.d

Reputation: 1156

Check the events of BottomTabsNavigator https://reactnavigation.org/docs/bottom-tab-navigator#events

  1. You need to subscribe to the tabPress event, now you can catch on which tab the user is navigating.
  2. You need to check the navigation state, https://reactnavigation.org/docs/navigation-state/.
  3. If your StackA navigation state has Stack4 route at last you need to do navigation.reset and build your stack the way you want to look like https://reactnavigation.org/docs/navigation-actions/#reset, otherwise I assume you don't need to do anything, but this is the set of tools that can help you build your feature.

Upvotes: 0

Related Questions