Expo Router native tabs
An Expo Router submodule that provides native tabs layout.
Native tabs is an alpha feature available in SDK 54 and later, and its API is subject to change.
expo-router/unstable-native-tabs is a submodule of expo-router and exports components to build tab layouts using platform-native system tabs.
See the Expo Router reference for more information about the file-based routing library for native and web app.
Installation
To use expo-router/unstable-native-tabs in your project, you need to install expo-router in your project. Follow the instructions from Expo Router's installation guide:
Learn how to install Expo Router in your project.
Configuration in app config
If you are using the default template to create a new project, expo-router's config plugin is already configured in your app config.
Example app.json with config plugin
{ "expo": { "plugins": ["expo-router"] } }
Usage
To learn how to use native tabs, with Expo Router, read the native tabs guide:
Learn how to use native tabs in your Expo Router app.
API
import { NativeTabs } from 'expo-router/unstable-native-tabs';
Components
Type: React.Element<NativeTabsProps>
The component used to create native tabs layout.
Example
import { NativeTabs } from 'expo-router/unstable-native-tabs'; export default function Layout() { return ( <NativeTabs> <NativeTabs.Trigger name="home" /> <NativeTabs.Trigger name="settings" /> </NativeTabs> ); }
stringThe behavior when navigating back with the back button.
Acceptable values are: 'history' | 'none' | 'initialRoute'
ColorValueThe background color of every badge in the tab bar.
stringThe blur effect applied to the tab bar.
Acceptable values are: 'none' | 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark' | 'systemDefault'
booleanWhen set to true, the tab bar will not become transparent when scrolled to the edge.
boolean • Default: falseWhen set to true, hides the tab bar.
unionThe color of every tab icon in the tab bar.
Acceptable values are: ColorValue | {
default: ColorValue | undefined,
selected: ColorValue | undefined
}
unionThe style of the every tab label in the tab bar.
Acceptable values are: StyleProp<NativeTabsLabelStyle> | {
default: StyleProp<NativeTabsLabelStyle>,
selected: StyleProp<NativeTabsLabelStyle>
}
stringThe visibility mode of the tab item label.
Acceptable values are: 'selected' | 'auto' | 'labeled' | 'unlabeled'
string • Default: automaticSpecifies the minimize behavior for the tab bar.
Available starting from iOS 26.
The following values are currently supported:
automatic- resolves to the system default minimize behaviornever- the tab bar does not minimizeonScrollDown- the tab bar minimizes when scrolling down and expands when scrolling back uponScrollUp- the tab bar minimizes when scrolling up and expands when scrolling back down
See: The supported values correspond to the official Apple documentation.
Acceptable values are: 'automatic' | 'never' | 'onScrollDown' | 'onScrollUp'
ColorValueThe color of the ripple effect when the tab is pressed.
booleanWhen set to true, enables the sidebarAdaptable tab bar style on iPadOS and macOS. This prop has no effect on iPhone.
ColorValueThe tint color of the tab icon.
Can be overridden by icon color and label color for each tab individually.
{
horizontal: number,
vertical: number
}See: Apple documentation
Type: React.Element<NativeTabTriggerProps>
The component used to customize the native tab options both in the _layout file and from the tab screen.
When used in the _layout file, you need to provide a name prop.
When used in the tab screen, the name prop takes no effect.
Example
import { NativeTabs } from 'expo-router/unstable-native-tabs'; export default function Layout() { return ( <NativeTabs> <NativeTabs.Trigger name="home" /> <NativeTabs.Trigger name="settings" /> </NativeTabs> ); }
Example
import { NativeTabs } from 'expo-router/unstable-native-tabs'; export default function HomeScreen() { return ( <View> <NativeTabs.Trigger> <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label> </NativeTabs.Trigger> <Text>This is home screen!</Text> </View> ); }
ReactNodeThe children of the trigger.
Use Icon, Label, and Badge components to customize the tab.
Pick<ViewStyle, 'backgroundColor' | 'experimental_backgroundImage' | 'alignContent' | 'alignItems' | 'flexDirection' | 'gap' | 'justifyContent' | 'padding' | 'paddingBottom' | 'paddingEnd' | 'paddingHorizontal' | 'paddingLeft' | 'paddingRight' | 'paddingStart' | 'paddingTop' | 'paddingVertical' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'>The style applied to the content of the tab
Note: Only certain style properties are supported.
booleanThe default behavior differs between iOS and Android.
On Android, the content of a native tabs screen is automatically wrapped in a SafeAreaView,
and the bottom inset is applied. Other insets must be handled manually.
On iOS, the first scroll view nested inside a native tabs screen has automatic content inset adjustment enabled
When this property is set to true, automatic content inset adjustment is disabled for the screen
and must be managed manually. You can use SafeAreaView from react-native-screens/experimental
to handle safe area insets.
boolean • Default: falseIf true, the tab will not pop stack to the root when selected again.
boolean • Default: falseIf true, the tab will not scroll to the top when selected again.
booleanIf true, the tab will be hidden from the tab bar.
Note: Marking a tab as
hiddenmeans it cannot be navigated to in any way.
Note: Dynamically hiding tabs will remount the navigator and the state will be reset.
stringThe name of the route.
This is required when used inside a Layout component.
When used in a route it has no effect.
stringSystem-provided tab bar item with predefined icon and title
Uses Apple's built-in tab bar items (e.g., bookmarks, contacts, downloads) with
standard iOS styling and localized titles. Custom icon or selectedIcon
properties will override the system icon, but the system-defined title cannot
be customized.
See: The supported values correspond to the official Apple documentation.
Acceptable values are: 'search' | 'history' | 'bookmarks' | 'contacts' | 'downloads' | 'favorites' | 'featured' | 'more' | 'mostRecent' | 'mostViewed' | 'recents' | 'topRated'
Partial<Omit<TabsScreenProps, 'isFocused' | 'tabKey'>>Props passed to the underlying native tab screen implementation.
Use this to configure props not directly exposed by Expo Router, but available in react-native-screens.
Note: This will override any other props set by Expo Router and may lead to unexpected behavior.
Note: This is an unstable API and may change or be removed in minor versions.
Type: React.Element<FC<NativeTabsBottomAccessoryProps> & {
usePlacement: () => 'regular' | 'inline'
}>
ReactNodeType: React.Element<FC<NativeTabsTriggerBadgeProps>>
stringThe text to display as the badge for the tab. If not provided, the badge will not be displayed.
ColorValueType: React.Element<FC<NativeTabsTriggerIconProps>>
Type: React.Element<FC<NativeTabsTriggerLabelProps>>
StyleProp<NativeTabsLabelStyle>Type: React.Element<VectorIconProps<NameT>>
Helper component for loading vector icons.
Prefer using the md and sf props on Icon rather than using this component directly.
Only use this component when you need to load a specific icon from a vector icon family.
Example
import { Icon, VectorIcon } from 'expo-router'; import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'; <Icon src={<VectorIcon family={MaterialCommunityIcons} name="home" />} />
Interfaces
| Property | Type | Description |
|---|---|---|
| drawable(optional) | string | Only for: Android The name of the drawable resource to use as an icon. |
Material icon name for Android native tabs.
| Property | Type | Description |
|---|---|---|
| md | See description for available values. | Material icon glyph name. See the Material icons for the complete catalog. |
| Property | Type | Description |
|---|---|---|
| sf(optional) | SFSymbols7_0 | {
default: SFSymbols7_0 | undefined,
selected: SFSymbols7_0
} | Only for: iOS The name of the SF Symbol to use as an icon. The value can be provided in two ways:
Example
Example
|
| Property | Type | Description |
|---|---|---|
| renderingMode(optional) | 'template' | 'original' | Only for: iOS Controls how the icon is rendered on iOS.
Default: "template" |
| src(optional) | ReactElement<unknown, string | JSXElementConstructor<any>> | ImageSourcePropType | {
default: ReactElement<unknown, string | JSXElementConstructor<any>> | ImageSourcePropType | undefined,
selected: ReactElement<unknown, string | JSXElementConstructor<any>> | ImageSourcePropType
} | Only for: Android iOS The image source to use as an icon. When When The value can be provided in two ways:
Example
Example
|
Types
Type: object shaped as below:
| Property | Type | Description |
|---|---|---|
| drawable(optional) | string | Only for: Android The name of the drawable resource to use as an icon. |
| sf(optional) | SFSymbol | Only for: iOS The name of the SF Symbol to use as an icon. |
Or object shaped as below:
| Property | Type | Description |
|---|---|---|
| renderingMode(optional) | 'template' | 'original' | Only for: iOS Controls how the icon is rendered on iOS. Default: 'template' |
| src(optional) | ImageSourcePropType | Promise<ImageSourcePropType | null> | The image source to use as an icon. |