How to reset my stack in react-navigation?

Question

I have 5 tabs on my Home Screen.

• Home Tab
• Search tab
• AddPostTab
• Notifications Tab
• Profile Tab

AddPostTab is like this.

const AddPostTab = createStackNavigator({
    AddPost: {
      screen: AddPost,
    },
    ImageDescription: {
      screen: ImageDescription
    },
    },
    {
      headerMode:'none',
      mode:'modal'
    }
);

When I go back from ImageDescription screen to Home Screen and then if I go to AddPostTab again, I'm directly going to the ImageDescription screen. But I want to be able to go to AddPost screen.

I've also tried

 const resetAction = StackActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({ routeName: 'AddPost' }),
                ],
              });
              this.props.navigation.dispatch(resetAction);

but this only takes me to the AddPost Screen. But if I use Home instead of AddPost, it doesn't works. How can I reset my stack in my case so that I can go to Home screen?

Answer 1

These are completely different navigators. And reset can't be applied to TabNavigator, because it's not much sense to do it. What you can do - is do something like this:

ImageDescription.js:

goToHome() => 
   this.props.navigation.popToTop() 
&& this.props.navigation.navigate('Home');

This will reset to root your current stack and then you will switch to Home tab

Answer 2

if you are have a single stack then use this on button click

navigation.dispatch(
            CommonActions.reset({
                index: 1,//the stack index
                routes: [
                    { name: 'Promote' },//to go to initial stack screen
                ],
            })
        )

for single stack you can also use the

navigation.popToTop()

but if you are wroking on tabs and then want to reset the tab then try this

 <BottomTab.Screen
    name="Post"
    component={PostStack}
    options={{
      unmountOnBlur: true,// set this props in your tab screen options
      title: 'Post',
      tabBarIcon: focused => <TabBarIcon focused={focused} name="Post" />,
    }}
  />