Always show BottomTabNavigation

Question

How can I show BottomTabNavigation even on stacked screen? I have tried this for a few hours but really don't get it to work as expected.

So the thing I want to happen is, if I navigate to say for example the Title Screen, I still want to show the BottomTabNavigation. Any suggestions?

I can of course create a new navigation, but then it is sliding in from the side.

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const HomeTabNavigator = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        labelStyle: {textTransform: 'uppercase'},

        style: {
          backgroundColor: '#111111', //Färger på footerbar
          borderTopColor: 'transparent',
          borderBottomColor: 'transparent',
        },
      }}>
      <Tab.Screen
        name={'Concerts'}
        component={ConcertsScreen}
        options={{
          tabBarIcon: ({tintColor}) => (
            <Image
              source={require('../../assets/icons/concerts.png')}
              size={25}
            />
          ),
        }}
      />
      <Tab.Screen
        name={'Docs'}
        component={DocumentiesScreen}
        options={{
          tabBarIcon: ({tintColor}) => (
            <Image source={require('../../assets/icons/docs.png')} size={25} />
          ),
        }}
      />

      <Tab.Screen
        name={'Profile'}
        component={ProfileScreen}
        options={{
          tabBarIcon: ({tintColor}) => (
            <Image source={require('../../assets/icons/user.png')} size={25} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const Router = () => {
  const {token, setToken} = useContext(TokenContext);
  const {userFav, addFav, getFav} = useContext(UserContext);
  const [isLoading, setLoading] = useState(true);
  useEffect(() => {
    setLoading(false);
    setTimeout(() => {}, 1000);
  }, []);


  return (
    <NavigationContainer>
      {token ? (
        <Stack.Navigator
          initialRouteName="Home"
          screenOptions={{
            headerTransparent: true,
            noBorder: true,
          }}
          headerMode="float">
          <Stack.Screen name={' '} component={HomeTabNavigator} />
          <Stack.Screen name={'Concerts'} component={ConcertsScreen} />
          <Stack.Screen name={'User Profile'} component={ProfileScreen} />
          <Stack.Screen
            name={'FavouritesScreen'}
            component={FavouritesScreen}
          />
          <Stack.Screen name={'Docs'} component={DocumentiesScreen} />
          <Stack.Screen name={'AccountScreen'} component={AccountScreen} />
          <Stack.Screen name={'Home of'} component={SearchScreen} />
          <Stack.Screen name={'Artist'} component={ArtistScreen} />
          <Stack.Screen name={'Title'} component={Videos} />

          <Stack.Screen name={'PlayVideo'} component={PlayVideo} />
        </Stack.Navigator>
      ) : (
        <LoginScreen />
      )}
    </NavigationContainer>
  );
};

score 0 · Answer 1 · answered May 03 '21 at 15:19

0

You need to nest all your stack screens inside a tab screen.

The BottomTabNavigator disappear because you leave your Tab.Navigator component.

answered May 03 '21 at 15:19

docmurloc

1,201
4
11

So I need to move my inside the ? – Mikael Blytung May 03 '21 at 15:44
That make the StackScreen show up in the BottomTabbar, the problem is, I also get it as a menu item in the bottom. – Mikael Blytung May 03 '21 at 15:48
you can create a custom tab bar using the soution of this [post](https://stackoverflow.com/questions/62071804/custom-tab-bar-react-navigation-5) – docmurloc May 03 '21 at 15:58
Thanks for your time anyways, but don't get it to work. – Mikael Blytung May 03 '21 at 17:08

score 0 · Answer 2 · answered Feb 03 '23 at 00:22

I hope this helps. If you want to navigate between screens that are related to a specific tab button, and have that tab button remain active while moving between these screens, you should set up a StackNavigation within that tab's component. By doing so, the tab button will remain active while navigating within its related screens.

On the other hand, if you want the TabNavigation to be visible throughout the whole application but some screens should not be displayed as tabs, you can add all screens inside the TabNavigation and specify in the options for those screens not to be displayed as tab buttons. That way, while in the screen without a tab button, the tabs will still be visible but none will be active. For example, you can do this for a screen called 'Title':

<Tab.Screen
name={'Title'}
component={Videos}
options={{
tabBarIcon: ({tintColor}) => (
<Image source={require('../../assets/icons/user.png')} size={25} />
),
tabBarButton: () => null   <---- *this causes it to have no button*
}}
/>

I hope this helps!

Always show BottomTabNavigation

2 Answers2