Skip to content

Comments

feat(tabs): add useBottomTabBarHeight for native bottom tabs#3632

Draft
zibs wants to merge 1 commit intosoftware-mansion:mainfrom
zibs:master
Draft

feat(tabs): add useBottomTabBarHeight for native bottom tabs#3632
zibs wants to merge 1 commit intosoftware-mansion:mainfrom
zibs:master

Conversation

@zibs
Copy link

@zibs zibs commented Feb 10, 2026

Description

This PR introduces an experimental API to read native bottom tab bar height from JS in react-native-screens.

What

  • Adds useBottomTabBarHeight and BottomTabBarHeightContext for native bottom tabs.
  • Adds native event plumbing (onTabBarHeightChange) on both Android and iOS.

Why

  • Native bottom tabs render outside the JS layout tree, so tab bar height wasn’t accessible in screen layout
    code.
  • This enables reliable content offset/layout behavior and aligns with common migration expectations.

Relates to #3616 and for react-navigation: react-navigation/react-navigation#12949

Changes

  • Added onTabBarHeightChange to BottomTabsNativeComponent spec.
  • Added Android tab bar height event emission:
    • TabsHost
    • TabsHostEventEmitter
    • TabsHostViewManager
    • new event type TabsHostTabBarHeightChangeEvent
    • RNSBottomTabsHostEventEmitter
    • RNSBottomTabsHostComponentView / manager event exposure
  • Exported new API:
    • useBottomTabBarHeight
    • updated public exports in src/index.tsx and src/types.tsx
  • Added verification updates in FabricExample:
    • e2e assertion for ready tab bar height state
    • visible test UI showing height/state
    • Android-only Tab3 content bottom offset using the new hook
  • Fixed Android compile regression:
    • added missing ViewGroup import in ScreenStackHeaderConfig.kt
  • Updated Swift lint helper:
    • excludes generated iOS build directories to avoid formatting noise

Before & after - visual documentation

Screenshot_1770746164 Simulator Screenshot - iPhone 17 Pro - 2026-02-10 at 09 56 11

without reading tab bar height, content is covered
Screenshot_1770746213

**after reading tab bar height, we can offset content **
Screenshot_1770746287

Test plan

Tested files:

  • apps/src/tests/issue-tests/TestBottomTabs/components/TabContentView.tsx
  • apps/src/tests/issue-tests/TestBottomTabs/tabs/Tab3.tsx

Commands run:

  • npm run lint
  • ./gradlew :react-native-screens:compileDebugKotlin (from FabricExample/android)

Manual verification:

  1. Launch FabricExample.
  2. Go to Issue Tests -> TestBottomTabs.
  3. Confirm first tab shows ready and a non-zero tab bar height.
  4. On Android, open Tab3 and verify bottom content is offset above tab bar using hook value.

Minimal usage example:

import { Platform } from 'react-native';
import { useBottomTabBarHeight } from 'react-native-screens';

function ScreenContent() {
const tabBarHeight = useBottomTabBarHeight();
const bottomPadding = Platform.OS === 'android' ? tabBarHeight : 0;
// apply bottomPadding to content container
}

Checklist

  • Included code example that can be used to test this change.
  • Updated / created local changelog entries in relevant test files.
  • For visual changes, included screenshots / GIFs / recordings documenting the change.
  • For API changes, updated relevant public types.
  • Ensured that CI passes

Expose tab bar height through a new experimental hook and context in the tabs API, backed by native events on iOS and Android.

- add onTabBarHeightChange to bottom tabs native component spec

- emit tab bar height changes from Android TabsHost and iOS tab controller/host emitter

- export useBottomTabBarHeight and BottomTabBarHeightContext

- add e2e and UI verification in FabricExample TestBottomTabs

- fix Android compile regression by importing ViewGroup in ScreenStackHeaderConfig

- make swift-format helper ignore generated iOS build directories
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant