Does a bottom tab need its own separate stack

user_12060231 0
Viewed 346

When navigating to a screen from my second bottom tab(tab2), the app switches to tab1 and then navigates to the screen. When you click on the text to change screens, you can see the tab1 screen flash right before it swipes to the page.

How can I stay on the tab I am navigating from? I want to navigate to screen3 while keeping the tab on tab2.

Why is it changing tabs upon navigation?

To reproduce the bug... Click Tab2 -> click the text -> and you can see the bottom tab switch and the tab1 screen flashing before going to screen3.

Here is a snack code reproducing my project exactly along with my app.js below.

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (

    <Stack.Navigator
     initialRouteName="Home">        
      <Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
      <Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/> 
      <Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
      <Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
    </Stack.Navigator>
);
}


export default function App() {

  return (
   <NavigationContainer>
    <Tab.Navigator
    initialRouteName="Tab1"
    screenOptions={{
      tabBarActiveTintColor: 'white',
      tabBarInactiveTintColor: '#4d4d4d',
      tabBarStyle: {
        backgroundColor: '#d1cfcf',
        borderTopColor: 'transparent',
      },
    }} 
  >
    <Tab.Screen
      name="Tab1"
      component={MyTabs}
      options={{
        tabBarLabel: 'Tab1',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
     <Tab.Screen
      name="Tab2"
      component={Screen2}
      options={{
        tabBarLabel: 'Tab2',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
    
  </Tab.Navigator>
</NavigationContainer>
);
}

const Stack = createStackNavigator();
react-native
1 Answers

In your demo code, navigating to screen1 shows the bottomTabBar at the bottom, is this your required use case or a bug. I am assuming that it is bug and you don't want that.

To achieve that , it is recommended to use screens first and then BottomTabs. So define your bottomTabs in screen1 then your existing code works as you want it.

your App should return

    <NavigationContainer>
   <Stack.Navigator
     initialRouteName="Tabs">        
      <Stack.Screen name="Tabs" component= {MyTabs} options={{headerShown: false}}/>
      <Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/> 
      <Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
      <Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
    </Stack.Navigator>

your MyTabs function should return

<Tab.Navigator
    initialRouteName="Home"
    screenOptions={{
      tabBarActiveTintColor: 'white',
      tabBarInactiveTintColor: '#4d4d4d',
      tabBarStyle: {
        backgroundColor: '#d1cfcf',
        borderTopColor: 'transparent',
      },
    }} 
  >
    <Tab.Screen
      name="Home"
      component={Home}
      options={{
        tabBarLabel: 'Tab1',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
     <Tab.Screen
      name="Tab2"
      component={Screen2}
      options={{
        tabBarLabel: 'Tab2',
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
    
  </Tab.Navigator>

Working snack code is here

Edit: for bottomTabs to be visible even after navigation, you should create another Stacknavigator as you did for Tab1. your code should look something like this,

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen1"
        component={Screen1}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen3"
        component={Screen3}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}
function MySecondTabs() {
  return (
    <Stack.Navigator initialRouteName="Screen2">
      <Stack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen1"
        component={Screen1}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen2"
        component={Screen2}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Screen3"
        component={Screen3}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Tab1"
        screenOptions={{
          tabBarActiveTintColor: 'white',
          tabBarInactiveTintColor: '#4d4d4d',
          tabBarStyle: {
            backgroundColor: '#d1cfcf',
            borderTopColor: 'transparent',
          },
        }}>
        <Tab.Screen
          name="Tab1"
          component={MyTabs}
          options={{
            tabBarLabel: 'Tab1',
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Tab2"
          component={MySecondTabs}
          options={{
            tabBarLabel: 'Tab2',
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

working snack code

user_143732130
Related