v6 hiding tabbar with {display:none} does not work on iOS

[tarikfp]

Current behavior

(I am opening this issue here because it is said that this issue might be related to this library
I have already opened the issue in the react-navigation repo)

I am trying to achieve dynamically hiding tab bar behavior. I already know what documentation suggest for this purpose.

However, I am not a big fan of restructuring whole navigators and routes for only hiding tab bar. Thus, I did prefer a more dynamic way. But, I am facing a problem with IOS simulator/real device. It works fine on android devices.

What I do is basically, (just a summary of the logic I do app

  <BottomTabBar
    style={{ display: shouldRenderTabBar ? "flex" : "none" }}
    {...props}
  />;

And this is what happens on ios simulator/real-device. Video link

Seems like display:none doesn't affect anyway to height of bottom tab bar. I am wondering while it works on android emulator/real-device what's wrong with IOS?

Expected behavior

Hide bottom tab bar with the applied styling

Reproduction

https://snack.expo.dev/@tarikfp/hide-bottom-bar-fails-on-ios

hide-tabbar.mov

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.6
@react-navigation/bottom-tabs	6.1.0
@react-navigation/native-stack	6.2.5
react-native-safe-area-context	3.3.2
react-native-screens	3.9.0
react-native-gesture-handler	1.10.3
react-native	0.66.3

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description and Steps To Reproduce sections.

[hirbod]

@tarikpnr you're not doing this correctly. You're trying to directly manipulating style, while there is a prop for it on screenOptions

I am doing it in an animated way:

      tabBarStyle: {
        transform: [
          {
            translateY: transitionAnim,
          },
        ],
      },

You could do it like so:

      tabBarStyle: {
        display: 'none'
      },

The key is to use tabBarStyle. But be careful: using display: none will be really problematic most of the times. If you really want to use display: none, you'll have to set the tabBarStyle position to absolute. By doing so, you'll end up for the need to compensate for the missing height in every screen using the hook import from useBottomTabBarHeight ( @react-navigation/bottom-tabs). The easiest way is to use transform.

All in all, there is no issue with react-native-screens regarding the tab bar.

[tarikfp]

@tarikpnr you're not doing this correctly. You're trying to directly manipulating style, while there is a prop for it on screenOptions

I am doing it in an animated way:

      tabBarStyle: {
        transform: [
          {
            translateY: transitionAnim,
          },
        ],
      },

You could do it like so:

      tabBarStyle: {
        display: 'none'
      },

The key is to use tabBarStyle. But be careful: using display: none will be really problematic most of the times. If you really want to use display: none, you'll have to set the tabBarStyle position to absolute. By doing so, you'll end up for the need to compensate for the missing height in every screen using the hook import from useBottomTabBarHeight ( @react-navigation/bottom-tabs). The easiest way is to use transform.

All in all, there is no issue with react-native-screens regarding the tab bar.

Well, it was just an example. I do know that there is a prop for tabBarStyle in screenOptions, it corresponds to same thing when you use custom bottom tab bar. by giving your customTabBar component to tabBar props of navigator. display:absolute is another messy solution unfortunately.

However, I can say that it is resolved with using enableScreen(false) in the useEffect on App.js.
So not sure if its really not because of react-native-screens :)

[hirbod]

@tarikpnr oh ok, I could only make assumptions based on your ticket. Maybe it is related though, but I was able to use it with enableScreens (but I am also using the native-stack, not sure if you're doing it as well). But anyway, you'll need workarounds when hiding the tabBar because it won't free the occupied space without position absolute

[tarikfp]

@hirbod Yes, I use native-stack as well. Some says that it might also be related to react-native version. In expo snack you wont see this error.

I really would like to have a prop for tabBarVisible as it used to be before... But apparently, it seems not possible from what I can see.

[wibb36]

exactly, a prop more like tabBarHide is a must. does anyone know how tabBarHideOnKeyboard works?

[genesisbell]

any updates on this? I am having this issue

[sovanyuthchap]

I am having this issue too. How to fix it?

[anckaertv]

Having the same issue. Any fix ?

[rrsalian16]

I'm also having the same issue, Any fix?

[edsztukowski]

I had fixed this issue previously on react native 0.70.1 by setting enableScreens(false) but it seems after upgrading to react native 0.72.2, I'm experiencing it again. Any ideas on how to fix this?

My suspicion is that enableScreens(false) isn't working correctly, because when I went to a specific route and replaced the native-screens with the default stack navigator, I didn't see the bug with tabbar happen.

[gibuhapi2]

I recently change react-native and react-navigation version.
It seems from 0.71.x , problem occurs again.

My package versions are
"react-native": "0.73.4"
"@react-navigation/bottom-tabs": "6.5.16",
"@react-navigation/drawer": "^6.6.7",
"@react-navigation/native": "^6.1.10",
"@react-navigation/native-stack": "^6.9.18",

I tried every solution that answers propose
However it doesn't resolve

My solution are

1. Make gray background dismissed first

In BottomTabView.tsx on @react-navigation/bottom-tabs/src/views
Add style {backgroundColor:'#fff'} to make similar even though tab navigation height is not changed.

style={[sceneContainerStyle,{backgroundColor:'#fff'}]}

2. Call navigation after parentNavigation option change when using navigation push.
   (in Android I change tabbarstyle when user arrive detail screen, but IOS has some problem)

let parentNav = navigation.getParent(); parentNav.setOptions({ tabBarStyle: { display: 'none', }, }); setTimeout( () => navigation.push('ProjectBuild', {...navigationProps}), 100, );

100 ms is enough to make bottom height disappear.
It seems some lagging issue to update option change to screen in IOS
Hope it helps you too.

[caglardurmus]

Any update on this? enableScreens(false) not working on new react native versions(0.73.6).

[pylvr]

any updates on this ?