how to remove tab bar from a particular screen?

Question

I have created a navigator with 4 tab navigator screens->Home, Search, Upload and Library; and I have stack navigation screens like Sign up, log in, home tabs, and video. Now, I want to remove the bottom tab bar from the Upload screen but am not sure whether it is possible?

Below is the exact code that I have written:

import React from 'react';
import 'react-native-gesture-handler';
import {StatusBar} from 'react-native';
import {NavigationContainer, DarkTheme} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialIcons';

import Home from '../screens/Home';
import Search from '../screens/Search';
import Library from '../screens/Library';
import ProfileAuthor from '../screens/ProffileAuthor';
import Shoot from '../screens/Shoot';
import LoginScreen from '../screens/LoginScreen';
import SignUp from '../screens/SignUp';

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

function myTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#000"
      inactiveColor="#000"
      barStyle={{
        backgroundColor: '#FFF',
      }}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Home',
          tabBarLabel: 'Home',
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons color={color} name="home" size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          title: 'Search',
          tabBarLabel: 'Search',
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons color={color} name="search" size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Upload"
        component={Shoot}
        options={{
          title: 'Upload',
          tabBarLabel: 'Upload',
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons color={color} name="add-box" size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Library"
        component={Library}
        options={{
          title: 'Library',
          tabBarLabel: 'Library',
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons
              color={color}
              name="person-outline"
              size={26}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

const Routes = () => {
  return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="login"
          component={LoginScreen}
          options={{
            header: () => null,
          }}
        />
        <Stack.Screen
          name="signup"
          component={SignUp}
          options={{
            header: () => null,
          }}
        />
        <Stack.Screen
          name="Home"
          component={myTabs}
          options={{
            header: () => null,
          }}
        />
        
        <Stack.Screen
          name="Video"
          component={ProfileAuthor}
          options={{
            header: () => null,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Routes;

could anyone please tell me whether it is possible in this structure, if yes then how to implement? any help would be great.

score 1 · Accepted Answer · answered Sep 01 '20 at 07:32

tabBarVisible: false

It is working when you used createBottomTabNavigator from @react-navigation/bottom-tabs. but if you will use createMaterialBottomTabNavigator from @react-navigation/material-bottom-tabs to create bottom tabs, it's not working. createMaterialBottomTabNavigator can't hide the tab bar, you can see that there is no such option in docs. You should try to nest the bottom-tabs navigator inside the stack navigator if you want it to disappear on the other screens of the stack navigator. The below code is for the hide tab bar in createBottomTabNavigator.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const BottomTabs = createBottomTabNavigator();

<BottomTabs.Navigator>
  <BottomTabs.Screen name={AppRoute.MORE} component={MoreStack}
        options={({ route }) => ({
            tabBarVisible: getTabBarVisibility(route),
            tabBarLabel: languages.stack_More
        })}
    />
</BottomTabs.Navigator>


const getTabBarVisibility = (route: any) => {
    const routeName = route.state ? route.state.routes[route.state.index].name: '';
   if (routeName === AppRoute.PROFILE
        || routeName === AppRoute.HELP_CENTER
        || routeName === AppRoute.TERMS_CONDITION) {
       return false;
    }
   return true;
}

how to remove tab bar from a particular screen?

1 Answers1