Docs
BlogChangelogStar Us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

Expo Router native tabs

GitHub

Changelog

npm

An Expo Router submodule that provides native tabs layout.

Android
iOS
tvOS
Web
Native tabs is an experimental 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:

Install Expo Router

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

app.json
{
  "expo": {
    "plugins": ["expo-router"]
  }
}

Usage

To learn how to use native tabs, with Expo Router, read the native tabs guide:

Native tabs

Learn how to use native tabs in your Expo Router app.

API

import { NativeTabs, Icon, Label, Badge, VectorIcon } from 'expo-router/unstable-native-tabs';

Components

NativeTabs

Android
iOS
tvOS
Web

Type: React.Element<NativeTabsProps>

The component used to create native tabs layout.

Example

// In _layout file
import { NativeTabs } from 'expo-router/unstable-native-tabs';

export default function Layout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="home" />
      <NativeTabs.Trigger name="settings" />
    </NativeTabs>
  );
}

NativeTabsProps

backBehavior

Android
Optional • Literal type: string

The behavior when navigating back with the back button.

Acceptable values are: 'history' | 'none' | 'initialRoute'

backgroundColor

Android
iOS
tvOS
Web
Optional • Type: ColorValue

The background color of the tab bar.

badgeBackgroundColor

Android
iOS
tvOS
Web
Optional • Type: ColorValue

The background color of every badge in the tab bar.

badgeTextColor

Android
Web
Optional • Type: ColorValue

The color of the badge text.

blurEffect

iOS
Optional • Literal type: string

The blur effect applied to the tab bar.

Acceptable values are: 'none' | 'systemDefault' | 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'

disableIndicator

Android
Optional • Type: boolean

Disables the active indicator for the tab bar.

disableTransparentOnScrollEdge

iOS
Optional • Type: boolean

When set to true, the tab bar will not become transparent when scrolled to the edge.

iconColor

Android
iOS
tvOS
Web
Optional • Literal type: union

The color of every tab icon in the tab bar.

Acceptable values are: ColorValue | { default: ColorValue | undefined, selected: ColorValue | undefined }

indicatorColor

Android
Web
Optional • Type: ColorValue

The color of the tab indicator.

labelStyle

Android
iOS
tvOS
Web
Optional • Literal type: union

The style of the every tab label in the tab bar.

Acceptable values are: StyleProp<NativeTabsLabelStyle> | { default: StyleProp<NativeTabsLabelStyle>, selected: StyleProp<NativeTabsLabelStyle> }

labelVisibilityMode

Android
Optional • Literal type: string

The visibility mode of the tab item label.

See: Material Components documentation

Acceptable values are: 'auto' | 'selected' | 'labeled' | 'unlabeled'

minimizeBehavior

iOS 26+
Optional • Literal type: string • Default: automatic

Specifies 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 behavior
  • never - the tab bar does not minimize
  • onScrollDown - the tab bar minimizes when scrolling down and expands when scrolling back up
  • onScrollUp - the tab bar minimizes when scrolling up and expands when scrolling back down

See: The supported values correspond to the official UIKit documentation.

Acceptable values are: 'automatic' | 'never' | 'onScrollDown' | 'onScrollUp'

rippleColor

Android
Optional • Type: ColorValue

The color of the ripple effect when the tab is pressed.

shadowColor

iOS
Optional • Type: ColorValue

The color of the shadow.

See: Apple documentation

sidebarAdaptable

iOS 18+
Optional • Type: boolean

When set to true, enables the sidebarAdaptable tab bar style on iPadOS and macOS. This prop has no effect on iPhone.

tintColor

Android
iOS
tvOS
Web
Optional • Type: ColorValue

The tint color of the tab icon.

Can be overridden by icon color and label color for each tab individually.

titlePositionAdjustment

iOS
Optional • Type: { horizontal: number, vertical: number }

Inherited Props

  • PropsWithChildren

NativeTabsTriggerBadge

Android
iOS
tvOS
Web

Type: React.ReactNode<NativeTabsTriggerBadgeProps>

NativeTabsTriggerBadgeProps

children

Android
iOS
tvOS
Web
Optional • Type: string

The text to display as the badge for the tab. If not provided, the badge will not be displayed.

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

If true, the badge will be hidden.

selectedBackgroundColor

Android
iOS
tvOS
Web
Optional • Type: ColorValue

NativeTabsTriggerIcon

Android
iOS

Type: React.ReactNode<NativeTabsTriggerIconProps>

Renders an icon for the tab.

Accepts various icon sources such as SF Symbols, drawable resources, material icons, or image sources.

Acceptable props combinations:

  • sf and drawable - sf will be used for iOS icon, drawable for Android icon
  • sf and src - sf will be used for iOS icon, src for Android icon
  • src and drawable - src will be used for iOS icon, drawable for Android icon
  • src only - src will be used for both iOS and Android icons

NativeTabsTriggerIconProps

Inherited Props

NativeTabsTriggerLabel

Android
iOS
tvOS
Web

Type: React.ReactNode<NativeTabsTriggerLabelProps>

NativeTabsTriggerLabelProps

children

Android
iOS
tvOS
Web
Optional • Type: string

The text to display as the label for the tab.

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean • Default: false

If true, the label will be hidden.

selectedStyle

Android
iOS
tvOS
Web
Optional • Type: StyleProp<NativeTabsLabelStyle>

NativeTabsTriggerVectorIcon

Android
iOS
tvOS
Web

Type: React.Element<VectorIconProps<NameT>>

Helper component which can be used to load vector icons for NativeTabs.

Example

import { NativeTabs } from 'expo-router/unstable-native-tabs';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

export default Layout(){
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Icon src={<NativeTabs.Trigger.VectorIcon family={MaterialCommunityIcons} name="home" />} />
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

NativeTabTrigger

Android
iOS
tvOS
Web

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

// In _layout file
import { NativeTabs } from 'expo-router/unstable-native-tabs';

export default function Layout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="home" />
      <NativeTabs.Trigger name="settings" />
    </NativeTabs>
  );
}

Example

// In a tab screen
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>
  );
}

Note: You can use the alias NativeTabs.Trigger for this component.

NativeTabTriggerProps

children

Android
iOS
tvOS
Web
Optional • Type: ReactNode

The children of the trigger.

Use Icon, Label, and Badge components to customize the tab.

disablePopToTop

iOS
Optional • Type: boolean • Default: false

If true, the tab will not pop stack to the root when selected again.

disableScrollToTop

iOS
Optional • Type: boolean • Default: false

If true, the tab will not scroll to the top when selected again.

hidden

Android
iOS
tvOS
Web
Optional • Type: boolean

If true, the tab will be hidden from the tab bar.

Note: Marking a tab as hidden means it cannot be navigated to in any way.

name

Android
iOS
tvOS
Web
Optional • Type: string

The name of the route.

This is required when used inside a Layout component.

When used in a route it has no effect.

role

iOS
Optional • Literal type: string

System-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: https://developer.apple.com/documentation/uikit/uitabbaritem/systemitem|UITabBarItem.SystemItem

Acceptable values are: 'search' | 'history' | 'bookmarks' | 'contacts' | 'downloads' | 'favorites' | 'featured' | 'more' | 'mostRecent' | 'mostViewed' | 'recents' | 'topRated'

unstable_nativeProps

Android
iOS
Optional • Type: Partial<Omit<BottomTabsScreenProps, '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.

Interfaces

DrawableIcon

Android
iOS
tvOS
Web
PropertyTypeDescription
drawable(optional)string
Only for: 
Android

The name of the drawable resource to use as an icon.

SFSymbolIcon

Android
iOS
tvOS
Web
PropertyTypeDescription
sf(optional)SFSymbols6_0 | { default: SFSymbols6_0 | undefined, selected: SFSymbols6_0 }
Only for: 
iOS

The name of the SF Symbol to use as an icon.

The value can be provided in two ways:

  • As a string with the SF Symbol name
  • As an object specifying the default and selected states

Example

<Icon sf="magnifyingglass" />

Example

<Icon sf={{ default: "house", selected: "house.fill" }} />

SrcIcon

Android
iOS
tvOS
Web
PropertyTypeDescription
src(optional)ReactElement | 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 sf prop is used it will override this prop on iOS.

When drawable or material prop is used it will override this prop on Android.

The value can be provided in two ways:

  • As an image source
  • As an object specifying the default and selected states

Example

<Icon src={require('./path/to/icon.png')} />

Example

<Icon src={{ default: require('./path/to/icon.png'), selected: require('./path/to/icon-selected.png') }} />

Types

NativeTabsLabelStyle

Android
iOS
tvOS
Web

Type: Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontWeight' | 'color'>

SymbolOrImageSource

Android
iOS
tvOS
Web

Type: object shaped as below:

PropertyTypeDescription
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:

PropertyTypeDescription
src(optional)ImageSourcePropType | Promise<ImageSourcePropType | null>

The image source to use as an icon.