Recommended: Read about Bottom Tabs in the Bottom Tabs Guide. For React tab items, see Custom bottom tabs.
customRow#
Visual options for the floating row that hosts custom React tab cells. Only applies when every tab uses bottomTab.component.
On Android, customRow is forwarded from JS via RNNBottomTabsCustomRowModule (no change to existing BottomTabs layout code). On iOS, options are parsed natively from the layout tree.
BottomTabsCustomRowOptions#
height#
Content height of the row in points (iOS) / dp (Android). Excludes safe-area inset.
| Type | Required | Platform |
|---|
| number | No | Both |
Default: native tab content height; on iOS 26+ an extra 18pt is added when height is omitted.
Total visible row height = height + safe-area bottom + bottomMargin.
backgroundColor#
Solid row background. When set, overrides backgroundEffect.
| Type | Required | Platform |
|---|
| color | No | Both |
backgroundEffect#
| Type | Required | Platform |
|---|
enum(glass, blur, none) | No | Both |
| Value | iOS | Android |
|---|
glass | UIGlassEffect on iOS 26+, blur fallback | Semi-opaque material chrome |
blur | UIBlurEffect systemChromeMaterial | Semi-opaque material chrome |
none | Transparent | Transparent |
Default: glass on iOS 26+, blur on older iOS.
cornerRadius#
Corner radius of the row background.
| Type | Required | Platform |
|---|
| number | No | Both |
Default: 28 on iOS 26+, 0 on older iOS / when omitted on Android until configured.
horizontalMargin#
Horizontal inset from the screen edges.
| Type | Required | Platform |
|---|
| number | No | Both |
Default: 16 on iOS 26+, 0 when omitted.
bottomMargin#
Distance between the row's bottom edge and the safe-area bottom.
| Type | Required | Platform |
|---|
| number | No | Both |
Default: 0.
animate#
Controls whether toggling visibility states will be animated.
| Type | Required | Platform |
|---|
| boolean | No | Both |
animateTabSelection#
Controls wether tab selection is animated or not
| Type | Required | Platform |
|---|
| boolean | No | Android |
backgroundColor#
Specify the background color.
On Android - also applicable when translucence is applied, but a semi-transparent color should be used (e.g. rgba(255, 0, 0, 0.25)).
| Type | Required | Platform |
|---|
| color | No | Both |
barStyle#
Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires translucent: true.
| Type | Required | Platform |
|---|
| enum('default','black') | No | Both |
layoutStyle#
Control the way the bottom tabs are laid out.
stretch: Fill the entire width of the screen.compact: Occupy the minimum width needed to hold tab buttons. Recommended for usage in conjunction with drawBehind: true.
| Type | Required | Platform |
|---|
| enum('stretch','compact') | No | Android |
currentTabId#
Select a tab by the id (componentId) of a child contained in it. See Selecting tabs programmatically for a detailed explanation.
| Type | Required | Platform |
|---|
| number | No | Both |
currentTabIndex#
| Type | Required | Platform |
|---|
| number | No | Both |
drawBehind#
| Type | Required | Platform |
|---|
| boolean | No | Both |
elevation#
| Type | Required | Platform |
|---|
| number | No | Android |
cornerRadius#
Specify a corner-radius in order to apply round corners to the tabs container.
Mainly suitable when used in conjunction with layoutStyle: 'compact'
| Type | Required | Platform |
|---|
| number(dip) | No | Android |
bottomMargin#
Bottom-margin to set in order to enable a "hover" effect.
Works best when used in conjunction with layoutStyle: 'compact' and drawBehind: true.
| Type | Required | Platform |
|---|
| number(dip) | No | Android |
hideShadow#
| Type | Required | Platform |
|---|
| boolean | No | iOS |
hideOnScroll#
Hides the BottomTabs on scroll to increase the amount of content visible to the user.
The options requires that the scrollable view will be the root view of the screen and that it specifies nestedScrollEnabled: true.
| Type | Required | Platform |
|---|
| boolean | No | Android |
preferLargeIcons#
| Type | Required | Platform |
|---|
| boolean | No | Android |
tabsAttachMode#
| Type | Required | Platform |
|---|
| enum('together','afterInitialTab','onSwitchToTab') | No | Both |
testID#
| Type | Required | Platform |
|---|
| string | No | Both |
titleDisplayMode#
| Type | Required | Platform |
|---|
| enum('alwaysShow','showWhenActive','alwaysHide') | No | Both |
translucent#
A Boolean value that indicates whether the BottomTabs should be translucent (and background-blurred).
For this option to function properly the screen needs to be drawn behind the BottomTabs; Make sure the list component you're using (FlatList for example) is the root component in the screen and not SafeAreaView. When SafeAreView is the root component it shifts the content above the BottomTabs and the translucent effect isn't visible.
Note: On Android, the option is experimental and should be enabled using a native feature-toggle called TAB_BAR_TRANSLUCENCE (pass it to your NavigationApplication class' c'tor).
| Type | Required | Platform |
|---|
| boolean | No | iOS - Full support
Android - Experimental |
blurRadius#
Set a custom radius to be used in the blur effect. Higher is blurrier, but also more CPU-intensive.
Note: The blurring is performed following a bitmap downscale of x4.0, so ultimately the actual radius is (4*blurRadius).
| Type | Required | Platform |
|---|
| number | No | Android |
visible#
| Type | Required | Platform |
|---|
| boolean | No | Both |