---
modificationDate: January 15, 2026
title: Router native tabs
description: An Expo Router submodule that provides native tabs layout.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-54/packages/expo-router'
packageName: 'expo-router'
platforms: ['android', 'ios', 'tvos', 'web', 'expo-go']
isNew: true
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v54.0.0/sdk/router-native-tabs/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# Expo Router native tabs

An Expo Router submodule that provides native tabs layout.
Android, iOS, tvOS, Web, Included in Expo Go

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

> 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](/versions/v54.0.0/sdk/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](/router/installation) — Learn how to install Expo Router in your project.

## Configuration in app config

If you are using the [default](/more/create-expo#--template) template to create a new project, `expo-router`'s [config plugin](/config-plugins/introduction) is already configured in your app config.

### Example app.json with config plugin

```json
{
  "expo": {
    "plugins": ["expo-router"]
  }
}
```

## Usage

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

[Native tabs](/router/advanced/native-tabs) — Learn how to use native tabs in your Expo Router app.

## API

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

## Components

### `Badge`

Supported platforms: Android, iOS, tvOS, Web.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[BadgeProps](#badgeprops)\>

BadgeProps

### `children`

Supported platforms: 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`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: `boolean` • Default: `false`

If true, the badge will be hidden.

### `selectedBackgroundColor`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

### `Icon`

Supported platforms: Android, iOS.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[IconProps](#iconprops)\>

Renders an icon for the tab.

IconProps

### `selectedColor`

Supported platforms: Android, iOS.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

### `Label`

Supported platforms: Android, iOS, tvOS, Web.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[LabelProps](#labelprops)\>

LabelProps

### `children`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: `string`

The text to display as the label for the tab.

### `hidden`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: `boolean` • Default: `false`

If true, the label will be hidden.

### `selectedStyle`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: [NativeTabsLabelStyle](#nativetabslabelstyle)

### `NativeTabs`

Supported platforms: Android, iOS, tvOS, Web.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[NativeTabsProps](#nativetabsprops)\>

The component used to create native tabs layout.

Example

```tsx
// 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`

Supported platforms: Android.

Optional • Literal type: `string`

The behavior when navigating back with the back button.

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

### `backgroundColor`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Literal type: `union`

The background color of the tab bar.

Acceptable values are: `null` | [ColorValue](https://reactnative.dev/docs/colors)

### `badgeBackgroundColor`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The background color of every badge in the tab bar.

### `badgeTextColor`

Supported platforms: Android, Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The color of the badge text.

### `blurEffect`

Supported platforms: 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`

Supported platforms: Android.

Optional • Type: `boolean`

Disables the active indicator for the tab bar.

### `disableTransparentOnScrollEdge`

Supported platforms: iOS.

Optional • Type: `boolean`

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

### `iconColor`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Literal type: `union`

The color of every tab icon in the tab bar.

Acceptable values are: [ColorValue](https://reactnative.dev/docs/colors) | `{ default: ColorValue | undefined, selected: ColorValue | undefined }`

### `indicatorColor`

Supported platforms: Android, Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The color of the tab indicator.

### `labelStyle`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Literal type: `union`

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

Acceptable values are: [NativeTabsLabelStyle](#nativetabslabelstyle) | { default: [NativeTabsLabelStyle](#nativetabslabelstyle), selected: [NativeTabsLabelStyle](#nativetabslabelstyle) }

### `labelVisibilityMode`

Supported platforms: Android.

Optional • Literal type: `string`

The visibility mode of the tab item label.

> **See:** [Material Components documentation](https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md#making-navigation-bar-accessible)

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

### `minimizeBehavior`

Supported platforms: 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](https://developer.apple.com/documentation/uikit/uitabbarcontroller/minimizebehavior).

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

### `rippleColor`

Supported platforms: Android.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

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

### `shadowColor`

Supported platforms: iOS.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The color of the shadow.

> **See:** [Apple documentation](https://developer.apple.com/documentation/uikit/uibarappearance/shadowcolor)

### `tintColor`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The tint color of the tab icon.

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

### `titlePositionAdjustment`

Supported platforms: iOS.

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

> **See:** [Apple documentation](https://developer.apple.com/documentation/uikit/uitabbaritem/titlepositionadjustment)

#### Inherited Props

-   `PropsWithChildren`

### `NativeTabs.Trigger.TabBar`

Supported platforms: Android, iOS, tvOS, Web.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[NativeTabsTriggerTabBarProps](#nativetabstriggertabbarprops)\>

The component used to customize the style of the tab bar, when given trigger is selected.

Prefer this to global changes of tab bar styles, directly in the page.

> **Note:** You can use the alias `NativeTabs.Trigger.TabBar` for this component.

Example

```tsx
<NativeTabs
 backgroundColor="black"
>
 <NativeTabs.Trigger name="page">
   <NativeTabs.Trigger.TabBar
     backgroundColor="white"
   />
   <Label>Page</Label>
 </NativeTabs.Trigger>
</NativeTabs>
```

NativeTabsTriggerTabBarProps

### `backgroundColor`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The background color of the tab bar, when the tab is selected

### `badgeBackgroundColor`

Supported platforms: iOS, Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The background color of every badge in the tab bar.

### `badgeTextColor`

Supported platforms: Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The color of the badge text.

### `blurEffect`

Supported platforms: iOS.

Optional • Literal type: `string`

The blur effect applied to the tab bar, when the tab is selected

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'`

### `disableTransparentOnScrollEdge`

Supported platforms: iOS.

Optional • Type: `boolean`

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

### `iconColor`

Supported platforms: iOS.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The color of every tab icon, when the tab is selected

### `indicatorColor`

Supported platforms: Web.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The color of the tab indicator.

### `labelStyle`

Supported platforms: iOS, Web.

Optional • Type: [NativeTabsLabelStyle](#nativetabslabelstyle)

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

### `shadowColor`

Supported platforms: iOS.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

The color of the shadow when the tab is selected.

> **See:** [Apple documentation](https://developer.apple.com/documentation/uikit/uibarappearance/shadowcolor)

### `NativeTabs.Trigger`

Supported platforms: Android, iOS, tvOS, Web.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[NativeTabTriggerProps](#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

```tsx
// 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

```tsx
// In a tab screen
import { NativeTabs } from 'expo-router/unstable-native-tabs';

export default function HomeScreen() {
  return (
    <View>
      <NativeTabs.Trigger>
        <Label>Home</Label>
      </NativeTabs.Trigger>
      <Text>This is home screen!</Text>
    </View>
  );
}
```

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

NativeTabTriggerProps

### `children`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: [ReactNode](https://reactnative.dev/docs/react-node)

The children of the trigger.

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

### `disablePopToTop`

Supported platforms: iOS.

Optional • Type: `boolean` • Default: `false`

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

### `disableScrollToTop`

Supported platforms: iOS.

Optional • Type: `boolean` • Default: `false`

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

### `hidden`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: `boolean`

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

### `name`

Supported platforms: 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.

### `options`

Supported platforms: Android, iOS, tvOS, Web.

Optional • Type: [NativeTabOptions](#nativetaboptions)

The options for the trigger.

Use `Icon`, `Label`, and `Badge` components as children to customize the tab, rather then raw options.

### `role`

Supported platforms: 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](https://developer.apple.com/documentation/uikit/uitabbaritem/systemitem%7CUITabBarItem.SystemItem)

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

### `VectorIcon`

Supported platforms: Android, iOS, tvOS, Web.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[VectorIconProps](#vectoriconprops)<NameT\>\>

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

Example

```tsx
import { NativeTabs, VectorIcon } from 'expo-router';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

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

VectorIconProps

### `family`

Supported platforms: Android, iOS, tvOS, Web.

Type: { getImageSource: (name: NameT, size: number, color: [ColorValue](https://reactnative.dev/docs/colors)) => [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)<null | [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource)\> }

The family of the vector icon.

Example

```tsx
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
```

### `name`

Supported platforms: Android, iOS, tvOS, Web.

Type: `NameT`

The name of the vector icon.

## Interfaces

### `CrossPlatformIconCombination`

Supported platforms: Android, iOS, tvOS, Web.

| Property | Type | Description |
| --- | --- | --- |
| androidSrc(optional) | ReactElement | [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource) | { default: ReactElement<unknown, string | JSXElementConstructor<any>> | ImageSourcePropType | undefined, selected: ReactElement<unknown, string | JSXElementConstructor<any>> | ImageSourcePropType } | Supported platforms: Android. The image source to use as an icon on Android. The value can be provided in two ways:
-   As an image source
-   As an object specifying the default and selected states

. Example

```tsx
<Icon sf="magnifyingglass" androidSrc={require('./search.png')} />
```

. Example

```tsx
<Icon
  sf={{ default: "house", selected: "house.fill" }}
  androidSrc={{ default: require('./icon.png'), selected: require('./icon-selected.png') }}
/>
```

 |
| drawable(optional) | `undefined` | - |
| sf(optional) | [SFSymbols6_0](https://github.com/nandorojo/sf-symbols-typescript) | { default: SFSymbols6_0 | undefined, selected: [SFSymbols6_0](https://github.com/nandorojo/sf-symbols-typescript) } | Supported platforms: iOS. The name of the SF Symbol to use as an icon on iOS. 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

```tsx
<Icon sf="magnifyingglass" androidSrc={require('./search.png')} />
```

. Example

```tsx
<Icon
  sf={{ default: "house", selected: "house.fill" }}
  androidSrc={{ default: require('./home.png'), selected: require('./home-filled.png') }}
/>
```

 |
| src(optional) | `undefined` | - |

### `NamedIconCombination`

Supported platforms: Android, iOS, tvOS, Web.

| Property | Type | Description |
| --- | --- | --- |
| androidSrc(optional) | `undefined` | - |
| drawable(optional) | `string` | Supported platforms: Android. The name of the drawable resource to use as an icon. |
| sf(optional) | [SFSymbols6_0](https://github.com/nandorojo/sf-symbols-typescript) | { default: SFSymbols6_0 | undefined, selected: [SFSymbols6_0](https://github.com/nandorojo/sf-symbols-typescript) } | Supported platforms: 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

```tsx
<Icon sf="magnifyingglass" />
```

. Example

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

 |
| src(optional) | `undefined` | - |

### `NativeTabOptions`

Supported platforms: Android, iOS, tvOS, Web.

Extends: [DefaultRouterOptions](#defaultrouteroptions)

| Property | Type | Description |
| --- | --- | --- |
| backgroundColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The color of the background when the tab is selected. |
| badgeBackgroundColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The color of all the badges when the tab is selected. |
| badgeTextColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Supported platforms: Android, Web. The color of the badge text. |
| badgeValue(optional) | `string` | Supported platforms: Android, iOS. Specifies content of tab bar item badge. On Android, the value is interpreted in the following order:
-   If the string can be parsed to integer, displays the value as a number
-   Otherwise if the string is empty, displays "small dot" badge
-   Otherwise, displays the value as a text

. On iOS, badge is displayed as regular string. |
| blurEffect(optional) | `'none' | 'systemDefault' | 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'` | Supported platforms: iOS. The blur effect to apply when the tab is selected. |
| disableTransparentOnScrollEdge(optional) | `boolean` | Supported platforms: iOS. When set to `true`, the tab bar will not become transparent when scrolled to the edge. |
| icon(optional) | [SymbolOrImageSource](#symbolorimagesource) | Supported platforms: Android, iOS. The icon to display in the tab bar. |
| iconColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The color of the icon when the tab is selected. On iOS 26+ you can change the icon color in the scroll edge state. |
| indicatorColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Supported platforms: Android, Web. The color of the tab indicator. |
| labelStyle(optional) | [NativeTabsLabelStyle](#nativetabslabelstyle) | The style of all the tab labels, when the tab is selected |
| role(optional) | `'search' | 'history' | 'bookmarks' | 'contacts' | 'downloads' | 'favorites' | 'featured' | 'more' | 'mostRecent' | 'mostViewed' | 'recents' | 'topRated'` | Supported platforms: iOS. 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. If you override the `title`, `icon`, or `selectedIcon`, note that this is not officially supported by Apple and may lead to unexpected results.See: https://developer.apple.com/documentation/uikit/uitabbaritem/systemitem|UITabBarItem.SystemItem |
| selectedBadgeBackgroundColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The color of the badge when the tab is selected. |
| selectedIcon(optional) | [SymbolOrImageSource](#symbolorimagesource) | Supported platforms: iOS. The icon to display when the tab is selected. |
| selectedIconColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The color of the icon when the tab is selected. |
| selectedLabelStyle(optional) | [NativeTabsLabelStyle](#nativetabslabelstyle) | The style of the tab label when the tab is selected. |
| selectedTitlePositionAdjustment(optional) | `{ horizontal: number, vertical: number }` | Supported platforms: iOS. The position adjustment for the label when the tab is selected. |
| shadowColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Supported platforms: iOS. The color of the shadow when the tab is selected.See: Apple documentation |
| title(optional) | `string` | Supported platforms: Android, iOS. Title of the tab screen, displayed in the tab bar item. |
| titlePositionAdjustment(optional) | `{ horizontal: number, vertical: number }` | Supported platforms: iOS. The position adjustment for all the labels when the tab is selected. |

### `NativeTabsActiveStyleType`

Supported platforms: Android, Web.

| Property | Type | Description |
| --- | --- | --- |
| color(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Supported platforms: Android, Web. |
| fontSize(optional) | `number` | Supported platforms: Android, Web. |
| iconColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Supported platforms: Android. |
| indicatorColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Supported platforms: Android, Web. |

### `NativeTabsLabelStyle`

Supported platforms: Android, iOS, tvOS, Web.

| Property | Type | Description |
| --- | --- | --- |
| color(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The color of the tab label. |
| fontFamily(optional) | `string` | The font family of the tab label. |
| fontSize(optional) | `number` | The font size of the tab label. |
| fontStyle(optional) | `'italic' | 'normal'` | The font style of the tab label. |
| fontWeight(optional) | [NumericFontWeight](#numericfontweight) | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | The font weight of the tab label. |

### `SourceIconCombination`

Supported platforms: Android, iOS, tvOS, Web.

| Property | Type | Description |
| --- | --- | --- |
| androidSrc(optional) | `undefined` | - |
| drawable(optional) | `undefined` | - |
| sf(optional) | `undefined` | - |
| src(optional) | ReactElement | [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource) | { default: ReactElement<unknown, string | JSXElementConstructor<any>> | ImageSourcePropType | undefined, selected: ReactElement<unknown, string | JSXElementConstructor<any>> | ImageSourcePropType } | Supported platforms: Android, iOS. The image source to use as an icon. The value can be provided in two ways:
-   As an image source
-   As an object specifying the default and selected states

. Example

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

. Example

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

 |

## Types

### `SymbolOrImageSource`

Supported platforms: Android, iOS, tvOS, Web.

Type: `object` shaped as below:

| Property | Type | Description |
| --- | --- | --- |
| drawable(optional) | `string` | Supported platforms: Android. The name of the drawable resource to use as an icon. |
| sf(optional) | [SFSymbol](https://github.com/nandorojo/sf-symbols-typescript) | Supported platforms: iOS. The name of the SF Symbol to use as an icon. |

Or `object` shaped as below:

| Property | Type | Description |
| --- | --- | --- |
| src(optional) | [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource) | [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)<[ImageSourcePropType](https://reactnative.dev/docs/image#imagesource) | null\> | The image source to use as an icon. |