How to make "Go back to initial StackNavigator Screen when TabNavigator's Tab is pressed"

Question

Intro

Just like Facebook, Instagram, and any other mobile app, I want to implement 'go back to initial screen in Stacknavigator'

1. if user press the button,
2. it goes back to the very first page.

Simple Use Case

1. see TabNavigator
2. Goes to 'Feed' Tab
3. Goes to 'User' Screen
4. Goes to another 'User' Screen
5. PRESS the Main Tab Icon - 'Feed'}
6. Goes BACK to 'Feed' Tab // so you won't see the 'back' button

And please leave a comment if you don't understand this use case, I will draw its state flow for you

Code for the icon on my Main TabNavigator.

navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused }) => {
          const { routeName } = navigation.state;
          ....
          return (
              <TochableWithoutFeedback onPress={()=>{navigation.goback(iconName)}> 
              // undefined is not a function when I press the Button 
              // deeper screen. (not getting any error on Main)
                  <Ionicons
                      name={iconName}
                      size={30}
                      style={{ marginBottom: -3 }}
                      color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
                      />
             <TochableWithoutFeedback>
         );
  },

Answer 1

actually, it depends on how many deep is your routing like Instagram 2 to 3 deep routing else are tabs

so you can reset your router or go back to the main router by using

this.props.navigation.goBack(null)

for eg.

Tab navigation child ahs Stack navigation so in Stack, you can do something like

// Anyone watching this, please check your react-navigation version
// I'm using ^1.0.0-beta.21.
// props for tabBarOnpress varies can be varied (Editor John Baek)
tabBarOnPress: ({scene, jumpToIndex}) => {
      jumpToIndex(scene.index)
      navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({ routeName: 'home' }) // go to first screen of the StackNavigator
        ]
      }))
    }

so whenever someone press Home Tab then all route reset and you see Feed screen just like Instagram

TabNavigation 
  -Home
      |
      StakeNavigation 
                    |
                    mainScreen //main of home 
                    Subrouts 
                    RouteToProfile //just like insta

  -Search 
        |
         StakeNavigation 
                       |
                       mainScreen //main of search 
                       searchResult //if people serch some specific 

and go on... so reset route at stakeNavigation level of Tab

const SubHome = StackNavigator({
  Home: { screen: Home },
  Home2: { screen: Home2 },
  Home3 : { screen: Home3 },
},{
  navigationOptions:({navigation,screenProps})=>({
    tabBarLabel: I18n.t('tab_car'),
    tabBarIcon: ({ tintColor }) => (
      <CustomIcon name={'Home'} width={28} height={30} fill={tintColor} />
    ),
    tabBarOnPress: (tab, jumpToIndex) => {
      jumpToIndex(tab.index)
      navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({ routeName: 'Home' }) // go to first screen of the StackNavigator
        ]
      }))
    }
  }),
  headerMode:'none'
});