@yemirhan/bottom-tab-bar-height

Expo module that returns native bottom tab bar heights in pixels on iOS and Android, designed for use with expo-router native tabs.

Installation

npm install @yemirhan/bottom-tab-bar-height
# or
yarn add @yemirhan/bottom-tab-bar-height

Then run:

npx expo prebuild --clean

API

Types

interface BottomTabBarHeightResult {
  tabBarHeight: number;   // Tab bar only (49pt iOS / 56dp Android)
  bottomInset: number;    // Safe area (iOS) / system nav bar (Android)
  totalHeight: number;    // Combined height
  hasTabBar: boolean;     // Whether tab bar was found
}

Functions

getBottomTabBarHeight()

Synchronous function that returns the current bottom tab bar height measurements.

import { getBottomTabBarHeight } from '@yemirhan/bottom-tab-bar-height';

const { tabBarHeight, bottomInset, totalHeight, hasTabBar } = getBottomTabBarHeight();

useBottomTabBarHeight()

React hook that returns the current heights and automatically updates on orientation changes.

import { useBottomTabBarHeight } from '@yemirhan/bottom-tab-bar-height';

function MyScreen() {
  const { tabBarHeight, bottomInset, totalHeight, hasTabBar } = useBottomTabBarHeight();

  return (
    <ScrollView contentContainerStyle={{ paddingBottom: totalHeight }}>
      {/* Content */}
    </ScrollView>
  );
}

useBottomTabBarTotalHeight()

Convenience hook that returns only the total height (tab bar + bottom inset).

import { useBottomTabBarTotalHeight } from '@yemirhan/bottom-tab-bar-height';

function MyScreen() {
  const totalHeight = useBottomTabBarTotalHeight();

  return (
    <View style={{ paddingBottom: totalHeight }}>
      {/* Content */}
    </View>
  );
}

Constants

BottomTabBarHeightConstants

Static constants captured at module load time. Useful when you need values outside of React components.

import { BottomTabBarHeightConstants } from '@yemirhan/bottom-tab-bar-height';

console.log(BottomTabBarHeightConstants.totalHeight);

Platform Behavior

iOS

• Finds the UITabBarController in the view hierarchy
• Returns actual tabBar.bounds.height if found
• Falls back to standard iOS tab bar height (49pt)
• bottomInset is the safe area bottom inset

Android

• Searches for BottomNavigationView in the view hierarchy
• Returns actual height if found
• Falls back to standard Material Design height (56dp)
• bottomInset is the system navigation bar height

Usage with expo-router

This module is designed to work with expo-router's native tabs:

import { useBottomTabBarHeight } from '@yemirhan/bottom-tab-bar-height';

function TabScreen() {
  const { totalHeight } = useBottomTabBarHeight();

  return (
    <FlatList
      data={items}
      contentContainerStyle={{ paddingBottom: totalHeight }}
      renderItem={({ item }) => <ItemComponent item={item} />}
    />
  );
}

License

MIT