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 thewithLayoutContext 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