How to hide Tab Bar from the screen in React Navigation 6

In this tutorial, we’ll show how to hide Tab bar from the screen in React Navigation 6.

If you are using the default Tab provided by React Navigation hiding the tab bar is so easy. we can use setOptions a method like this way

 const hideTabBar = () => {
    navigation.setOptions({
      tabBarStyle: { display: 'none' },
    });
  };
  const showTabBar = () => {
    navigation.setOptions({
      tabBarStyle: { display: 'flex' },
    });
  };

Hide-Show Tab Bar - Snack

Try this project on your phone! Use Expo’s online editor to make changes and save your own copy.

Snack

You can check the snack app.

But if you have a custom tab bar. its require effort to make it work.

Let's assume you have a custom tab bar.

function CustomTabBar() {
  return (
    <View style={{ height: 60, backgroundColor: 'red' }}>
      <Text>Custom Tab Bar</Text>
    </View>
  );
}

function MyTabs() {
  return (
    <Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

in here if you try to show/hide the tab bar. it won't work. We need to get tab bar options and render according to that value.

function CustomTabBar({descriptors,state}) {
   const focusedOptions = descriptors[state.routes[state.index].key].options;
  if (focusedOptions?.tabBarStyle?.display === "none") {
    return null;
  }
  return (
    <View style={{ height: 60, backgroundColor: 'red' }}>
      <Text>Custom Tab Bar</Text>
    </View>
  );
}

We added focusedOptions variable, now we can get tabBarStyle value. if it none render null or whatever you want.

That's it. now you can toggle your tab bar.