React Navigation how to hide tabbar from inside stack navigation

Question

I have the following stack navigation and screens:

export const HomeStack = createStackNavigator({
    Home: HomeScreen,
    Categories: CategoriesScreen,
    Products: ProductsScreen,
    ProductDetails: ProductDetailsScreen,
})

I want to hide tabs only in ProductDetailsScreen:

export const hideTabBarComponents = [
    'ProductDetails',
]

export const MainTabs = createBottomTabNavigator(
    {
        Home: HomeStack,
        Favorite: FavoriteScreen,
        Account: AccountScreen,
        Help: HelpScreen,
        Events: EventsScreen
    },
    {
        navigationOptions: ({ navigation }) => ({

            tabBarIcon: ({ focused, tintColor }) => {
                ...
            },
            tabBarLabel: ({ focused, tintColor }) => {
                ...
            },
            
            tabBarVisible: ! hideTabBarComponents.includes(navigation.state.routeName)

        }),
    }
);

The problem is that can't pass any options to Tab navigation from Stack Navigation

Not all of the stack screens only one of them

Answer 1

This is how I hide the tab bar in a specific screen in a stack (React Nav 5.x & 6.x)

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
const ProfileStack = createStackNavigator();
    
const ProfileNavigator = ({ navigation, route }) => {
        React.useLayoutEffect(() => {
            const routeName = getFocusedRouteNameFromRoute(route);
            if (routeName === "Group"){
                navigation.setOptions({tabBarVisible: false});
            }else {
                navigation.setOptions({tabBarVisible: true});
            }
        }, [navigation, route]);
        return(
            <ProfileStack.Navigator>
                <ProfileStack.Screen name="Profile" component={ProfileScreen} />
                <ProfileStack.Screen name="Group" component={GroupScreen} />
            </ProfileStack.Navigator>
        )};

If you guys have number of screens that need to hide the tabbar use a string array of those route names and hide tabbar if focused route name includes in that array

const tabHiddenRoutes = ["Group","Map"];

if(tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))){
  navigation.setOptions({tabBarVisible: false});
 }else{
 navigation.setOptions({tabBarVisible: true});
}

[Edit] - In case of v6, use display because tabBarVisible is deprecated in the favour of tabBarStyle-

if(tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))){
  navigation.setOptions({tabBarStyle: {display: 'none'}});
 } else {
 navigation.setOptions({tabBarStyle: {display: 'flex'}});
}

Answer 2

To hide the tab bar in one of the screens, this works for React Navigation v4:

HomeStack.navigationOptions = ({ navigation }) => {

    let tabBarVisible = true;

    let routeName = navigation.state.routes[navigation.state.index].routeName

    if ( routeName == 'ProductDetails' ) {
        tabBarVisible = false
    }

    return {
        tabBarVisible,
    }
}

For v5, and v6 please check @Chathuranga Kasthuriarachchi's answer here

Answer 3

For React Navigation 5, you can do this inside of the stack component:

props.navigation.dangerouslyGetParent().setOptions({
  tabBarVisible: false
});

https://reactnavigation.org/docs/en/navigation-prop.html#setoptions---update-screen-options-from-the-component

Be careful with using this though, you'll want to reset the tabBarVisible to true once unmounting the component.

For example, with React hooks inside the Stack component:

    useEffect(() => {
      const parent = props.navigation.dangerouslyGetParent();
      parent.setOptions({
        tabBarVisible: false
      });
      return () =>
        parent.setOptions({
          tabBarVisible: true
        });
    }, []);

Or you can reset the tabBarVisible in the Stack.Screen component with the back button press like this:

    const StackNav = (props) => (
      <Stack.Screen
        name='name'
        component={Name}
        options={{
          headerTitle: 'Name',
          headerLeft: () => (
            <Text
              onPress={() =>
                props.navigation.setOptions({
                tabBarVisible: true
                })
              }
            >
              on back
            </Text>
          )
        }}
      />
    }

(The second approach works better.)

Answer 4

if you are using navigation 6 : Than The tabBarVisible option is no longer present. You can achieve the same behavior by specifying tabBarStyle: { display: 'none' } in options.

Answer 5

first let's creat a stack navigator and call it StackHome

const StackHome = createStackNavigator(
{
 Home: Home,
 CustomHide: CustomHide,
});
// This code let you hide the bottom app bar when "CustomHide" is rendering
StackHome.navigationOptions = ({ navigation }) => {
 let tabBarVisible;
  if (navigation.state.routes.length > 1) {
navigation.state.routes.map(route => {
  if (route.routeName === "CustomHide") {
    tabBarVisible = false;
  } else {
    tabBarVisible = true;
  }
});
 }

 return {
   tabBarVisible
 };
};
export default StackHome;

Answer 6

If, like me, you struggled to make this work in React Navigation 6, here is how I achieved it... I had a bottomTabNavigator containing several stacks, and wanted to hide the tabbar on a specific screen (player) of the homestack

    import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
    ...
    
    <BottomTabNavigator.Screen 
         name="HomeStack" 
         component={HomeStack} 
         options={({route}) =>({ tabBarStyle: getTabBarStyle(route) })} />
    
    ....
    const getTabBarStyle = (route) => {  
      const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
      let display = (routeName === 'Player') ? 'none':'flex';
      return {display}
    }

Answer 7

With createBottomTabNavigator you can hide it with the defaultNavigationOptions

defaultNavigationOptions: {
  tabBarVisible: false,
},

Answer 8

The flow goes like this

import {
  getFocusedRouteNameFromRoute,
} from "@react-navigation/native";
<BottomTab.Navigator
      screenOptions={(props) => {
        console.log(getFocusedRouteNameFromRoute(props.route));
        return {
          tabBarActiveTintColor: Colors.Red,
          tabBarInactiveTintColor: Colors.Blue,
          headerShown: false,
          tabBarStyle: {
            display:
              getFocusedRouteNameFromRoute(props.route) === "ProdDetails"
                ? "none"
                : "flex",
          },
        };
      }}
    >
{...children}
</BottomTab.Navigator>

Cheers

Answer 9

I achieved that in this way. First the hook:

import {useLayoutEffect} from 'react';
import {useNavigation, useRoute, getFocusedRouteNameFromRoute} from '@react-navigation/native';

export function useHiddenTabs (hiddenTabRoutesArray, fallbackRoute) {
  const navigation = useNavigation();
  const route = useRoute();

  useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? fallbackRoute;
    navigation.setOptions({
      tabBarVisible: !hiddenTabRoutesArray.includes(routeName),
    })
  }, [navigation, route]);
}

And then usage:

import {getFocusedRouteNameFromRoute} from '@react-navigation/native';

const routesWithoutTabs = ['ScreenWithoutTabs'];

const StackComponent = ({navigation}) => {

  useHiddenTabs(routesWithHiddenTabs, 'FallbackRoute');

  return (
    <Stack.Navigator /* other props */>
      <Stack.Screen
        name='ScreenWithoutTabs'
        component={ScreenWithoutTabsComponent}
      />
    </Stack.Navigator>
  );
};

Corresponding docs

But probbaly you just need to consider to just redesign your routing tree. Maybe these screens just should be somewhere out of your tab navigator.

Answer 10

This is how I did. Select the stack in which you want to hide the tab bar. You can select it based on the index.

AppStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
    if (navigation.state.index > 0) {
       tabBarVisible = false;
    }
    return {
       tabBarVisible
    };
};

Here is the link of the docs of React navigation

Answer 11

const AppNavigation = createBottomTabNavigator( {

    Learning:
    {
        screen: LearningStack,
        navigationOptions: {
            tabBarLabel: 'Learning',
            // tabBarVisible: false,
            tabBarIcon: ({ tintColor, focused }) => (
                // <Icon name='terminal' size={25} color={Colors.white} />
                <Image
                    source={require('../assets/TabBarIcon/Learning_96px.png')}
                    style={{ width: 45, height: '90%', }}
                />
            ),

        }
    },

Learning

Stack.navigationOptions

= ({ navigation }) => {

    let tabBarVisible = false;

    let routeName = navigation.state.routes[navigation.state.index].routeName

    if (routeName == 'Learning') {
        tabBarVisible = true
    }

    return {
        tabBarVisible
    }
},

})

Answer 12

You can also create a Modal inside the screen and make it always visible, with something like this:

const Example = () => {
  return(
    <ScrollView>
      <Modal animationType="slide" transparent={true} visible={true} >
          <View style={styles.modalExample}>
          </View>
      </Modal> 
    </ScrollView>
  )
}

And then style it:

const styles = StyleSheet.create({
  modalExample: {
    height:"100%",
    width:"100%",
    backgroundColor: "#000000",
  },
})

Answer 13

Another way is to use the height of the tab bar to hide it. This is required when using createMaterialTopTabNavigator, since it does not have a tabBarVisible property. You can use a global state variable (Redux or UseState) or you can use something similar to the selected answer, where you keep track of the currently active screen.

Assuming 'hideTab' is a boolean.

const Tab = createMaterialTopTabNavigator();
...
<Tab.Navigator
   tabBarOptions={{style: {height: hideTab ? '0%' : null}}>

Answer 14

The are multiple ways to do it in v5: 1. use tabBarVisible option based on specific strings/route names

using the useRoute() hook & setOptions({ tabBarVisible: false })

2. use dangerouslyGetParent() method for dynamic control For specific screen

navigation.dangerouslyGetParent()?.setOptions({ tabBarVisible: false })

On scrolling hide the bottom tab bar

const navigation = useNavigation();

const handleScroll = ({ nativeEvent: { contentOffset: { y = 0 }} }) => {
  navigation.dangerouslyGetParent()?.setOptions({ tabBarVisible: y <= 50 })
}

return (
  <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
    ...
  </ScrollView>
)

3. for simple nesting you can pass the "tab bar navigation" to any stack screen props

// navigation -> is the bottomTab navigation instance
export default ({ navigation }) => {
  return (
    <Stack.Navigator screenOptions={screenOptions}>
      <Stack.Screen name="Trips">
        // add a new prop named tabNavigation={navigation}
        // you also have access to the stack navigation
        {(props) => <Trips tabNavigation={navigation} {...props} />}
      </Stack.Screen>
      <Stack.Screen name="Trip" component={Trip} />
    </Stack.Navigator>
  );
}

and use the examples from point 2

tabNavigation?.setOptions({ tabBarVisible: false })

Answer 15

You can use the useFocusEffect hook to check if the screen is focused then hide the navigator with navigation.dangerouslyGetParent()

This is a custom hook I created:

import React from 'react';
import { useFocusEffect } from '@react-navigation/native';

const useHideTabBar = (navigation) => {

    useFocusEffect(
        React.useCallback(() => {

            // hide
            const parent = navigation.dangerouslyGetParent();
            parent.setOptions({
                tabBarVisible: false,
            });

            // reveal after changing screen
            return () =>
                parent.setOptions({
                    tabBarVisible: true,
                });

        }, []),
    );


};

export default useHideTabBar;

Answer 16

<Navigator initialRouteName="Home"}>
    <Screen name="Home" component={Home} />
    <Screen
        name="About"
        component={About}
        options={{ tabBarStyle: { display: 'none' } }}
    />
</Navigator>

Answer 17

just adding in screen options work for me

  tabBarButton: () => null,

Answer 18

This is the solution that I used in my project.

I have a bottom tab navigator, with 2 routes: Home and Profile. The ProfileHomePage route brings to a stack navigation ProfileStackNavigation.

Then, in the ProfileStackNavigation, I have the ProfileHomePage where the bottom tab should appears, and other child pages, where the bottom tabs should not be visible. I added a param tabBarVisible: false in that pages.

Finally, in the MainTabNavigator ProfileHomePage route, I added the navigationOptions function, to test if the current route has the param tabBarVisible.

const ProfileStackNavigation = createStackNavigator(
  {
    ProfileHomePage: ProfileHomePage,
    AboutAppPage: {screen: AboutAppPage, params: {tabBarVisible: false}},
    DiaryPage: {screen: DiaryPage, params: {tabBarVisible: false}},
    FilesPage: {screen: FilesPage, params: {tabBarVisible: false}},
    NotificationsPage: {screen: NotificationsPage, params: {tabBarVisible: false}},
  },
  {
    initialRouteName: 'ProfileHomePage',
  },
);

const MainTabNavigator = createBottomTabNavigator(
  {
    HomePage: HomePage,
    ProfileHomePage: {
      screen: ProfileStackNavigation,
      navigationOptions: ({ navigation }) => {
        const {params = {}} = navigation.state.routes[navigation.state.index];
        const tabBarVisible = params.tabBarVisible === false ? params.tabBarVisible : true;
        return {
          tabBarVisible,
        }
      }
    },
  },
  {
    initialRouteName: 'HomePage',
    tabBarComponent: props => <AppFooterTab {...props} />,
  },
);

Answer 19

Another option here would be to add another stack navigator as a parent of the tab navigator, and put the screen that doesn't need the tab navigator there. This is the recommended way in versions of react navigation < 5

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  /* any other route you want to render under the tab bar */
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const HomeStack = createStackNavigator({
  Tabs: TabNavigator,
  Details: DetailsScreen,
  /* any other route you want to render above the tab bar */
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: HomeStack,
});

Answer 20

try this code and it's will work:

  const getTabBarVisibility = (route) => {
const routName = route.state
  ? route.state.routes[route.state.index].name
  : '';
if (routName == 'chat') {
  return false;
} else {
  return true;
}

};

Answer 21

import React, {useLayoutEffect} from "react";
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

const MainStackNavigator = ({navigation, route}) => {
    useLayoutEffect(() => {
        const routeName = getFocusedRouteNameFromRoute(route);
        if (routeName === 'Details') {
            navigation.setOptions({tabBarVisible: false});
        }else {
            navigation.setOptions({tabBarVisible: true});
        }
    }, [navigation, route])

Answer 22

Easy solution as mentioned in react-navigation library, You can change the navigation structure react-navigation-doc

Answer 23

REACT Native V6

I am using typescript and I encountered such an issue too. Since the tabBarVisible option is no longer available, I used the tabBarStyle instead and set the display property to 'none'.

Suppose I have two screens, the Home screen which is the tabbed screen and another screen say Side screen which is a Stacked screen where I want to hide the tab bar, then I do this in the Stacked screen navigator component:

const setTabStyleVisibility = (shouldBeVisible: boolean) =>
shouldBeVisible
  ? ({
      tabBarStyle: { display: 'flex' },
    } as Partial<BottomTabNavigationOptions>)
  : ({
      tabBarStyle: { display: 'none' },
    } as Partial<BottomTabNavigationOptions>);

I have a custom button defined as:

<Button title={btnTitle} onPress={onPressHandler}/>

On the Home Screen, I have a button which navigates to the Side screen and hides the tab by defining the custom onPressedHandler prop to the custom button as:

onPressHandler={() => {
    navigation.setOptions({
      ...setTabStyleVisibility(false),
    });
    navigation.navigate("Side");
  }}

Then I had a button passed to the next screen (Side screen) where the tab bar will be shown on going back to Home screen. I set the onPressedHandler which is a custom prop to the custom button to

onPressHandler={() => {
    navigation.setOptions({
      ...setTabStyleVisibility(true),
    });
    navigation.navigate("Home");
  }}

Answer 24

export const useHideTabsHook = () => {
const route = useRoute();
const navigation = useNavigation();
const tabHiddenRoutes = getHiddenRoutesForRoute(route.name);
useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route);
    if (tabHiddenRoutes && tabHiddenRoutes.includes(routeName)) {
        navigation.setOptions({ tabBarStyle: { display: 'none' } });
    } else {
        navigation.setOptions({ tabBarStyle: { display: 'flex' } });
    }
}, [navigation, route, tabHiddenRoutes]);
};

write your own logic to get. the routes in each tab getHiddenRoutesForRoute

const getHiddenRoutesForRoute = routeName => {
switch (routeName) {
    case 'tab1':
        return tab1HiddenRoutes;
    case 'tab2':
        return tab2HiddenRoutes;
    default:
        return null;
}
};

Include this hook in each tab stack. this is using React-Navigation v6.

Answer 25

Actually, by the docs explanation, it would be better to think deeply and re-arrange the screens to gather Tabbar screens underneath of TabStack and segregate the rest and especially the screens that you don't want to have Tabbar inside them, under the Navigation stack.

But if you want to hide the Tabbar in some sub-screens of a TabStack screen the following codes will be useful:

import { useNavigation } from '@react-navigation/native';

const Account = () => {
  const { getParent } = useNavigation();

  useEffect(() => {
    const parent = getParent();

    parent?.setOptions({
      tabBarStyle: { display: 'none' },
    });

    return () => {
      parent?.setOptions({
        tabBarStyle: { display: 'flex' },
      });
    };
  }, []);

  return (
    <View>
      ~~~

And I have created an useful custom hook for it:

import { useEffect } from 'react';
import useNavigation from './useNavigation';

const useHideTabBar = () => {
  const { getParent } = useNavigation();

  useEffect(() => {
    const parent = getParent();

    parent?.setOptions({
      tabBarStyle: { display: 'none' },
    });

    return () => {
      parent?.setOptions({
        tabBarStyle: { display: 'flex' },
      });
    };
  }, []);
};

export default useHideTabBar;

Answer 26

For Rect Navigation v6.x, I found 3 different methods to hide the tabBar from some screens. The following script demonstrates each of these methods. Credit goes to the various answers for this question.

// ///////// 
import { getFocusedRouteNameFromRoute, } from "@react-navigation/native";

const ShiftUpdateEmployerStack = (params) => {
    // Method#1: Hides the tabBar on the screen(s), which satisfy a certain condition (or all screens), in a "stack"
    React.useLayoutEffect(() => {
        // (1.a) Hide the tabBar on all screens in this stack: 
        // params.navigation.setOptions({ tabBarStyle: {display: "none"} });

        // OR (1.b) Hide the tabBar on the screens, which satisfy a certain condition 
        const routeName = getFocusedRouteNameFromRoute(params.route);
        if (routeName === "EmployerMenuScreen") { // the screen, which you want to hide the tabBar on
            params.navigation.setOptions({ tabBarStyle: {display: "none"} });
        } else {
            params.navigation.setOptions({ tabBarStyle: {display: "flex"} });
        }
    }, [params.navigation, params.route]);
    
    const MyStack = createNativeStackNavigator();

    return (
        <MyStack.Navigator>
            <MyStack.Screen name="SiteListScreen" component={SiteListScreen}/>
        </MyStack.Navigator>
    );
};

// ///////// 
const MainNavigator = () => { 
    const MyNav = createBottomTabNavigator(); 

    return (
        <MyNav.Navigator 

            // (Optional) Using a custom bottom tab bar, instead of the default one. If a custom tab bar is used, additional code is required (below)
            tabBar={params => <CustomTabBarContent {...params} />}

            // Method#2: Hides the tabBar on some screen(s) 
            screenOptions={(params) => {
                return { 
                    tabBarStyle: { display: (params.route.name === "ListShiftEmployerScreen" ? "none" : "flex") }, 
                }; 
            }}
        >
            {/* Method#3: Hides the tabBar on all screens in the "stack" */}
            <MyNav.Screen name="InitialStack" component={InitialStack} options={{ tabBarLabel: "Home", tabBarStyle: {display: "none"}, }} />
        </MyNav.Navigator>
    );
}; 

// ///////// Using a custom tabBar
const CustomTabBarContent = ({ state, descriptors, navigation, }) => {
    // If the option (tabBarStyle: { display: "none" }) is used anywhere, the following couple of statements are required
    const focusedOptions = descriptors[state.routes[state.index].key].options;
    if (focusedOptions?.tabBarStyle?.display === "none") {
        return null;
    }

    return (
    <View style={{ flexDirection: "row" }}>
        {state.routes.map((route, index) => {
            // more code...
            // see https://reactnavigation.org/docs/bottom-tab-navigator 
        })}
    </View>
    );
}; 

Answer 27

In my case i had a TabBar(Parent) and inside it StackNavigator(Parent 2) and then my DrawerNavigator.

that is the solution that worked for me on react-navigation 6:

import React from 'react';
import { useFocusEffect } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

const MyStack = ({ navigation, route }) => {    
  useFocusEffect(
      React.useCallback(() => {
        const parent = navigation.getParent();
        if (route.name === 'myRouteName')
          parent.setOptions({ tabBarStyle: { display: 'none' } });
        else parent.setOptions({ tabBarStyle: { display: 'flex' } });
        return () => {
          parent.setOptions({ tabBarStyle: { display: 'flex' } });
        };
      }, [navigation, route]),
    );

  return (
    <Drawer.Navigator>
        <Drawer.Screen name="myRouteName"/>
    </Drawer.Navigator>
  );
};

Answer 28

If you're facing an issue where the TabBar leaves empty space while using @Chathuranga Kasthuriarachchi's solution, you can consider using position:absolute and controlling the bottom to hide it.

  const navigation = useNavigation();
    const route = useRoute();
    const tabBarHeight = useBottomTabBarHeight();
    const focusedName = getFocusedRouteNameFromRoute(route);

    const shouldHideTabBar =
      tabRoutes.includes(focusedName as RouterEnum) ||
      focusedName === undefined;

    useLayoutEffect(() => {
      navigation.setOptions({
        tabBarStyle: {
          position: "absolute",
          bottom: shouldHideTabBar ? 0 : -tabBarHeight,
        },
      });
    }, [route]);

make the Tab screen have a bottom padding

<Stack.Screen
            key={screen.name}
            name={screen.name}
            component={screen.component}
            options={{
              contentStyle: {
                 paddingBottom: shouldHideTabBar ? tabBarHeight : 0,
              },
            }}
          />

ref: https://reactnavigation.org/docs/bottom-tab-navigator/#tabbarstyle

Answer 29

const AppStack = createStackNavigator({
  SplashScreen: {
    screen: SplashScreen,
    navigationOptions: {
      header: null,
    },
  },
  Home: Home,
  CarouselMap: CarouselMap,
  HeatMapComponent: HeatMapComponent,
});

Answer 30

this worked for me:

<BottomTab.Navigator
  screenOptions={{
    tabBarStyle: {
      display: isTabVisible ? 'flex' : 'none'
    }
  }}>

where isTabVisible is a global state variable.