Implement useBottomTabBarHeight and BottomTabBarHeightContext
Closed this issue · 11 comments
React Navigation has useBottomTabBarHeight and BottomTabBarHeightContext for getting the height of the bottom tab bar.
This will help with taking tab bar height into account where contentInsetAdjustmentBehavior does not help.
Hey, thanks for opening the issue.
Have you run into an issue with the automatic adjustment? I don't want to add things prematurely.
If it's possible to handle it natively (automatic adjustment), then I would prefer this option.
Let's close this until someone comes with a feature request that will require this, I hope most of cases can be handled by automatic adjustment by the system.
@okwasniewski how does it work if I dont have a scrollview in tab? my content currently disappears behind the tabbar.
If your content is already big enough that it overflows under the bottom bar how can you solve it without scroll view?
Even if you would get the height of the bottom bar and add padding it wouldn't shrink your content, so I would suggest to either make your content take less space or use a scroll view
@okwasniewski We have cards that have the higher of screen plus a padding around. So we need to know the exact height of the visible screen. Inside the card we have a scroll view for content.
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-17.at.17.18.03.mp4
@okwasniewski we also have a similar situation.
We want to position a view at the very bottom of the screen, just above the tab bar, and make rest of the screen scrollable.
This sounds reasonable, let's reopen this 👍
height on android is 0, height on ios is 49.
in both cases you'd need to add inset.bottom to it.
@a-eid On iOS the height is different in landscape and portrait isn't it? Is iOS and iPad is the same?
@okwasniewski Thanks a lot for the implementation. A small Issue we run into now is with the Tabbar being displayed at the top of the screen on iPad sometimes useBottomTabBarHeight still gives returns the height. Would it make sense to rename the hook useTabBarHeight and return [bottomHeight, topHeight]?