React Native Bottom Tabs
Docs
Docs

Usage with Expo Router

First install @bottom-tabs/react-navigation which provides a native bottom tab navigator for React Navigation.

npm
yarn
pnpm
bun
npm install @bottom-tabs/react-navigation

Next, create a custom layout adapter for the native bottom tabs using withLayoutContext from Expo Router:

import { withLayoutContext } from 'expo-router';
import {
  createNativeBottomTabNavigator,
  NativeBottomTabNavigationOptions,
  NativeBottomTabNavigationEventMap,
} from '@bottom-tabs/react-navigation';
import { ParamListBase, TabNavigationState } from '@react-navigation/native';

const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;

const Tabs = withLayoutContext<
  NativeBottomTabNavigationOptions,
  typeof BottomTabNavigator,
  TabNavigationState<ParamListBase>,
  NativeBottomTabNavigationEventMap
>(BottomTabNavigator);
NOTE

Make sure to provide the correct types for the withLayoutContext function. Without it screen options won't have proper types.

Then, use the Tabs navigator in your app:

import { Tabs } from "@/components/bottom-tabs";

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: () => ({ sfSymbol: "house" }),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Explore",
          tabBarIcon: () => ({ sfSymbol: "person" }),
        }}
      />
    </Tabs>
  );
}

For props and more information, see the React Navigation integration guide.

Example: okwasniewski/ExpoNativeTabs

Need to boost your app's performance?
We help React Native teams enhance speed, responsiveness, and efficiency.
Let's talk