react-native-screens
react-native-screens copied to clipboard
v6 hiding tabbar with {display:none} does not work on iOS
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 |
Hey! 👋
It looks like you've omitted a few important sections from the issue template.
Please complete Description and Steps To Reproduce sections.
@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.
@tarikpnr you're not doing this correctly. You're trying to directly manipulating
style
, while there is a prop for it onscreenOptions
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 usedisplay: none
, you'll have to set the tabBarStyleposition
toabsolute
. By doing so, you'll end up for the need to compensate for the missing height in every screen using the hook import fromuseBottomTabBarHeight
(@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
:)
@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
@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.
exactly, a prop more like tabBarHide
is a must. does anyone know how tabBarHideOnKeyboard works?