Usage with React Navigation#

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

npm install @bottom-tabs/react-navigation

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 '@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>
        <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. Defaults to true.

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

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.

tabLabelStyle#

Object containing styles for the tab label.

Supported properties:

• fontFamily

• fontSize

• fontWeight

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.

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'),
    // SVG is also supported
    tabBarIcon: () => require('person.svg'),
    // or
    tabBarIcon: () => ({ sfSymbol: 'person' }),
    // You can also pass a URL
    tabBarIcon: () => ({ uri: 'https://example.com/icon.png' }),
  }}
/>

tabBarBadge#

Badge to show on the tab icon.

tabBarItemHidden#

Whether the tab bar item is hidden.

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]);