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

https://user-images.githubusercontent.com/61876765/159287071-b9b4cf09-9998-414d-9ded-bb25b2ae76e0.mov

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [X] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-bottom-tabs
• [ ] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [X] @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[bot]]

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?