Usage with React Navigation

WARNING

To use this navigator, ensure that you have @react-navigation/native and its dependencies (follow this guide).

Minimal example of using createNativeBottomTabNavigator with React Navigation:

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs/react-navigation';

const Tab = createNativeBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator ignoresTopSafeArea>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: () => ({ sfSymbol: 'book' }),
          }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarIcon: () => ({ sfSymbol: 'gear' }),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Props

The Tab.Navigator component accepts following props:

id

Optional unique ID for the navigator. This can be used with navigation.getParent to refer to this navigator in a child navigator.

initialRouteName

The name of the route to render on first load of the navigator.

ignoresTopSafeArea iOS

Whether to ignore the top safe area.

screenOptions

Default options to use for the screens in the navigator.

backBehavior

This controls what happens when goBack is called in the navigator. This includes pressing the device's back button or back gesture on Android.

It supports the following values:

  • firstRoute - return to the first screen defined in the navigator (default)
  • initialRoute - return to initial screen passed in initialRouteName prop, if not passed, defaults to the first screen
  • order - return to screen defined before the focused screen
  • history - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history
  • none - do not handle back button

labeled

Whether to show labels in tabs. Defaults to true.

rippleColor android

Changes ripple color on tab press.

disablePageAnimations iOS

Whether to disable page animations between tabs.

scrollEdgeAppearance iOS

Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom.

tabBarActiveTintColor

Color for the active tab.

tabBarInactiveTintColor

Color for the inactive tabs.

barTintColor

Background color of the tab bar.

activeIndicatorColor android

Color of tab indicator. This option is only compatible with Material3 themes.

translucent iOS

A Boolean value that indicates whether the tab bar is translucent.

Available options:

  • default - uses default background and shadow values.
  • transparent - uses transparent background and no shadow.
  • opaque - uses set of opaque colors that are appropriate for the current theme
NOTE

It's recommended to use transparent or opaque without lazy loading as the tab bar background flashes when a view is rendered lazily.

sidebarAdaptable iOS

A tab bar style that adapts to each platform.

Tab views using the sidebar adaptable style have an appearance

  • iPadOS displays a top tab bar that can adapt into a sidebar.
  • iOS displays a bottom tab bar.
  • macOS and tvOS always show a sidebar.
  • visionOS shows an ornament and also shows a sidebar for secondary tabs within a TabSection.

hapticFeedbackEnabled

Whether to enable haptic feedback on tab press. Defaults to true.

Options

The following options can be used to configure the screens in the navigator. These can be specified under screenOptions prop of Tab.navigator or options prop of Tab.Screen.

title

Title text for the screen.

tabBarLabel

Label text of the tab displayed in the navigation bar. When undefined, scene title is used.

tabBarActiveTintColor

Color for the active tab.

NOTE

The tabBarInactiveTintColor is not supported on route level due to native limitations. Use inactiveTintColor in the Tab.Navigator instead.

tabBarIcon

Function that given { focused: boolean } returns ImageSource or AppleIcon to display in the navigation bar.

<Tab.Screen
  name="Albums"
  component={Albums}
  options={{
    tabBarIcon: () => require('person.png'),
    // or
    tabBarIcon: () => ({ sfSymbol: 'person' }),
  }}
/>
NOTE

SF Symbols are only supported on Apple platforms.

tabBarBadge

Badge to show on the tab icon.

lazy

Whether this screens should render the first time it's accessed. Defaults to true. Set it to false if you want to render the screen on initial render.

Events

The navigator can emit events on certain actions. Supported events are:

tabPress

This event is fired when the user presses the tab button for the current screen in the tab bar.

To prevent the default behavior, you can call event.preventDefault:

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', (e) => {
    // Prevent default behavior
    e.preventDefault();

    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);

tabLongPress

This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period.

Example:

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabLongPress', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);