Types
The types of tabs.
TabsElement
Bottom tabs.
class TabsElement implements LayoutElement<Uses>
| Member | Type | Description |
|---|---|---|
| selected | selected(tab: number | string): TabsElement<Uses> | The tab to show first: its index, or its id. |
| lazy | lazy(): TabsElement<Uses> | Each tab is created the first time it shows. |
| itemStyle | itemStyle(style: TabItemStyle): TabsElement<Uses> | The look of every tab item; a tab's own goes over it. |
| minimize | minimize( minimizeBehavior: NonNullable<OptionsBottomTabs['minimizeBehavior']> ): TabsElement<Uses> | iOS 26+iPadOS 26+Android (not supported) |
| accessory | accessory<Name extends string, const Props extends object | undefined = undefined>( name: Name, props?: Props ): TabsElement<Uses | { name: Name; props: Props }> | A screen of |
| sidebar | sidebar( sidebar: NonNullable<OptionsBottomTabs['sidebar']>, sidebarLayout?: OptionsBottomTabs['sidebarLayout'] ): TabsElement<Uses> | How the tabs show on iPad. |
| customizable | customizable(customizationId: string): TabsElement<Uses> | The user arranges the tabs; the id keeps the arrangement. |
| customRow | customRow(customRow: BottomTabsCustomRowOptions): TabsElement<Uses> | The row of tab items drawn by components ( |
| backBehavior | backBehavior(bottomTabsOnPress: 'exit' | 'first' | 'previous'): TabsElement<Uses> | What back does on the first screen of a tab. |
| ios | ios(build: (tabs: TabsElement<Uses>) => TabsElement<Uses>): TabsElement<Uses> | Modifiers for iOS only. |
| android | android(build: (tabs: TabsElement<Uses>) => TabsElement<Uses>): TabsElement<Uses> | Modifiers for Android only. |
| id | id(id: string): TabsElement<Uses> | The id of the tabs: the |
| options | options(options: OptionsBottomTabs): TabsElement<Uses> | Options of the tab bar, such as |
TabElement
A tab: a screen named alone gets a stack around it. The tab's item options go on the layout of the tab, not on its first screen: the layout stays in the options a tab reads whatever screen is on top of it.
class TabElement
| Member | Type | Description |
|---|---|---|
| label | label(label: string): TabElement<Uses> | |
| icon | icon(icon: ImageResource): TabElement<Uses> | |
| selectedIcon | selectedIcon(selectedIcon: ImageResource): TabElement<Uses> | iOSiPadOSAndroid (not supported) |
| badge | badge(badge: string | number | null): TabElement<Uses> | The badge of the tab: a count or a short text. |
| dot | dot(dot: boolean | DotIndicatorOptions = true): TabElement<Uses> | |
| role | role(role: NonNullable<OptionsBottomTab['role']>): TabElement<Uses> | iOSiPadOSAndroid (not supported) |
| popToRootOnPress | popToRootOnPress(popToRootOnPress = true): TabElement<Uses> | A tap on the tab while it is selected goes back to the first screen of its stack, and on the first screen scrolls it to the top. On by default; |
| selectOnPress | selectOnPress(selectTabOnPress: boolean): TabElement<Uses> |
|
| onPress | onPress(handler: TabPressHandler): TabElement<Uses> | Called on every press of the tab, a second one too ( |
| popToRootOnBlur | popToRootOnBlur(popToRootOnBlur = true): TabElement<Uses> | When the user leaves the tab, its stack goes back to its first screen, so the tab opens on it next time. |
| itemStyle | itemStyle(style: TabItemStyle): TabElement<Uses> | |
| customization | customization( customization: NonNullable<OptionsBottomTab['customization']>, more: Pick<OptionsBottomTab, 'shownByDefault' | 'allowsHiding'> = {} ): TabElement<Uses> | With |
| testID | testID(testID: string): TabElement<Uses> | |
| ios | ios(build: (tab: TabElement<Uses>) => TabElement<Uses>): TabElement<Uses> | Modifiers for iOS only. |
| android | android(build: (tab: TabElement<Uses>) => TabElement<Uses>): TabElement<Uses> | Modifiers for Android only. |
| id | id(id: string): TabElement<Uses> | The id of the tab, for |
| options | options(options: OptionsBottomTab): TabElement<Uses> | Options of the tab item no modifier covers, such as |
TabItemStyle
The look of a tab item; Tabs().itemStyle() gives it to every tab, a tab's own goes over it.
type TabItemStyle = Pick<
OptionsBottomTab,
| 'iconColor'
| 'selectedIconColor'
| 'textColor'
| 'selectedTextColor'
| 'badgeColor'
| 'fontFamily'
| 'fontStyle'
| 'fontWeight'
| 'fontSize'
| 'selectedFontSize'
| 'iconInsets'
| 'iconWidth'
| 'iconHeight'
| 'disableIconTint'
| 'disableSelectedIconTint'
>
| Member | Type | Description |
|---|---|---|
| iconColor | Color | The color of the icon. On iOS it is blended into a bitmap icon (an SF Symbol takes the color of the state, and iOS 26 ignores it for an unselected tab). On Android it is the color of an unselected icon over the style of the bar, and |
| selectedIconColor | Color | The color of the icon of the selected tab; |
| textColor | Color | The color of the label of an unselected tab. On iOS it is the label color by default, and iOS 26 does not apply it to an unselected tab. On Android, without it the theme gives the color. |
| selectedTextColor | Color | The color of the label of the selected tab; the label color on iOS by default. The theme color |
| badgeColor | Color | The background color of the badge. On iOS before 26 it is the color in the normal state; on iOS 26 it applies to the selected tab only, and the other tabs stay system red. On Android it is the badge color, the error color of the theme by default. The theme color |
| fontFamily | FontFamily | The font family of the label. |
| fontStyle | FontStyle | The slant of the label font. |
| fontWeight | FontWeight | The weight of the label font; the nearest available weight is used. |
| fontSize | number | The size of the label. On iOS it is 10 by default and applies to both states; on Android it is the size of an unselected label, in sp. |
| selectedFontSize | number | The size of the label of the selected tab, in sp. |
| iconInsets | IconInsets | The insets of the icon. Each side is independent. They apply before iOS 26 only; iOS 26 and the compatibility mode (see |
| iconWidth | number | The width of the icon in dp. The icon is square and the width wins over |
| iconHeight | number | The height of the icon in dp, used when no |
| disableIconTint | boolean | Whether the icon keeps its own colors in the normal state: |
| disableSelectedIconTint | boolean | Whether the selected icon keeps its own colors: |
TabPressEvent
A press of a tab.
interface TabPressEvent
| Member | Type | Description |
|---|---|---|
| indexRequired | number | The index of the tab. |
| wasSelectedRequired | boolean | The tab was selected already: a second press, which apps use to scroll to the top. |
| screenId | string | The screen the tab shows: the top of its stack. |
TabPressHandler
TabSelectedEvent
type TabSelectedEvent = NavigationEvents['tabSelected']
| Member | Type | Description |
|---|---|---|
| selectedTabIndexRequired | number | The index of the tab that is now selected. |
| unselectedTabIndexRequired | number | The index of the tab that was selected before. |
| bottomTabsIdRequired | string | The id of the tabs. |
TabPressedEvent
type TabPressedEvent = NavigationEvents['tabPressed']
| Member | Type | Description |
|---|---|---|
| tabIndexRequired | number | The index of the tab that was pressed. |
| bottomTabsIdRequired | string | The id of the tabs. |
| screenId | string | The id of the screen the tab shows: the top of its stack, or the tab itself when it is a screen. |
| wasSelectedRequired | boolean | Whether the tab was the selected one already; a press on the selected tab scrolls its content to the top. |
TabLongPressedEvent
type TabLongPressedEvent = NavigationEvents['tabLongPressed']
| Member | Type | Description |
|---|---|---|
| selectedTabIndexRequired | number | The index of the tab that was pressed. |
| bottomTabsIdRequired | string | The id of the tabs. |
AccessoryPlacementChangedEvent
type AccessoryPlacementChangedEvent = NavigationEvents['accessoryPlacementChanged']
| Member | Type | Description |
|---|---|---|
| componentIdRequired | string | The id of the accessory component ( |
| placementRequired | 'regular' | 'inline' | Where the accessory is: above the tab bar ( |