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

First, create a custom layout adapter for the native bottom tabs:

import { withLayoutContext } from "expo-router";
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';

export const Tabs = withLayoutContext(
  createNativeBottomTabNavigator().Navigator
);

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: EvanBacon/expo-router-react-native-bottom-tabs