hiding bottom tab bar in specific screens
closed
h
haibert barifan
I am aware of the best practice of nesting the tab bar inside of of a stack navigator and placing the screens which you need hidden tabBars in inside the root stack navigator. link: https://reactnavigation.org/docs/hiding-tabbar-in-screens/
But is approach does not work when you need to .push from a screen that is outside of the bottom tab navigator to a screen thats inside of the bottom tab navigator. This essentially kicks the user out of the screen that is outside of the bottom tab navigator and then pushes the selected screen on top. Which is not the greatest UX.
Hopefully that made sense. Overall it is just such a shame that we still have this limitation that the native worlds don't. Not only would it make things easier to be able to dynamically hide the bottom tab bar in specific screens, it also just doesn't feel right to have to nest a navigator inside another to achieve something thats seems like it should be as simple as a true/false assignment.
Im not sure what causes the glitchy jump when the bottom tab bar is hidden or revealed from a specific screen but it is pretty noticeable. I wish I was experienced enough to dive in to the code and troubleshoot things but i'm simply not there yet. I hope theres a way this issue can be solved. Thank you for all the hard work!
satya164
closed
You can already achieve this by updating the tab bar's style with
setOptions
. The jump can be avoided by making the tab bar positioned absolutely.Nikola Lukic
I would also add to this that if you need a state that is usednin tab screen and modal from the parent stack navigator, you need to make it global and pass it to all tabs because of your setup.
Instead of just passing it to single tab or single nested navigator inside a tab.
In example of React.Context, your context provider needs to wrap all tabs and parent navigator instead of just wrapping single tab.
h
haibert barifan
I just want to add a work round ive found. As long as the tabBarStyle is set to position: 'absolute' it does not cause any flickering.
This is how it would look in v5
<BottomTab.Navigator
screenOptions={{
headerShown: false,
tabBarVisible: showHideBottomTab(route),
}}
tabBarOptions={{
showLabel: false,
keyboardHidesTabBar: true,
style: {
position: 'absolute',
},
}}
>
Then you have to use the following to apply padding bottom to all your screens or else they will flow under the tabBar
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
const tabBarHeight = useBottomTabBarHeight()