CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-navigation
dmouawad
dmouawad

Reputation: 589

How to hide bottom navigation bar on a specific screen in react native?

I am using React Native and React Native Navigation to build out my application. Currently, I have three bottom tabs: Home, Upload Video and Messages. Upon selection of the Upload Video tab, I want to render the Upload Video component and hide the bottom tabs on just that screen, and display a header with 'Cancel' (takes them back to the HomeView) and 'Post' buttons (this has already been done). I've had an extremely difficult time hiding the tab bar on this specific screen.

I tried following the code here (How can I hide the bottom tab bar on a specific screen (react-navigation 3.x)); however, that ended up being unsuccessful and I was not able to hide the bottom tabs on any of the screens this way.

Currently, I have this as my bottom navigator:

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

Any insight would be extremely helpful, thanks.

Upvotes: 30

Views: 76098

Answers (13)

Oluwaseyi Adejugbagbe
Oluwaseyi Adejugbagbe

Reputation: 339

I noticed the latest answer here isn't working for the new update. If you are planning to implement hide tab from specific screen, then do the following:

Create method

const isTabPage = (route: any) => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
    return ['Home', 'Gifts', 'Causes', 'Profile', 'Bundle'].includes(routeName);
}

then use the method in Tab Navigator

<Tab.Navigator
    screenOptions={({ route }) => ({
        headerShown: false,
        tabBarLabelStyle: { fontSize: 14},
        tabBarIconStyle: { marginBottom: 5 },
    })}>
    <Tab.Screen
        options={({ route }) => ({
            tabBarStyle: { 
                paddingTop: 10, 
                paddingBottom: 10, 
                height: Platform.OS === "android" ? 80 : 100, 
                display: isTabPage(route) ? 'flex' : 'none' },
            }
       )}
       name="Home" component={ HomeStack } />
       // More screens
</Tab.Navigator >

Upvotes: 0

Vinod Santharam
Vinod Santharam

Reputation: 11

My app is built with RN 0.74.0 and react-native-navigation 6ˆ. I tried solutions mentioned in this post, it didn't work. I reorganise the navigation flow described in the documentation https://reactnavigation.org/docs/hiding-tabbar-in-screens/. It works flawless.

However if your navigation flow is complex. The following code may save your day:

 <Tab.Navigator
        screenOptions={({route}) => ({
        headerShown: false,
        tabBarStyle: {
          display: route.name === 'Wizard' ? 'none' : 'flex',
          backgroundColor: currentTheme.colors.background,
        },
      })}>
      <Tab.Screen
        name="Home"
        component={HomeStackScreen}
      />
      <Tab.Screen
        name="Wizard"
        component={WizardStackScreen}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
      />
</Tab.Navigator>

In this scenario, the user taps on the Wizard button then the navigation follows WizardStackScreen without Tab Navigation.

Upvotes: 1

Homit Dalia
Homit Dalia

Reputation: 308

On the screen you want to hide the tab bar add the following code. This works with v7.

useEffect(() => {
  navigation.getParent() ? .setOptions({
    tabBarStyle: {
      display: 'none'
    }
  });
  return () => {
    navigation.getParent() ? .setOptions({
      tabBarStyle: {
        display: 'flex'
      }
    });
  }
}, [])

Upvotes: 8

Neto Domingos
Neto Domingos

Reputation: 101

In version 6+ this resolve my problem

<Tab.Screen
    name="Profile"
    component={Profile}
    options={{ tabBarButton: (props) => null }}
  />

Upvotes: 0

Escaper
Escaper

Reputation: 571

I've traversed the internet like never before to find a solution for this problem as the provided solution by the docs did not work in the slightest.

I had the following navigational Set-Up:

  • Bottom Tabs
    • A (NativeStack)
      • 1 (Screen)
      • 2 (Screen)
      • 3 (Screen)
    • B (NativeStack)
    • C (NativeStack)

I wanted to hide the bottom bar in Screen 1. What finally did the trick was the following snippet in the corresponding screen:

  useEffect(() => {
    navigation.getParent()?.setOptions({
      tabBarStyle: {
        display: "none"
      }
    });
    return () => navigation.getParent()?.setOptions({
      tabBarStyle: undefined
    });
  }, [navigation]);

The effect is run when the navigation prop updates and with that implicitly after the screen is being opened. With getParent() I get the bottom tabs navigator and can set the options with setOptions(...). To bring the bottom tabs back one has to manually set the options. I solved this by returning the method that resets the tabBarStyle in the call of useEffect(). This call is being made when it's time to clean-up, meaning that it will run as soon as the screen is being unmounted.

May this save same of you of the desperation I had to go through.

Upvotes: 41

Uzzam Altaf
Uzzam Altaf

Reputation: 393

In Version 6 this worked for me:

To hide the bottom tab navigator from the screen:

navigation.getParent()?.setOptions({tabBarStyle: {display: 'none'}});

To show the bottom tab navigator from the screen:

navigation.getParent()?.setOptions({tabBarStyle: {display: 'flex'}});

Upvotes: 3

Zafer ATLI
Zafer ATLI

Reputation: 81

After searching and trying a lot of methods I changed the top element View to Modal then hid bottombar, because modal can be upper bottom bar. It's not the best but still useful.

<View>
  //code block
</View> 

to->
         
<Modal animationType='fade' transparent={false} visible={true}>
   /code block
</Modal>

Upvotes: 0

Kalebe Samuel
Kalebe Samuel

Reputation: 141

Just setting the tabBarStyle to none doesn't work for me, I needed to use the property tabBarVisible too, if using hooks you can do something like that:

export function useHideBottomBar() {
    const navigation = useNavigation();

    useEffect(() => {
        navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' }, tabBarVisible: false });
        return () =>
            navigation.getParent()?.setOptions({ tabBarStyle: undefined, tabBarVisible: undefined });
    }, [navigation]);
}

Upvotes: 7

Farhaan
Farhaan

Reputation: 210

In React Navigation V6 add display: none in options under tabBarStyle. Add tabBarButton: () => null, to disable icon in Tab.

<Stack.Screen
    name="Add Product"
    component={AddProduct}
    options={() => ({
      tabBarStyle: {
        display: "none",
      },
      tabBarButton: () => null,
    })}
  />

Upvotes: 5

Robin Khan
Robin Khan

Reputation: 223

In React navigation 5+ I used the following approach to hide a tab bar on a specific screen which was inside a stack navigator of a tab screen. In my tab navigator containing file I made a function, and then set the options property using the function which will trigger dynamically.

function getIsTabBarShown(route) {
    const routeName = getFocusedRouteNameFromRoute(route) ?? routes.DASHBOARD;

    switch (routeName) {
        case routes.MEMBERDETAILS:
            return false;
        default:
            return true;
    }
}

This function will return false when user would go to MemberDetails Page which is inside MemberNavigator Stack.

<Tab.Screen 
    name="MemberTab"
    component={MemberNavigator}
    options={({ route }) => ({
        title: 'Members',
        tabBarVisible: getIsTabBarShown(route),
        tabBarIcon: ({ color, size }) =>
        <MaterialCommunityIcons name="account-group" color={color} 
   size={size} />
})} />

Here is the official docs to learn more click here.

Upvotes: 0

gpbaculio
gpbaculio

Reputation: 5968

on v5 you can modify options using a function and default arg navigation.:

<BottomTab.Screen
      name="Explore"
      component={Explore}
      options={({ navigation }) => {
        const { routes, index } = navigation.dangerouslyGetState();
        const { state: exploreState } = routes[index];
        let tabBarVisible = true;
        if (exploreState) {
          const { routes: exploreRoutes, index: exploreIndex } = exploreState;
          const exploreActiveRoute = exploreRoutes[exploreIndex];
          if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
        }
        return {
          tabBarVisible,
          title: "Explore",
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="search1" color={color} size={size} />
          ),
        };
      }}
    />

see my answer: https://stackoverflow.com/a/64042879/5288560

Upvotes: 3

R.K
R.K

Reputation: 1839

Since react-navigation 5 is now being used, the above solution doesn't work anymore.

For React-Navigation 5, refer to this link.

Upvotes: 1

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

You need to specify for each TabBar screen or stack for which you need to hide tabbar,

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
        navigationOptions:()=>{
          return {
            tabBarVisible:false,
          };
       }
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

Upvotes: 17

Related Questions