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:
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
iOSWhether 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 screenorder
- return to screen defined before the focused screenhistory
- return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the historynone
- do not handle back buttonlabeled
Whether to show labels in tabs. Defaults to true.
rippleColor
androidChanges ripple color on tab press.
disablePageAnimations
iOSWhether to disable page animations between tabs.
scrollEdgeAppearance
iOSDescribes 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
androidColor of tab indicator. This option is only compatible with Material3 themes.
translucent
iOSA 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 themeIt's recommended to use transparent
or opaque
without lazy loading as the tab bar background flashes when a view is rendered lazily.
sidebarAdaptable
iOSA tab bar style that adapts to each platform.
Tab views using the sidebar adaptable style have an appearance
TabSection
.hapticFeedbackEnabled
Whether to enable haptic feedback on tab press. Defaults to true.
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.
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.
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.
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
:
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: