Exposing native bottom tab bar height / “interface” bottom inset from TabsHost to JS (needed by React Navigation native bottom tabs)

[DragomirAndrei19]

I’m using React Navigation’s native bottom tabs (@react-navigation/bottom-tabs/unstable) and I made the tab bar transparent on both Android and iOS (non-Liquid Glass) so content can render underneath it (intended behavior).
Now I need a reliable way to pad content (e.g. FlatList) by the native tab bar height or to simply add a button that stands above it. react-navigation/react-navigation#12958

React Navigation can’t provide a real value for useBottomTabBarHeight() in the native tabs implementation because the native tab bar height/inset isn’t exposed from react-native-screens / TabsHost.

More explicitly:

• In React Navigation native bottom tabs, useBottomTabBarHeight() either throws (missing provider) or ends up being 0 (after a fix proposed by @Navjot1806), because the real native height isn’t available.
• @satya164 stated that react-native-screens currently doesn’t expose this value, so it needs to be added there to expose it.
• There is an experimental workaround: SafeAreaView from react-native-screens/experimental.
• On a (very) quick look, react-native-screens PR feat(Android, Tabs): safe area component for Android #3215 enables transparent/translucent native tab bars on Android and introduces SafeAreaView handling for bottom tabs (including “interface” insets from the BottomNavigationView).
  However, it doesn’t appear to expose the native tab bar height/inset as a JS-accessible value, which means React Navigation still can’t provide a real value to useBottomTabBarHeight() for native tabs.

Problem

When the native tab bar is transparent/translucent, content can render beneath it. Without a JS-accessible tab bar height (or bottom inset), I’m forced to hardcode padding, which is brittle (different devices, orientation changes, etc.).

Using react-native-screens/experimental SafeAreaView may work (I haven't tested it), but it’s experimental and it also means relying on a second SafeAreaView implementation (many apps and libraries already use react-native-safe-area-context).

Expected behavior

Expose the native bottom tab bar height, or the “interface” bottom inset contributed by the tab bar, to JS in a stable way so that:

1. libraries like React Navigation can feed a real value to useBottomTabBarHeight(), and/or
2. app code can add bottom padding without hardcoding.

Request

Please expose the bottom tab bar measurement (height or interface bottom inset) from TabsHost to JS. Any API shape is fine. Examples:

1. a callback/event (e.g. onTabBarInsetChange / onTabBarHeightChange)
2. a prop/state value on the host
3. a stable exported hook/context value from screens
4. any other stable mechanism that surfaces the same value SafeAreaView uses for “interface insets”

Thank you!

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

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

Please complete Description, Steps to reproduce, Snack or a link to a repository, Screens version, React Native version and Platforms sections.

[danielduan]

+1 to this for a proper fix.

A really bad workaround is to add an Android specific fixed 56px spacing component to the bottom of every screen. It looks fine for the most part with some edge cases here. The real number is somewhere between 48-64dp:

• landscape: 48dp
• standard portrait mobile: 56dp
• tablet: 64dp

This is the only way to get NativeTabs working correctly for Android unfortunately.