React native clear Stack Navigator stack in bottom tab bars

Question

I am developing an app which has bottom tab navigation. For implementing this , I've used react-navigation-material-bottom-tabs, which is working perfectly fine. Like I have 3 screens ,say Home, Profile and About in the bottom tab navigator. But in the Home screen I have multiple screens flow to be implemented. For that I used Stack Navigator, which is also working fine. So my app flow is like Home-> Screen1-> Screen2-> Screen3 Where I'm facing problem is that suppose I'm on Screen3 and then I switch to Profile screen from bottom navigation, and then again switch to Home screen.

I should be able to see Home Screen there but currently it shows Screen3

Following is my code:

MainTabs.js

 import { createStackNavigator } from '@react-navigation/stack';
    import Icon from 'react-native-vector-icons/Ionicons';
    import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
    
    const HomeStack = createStackNavigator();
    const ProfileStack = createStackNavigator();
    const AboutStack = createStackNavigator();
    
    const HomeStackScreen = ({ navigation }) => {
      return (
        <HomeStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'Screen1'}}>
          <HomeStack.Screen name="Screen1" component={Screen1} />
          <HomeStack.Screen name="Screen2" component={Screen2} />
          <HomeStack.Screen name="Screen3" component={Screen3}/>
        </HomeStack.Navigator>
      )
    }
    
    const ProfileStackScreen = ({ navigation }) => {
      return (
        <ProfileStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'Profile'}}>
          <ProfileStack.Screen name="Profile" component={Profile} />
        </ProfileStack.Navigator>
      )
    }
    
    const AboutStackScreen = ({ navigation }) => {
      return (
        <AboutStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'About'}}>
          <AboutStack.Screen name="About" component={About} />
        </AboutStack.Navigator>
      )
    }

const MainTabScreen = () => {
  return (
      <Tab.Navigator
        initialRouteName="Home"
        activeColor="#fff"
        barStyle={{ backgroundColor: 'red' }}
        labeled={false}
      >
        <Tab.Screen
          name="Home"
          component={HomeStackScreen}
        />    
        
        <Tab.Screen
          name="Profile"
          component={ProfileStackScreen}
        />

        <Tab.Screen
          name="About"
          component={AboutStackScreen}   
        />

      </Tab.Navigator>
  );

export default MainTabScreen;

Nikita Sinyavin Nikita Sinyavin · Accepted Answer · 2021-06-22T13:53:14

Use navigation.navigate('routeName') when you tap on your bottom tab navigator element. You have to register a route to the first screen of the stack, and from there you can go inside the stack as you like.

React native clear Stack Navigator stack in bottom tab bars

2 Answers