Hide tabbar in React navigation dynamically

Question

My react native application has the following nested navigation structure

e.g.

The one issue with this structure is that in the inner nested pages of stack (chat or task) I will need hide the bottom tabbar. I can use this The https://reactnavigation.org/docs/tab-navigator.html#tabbarvisible to control the visiblity.

However, this cannot happen on load since the hiding is a dynamic activity for inner pages in the stack.

On connecting to redux, I can get the property in the tabbar component, but setting the tabbar visiblity then re-renders the component.

Is there any other approach for this common navigation pattern in android ?

score 1 · Answer 1 · answered Sep 03 '22 at 13:40

You can hide it dynamically using navigation.setOptions

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

score 0 · Answer 2 · answered Nov 16 '20 at 19:13

0

You can hide the tab bar in specific screens by rearranging the screen stacks like shown in official docs of version 5.x https://reactnavigation.org/docs/hiding-tabbar-in-screens/

answered Nov 16 '20 at 19:13

Vinil Prabhu

1,279
1
10
22

this doc not at all clear and create more confusion for beginners. This doesn't solve the scenario like : TabNav( A -> Home, B -> Setting ), Stack (Home -> Latest, Popular). I want to display tab bar while a,B selection but hide it when i am inside latest,popular – sarfrazanwar Sep 14 '21 at 18:14
https://stackoverflow.com/a/51692805/5895297 check this answer, maybe it can help – Vinil Prabhu Sep 20 '21 at 06:07

score 0 · Answer 3 · answered Apr 29 '21 at 17:47

I fixed it by using height, and it worked like charm.

style: {
     height: isFullScreen ? 0 : null
}

If you want to send this boolean from any specific screen, you can do it with setParams

 navigation.setParams({
     isFullScreen: true      // or false
 });

Then you can get this parameter with

const { isFullScreen } = route.params;

score 0 · Answer 4 · answered Nov 04 '22 at 13:34

You can do this (react-navigation v6) using useLayoutEffect and navigation.setOptions(). By using useLayoutEffect you ensure that tab bar is removed before the screen is painted so you won't see the tab bar initially and then see it disappear. You can hide the tab bar via navigation.setOptions either in the Stack, or on the screen. If you want to handle the hiding/showing of the tabbar on specific screens from the stack you first will need the route name. Here is an example:

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

const Stack = createStackNavigator({ navigation, route });

export const ChatStack = ({ navigation, route }) => {
    const routeName = getFocusedRouteNameFromRoute(route);
    useLayoutEffect(() => {
        switch (routeName) {
        case 'Chat':
            navigation.setOptions({ tabBarStyle: { display: 'flex' } });
            break;
        case 'ChatLanding':
            navigation.setOptions({ tabBarStyle: { display: 'none' } });
            break;
        case 'ConvoThread':
            navigation.setOptions({ tabBarStyle: { display: 'none' } });
            break;
        default:
            break;
    }
}

score -3 · Answer 5 · answered Jun 16 '18 at 16:25

-3

in the screen that you want to hide the tabbar, use following code

static navigationOptions = {
    tabBarVisible: false,
}

answered Jun 16 '18 at 16:25

Nasser Hadjloo

12,312
15
69
100

Hide tabbar in React navigation dynamically

5 Answers5