CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5react-navigation-bottom-tab
Supriya Gorai
Supriya Gorai

Reputation: 372

How to Reset the stacks on tab change inside each tab in react native bottomTabNavigator?

I have bottomTabNavigator in my tab and inside each tab I have stacks. I want to reset the stack whenever I click on another tab.

Tab Navigator-

Tab 1 - |_Stack Navigator

         - Screen 1
               
         - Screen 2

Tab 2 - |_Stack Navigator

         - Screen 3
               
         - Screen 4

Tab 3 - |_Stack Navigator

         - Screen 5
         - Screen 6

The present scenario is, . Suppose I am on tab 1 - I navigate to Screen 2 from screen 1 . Then I click to Tab 2 . Now if I again click on Tab 1, Screen 2 is showing instead of Screen 1.

Similar thing is happening on each tab.

I want to reset the tab on each tab click.

Please help.

I am using -

"dependencies": { "@react-native-community/cli": "^4.1.0", "@react-native-community/masked-view": "^0.1.6", "@react-navigation/bottom-tabs": "^5.0.5", "@react-navigation/native": "^5.0.5", "@react-navigation/stack": "^5.0.5", "react": "16.9.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.6.0", "react-native-gifted-chat": "^0.13.0", "react-native-reanimated": "^1.7.0", "react-native-safe-area-context": "^0.7.3", "react-native-screens": "^2.0.0-beta.7", },

Upvotes: 0

Views: 1193

Answers (2)

Filip Kaštovský
Filip Kaštovský

Reputation: 2016

There is a dispatch method provided by navigation. You can dispatch a StackActions.reset() action on your current navigation object with an index of 0, which should hard reset the stack.

Upvotes: 0

Keiser
Keiser

Reputation: 44

You can add a listener on your tab screen and do your custom navigation inside

<AppTabs.Screen
    name="TabScreen1"
    listeners={({ navigation }) => ({
      tabPress: () => {
        navigation.navigate('Main1', { screen: 'Main2' });
      },
    })}
  />

Upvotes: 2

Related Questions