Skip to main content
Version: 7.7.0

Bottom Tabs Options

const options = {
bottomTabs: {},
};

animate#

Controls whether toggling visibility states will be animated.

TypeRequiredPlatform
booleanNoBoth

animateTabSelection#

Controls wether tab selection is animated or not

TypeRequiredPlatform
booleanNoAndroid

backgroundColor#

Change the background color.

TypeRequiredPlatform
colorNoBoth

barStyle#

Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires translucent: true.

TypeRequiredPlatform
enum('default','black')NoBoth

currentTabId#

Select a tab by the id (componentId) of a child contained in it. See Selecting tabs programmatically for a detailed explanation.

TypeRequiredPlatform
numberNoBoth

currentTabIndex#

TypeRequiredPlatform
numberNoBoth

drawBehind#

TypeRequiredPlatform
booleanNoBoth

elevation#

TypeRequiredPlatform
numberNoAndroid

hideShadow#

TypeRequiredPlatform
booleanNoiOS

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.

TypeRequiredPlatform
booleanNoAndroid

preferLargeIcons#

TypeRequiredPlatform
booleanNoAndroid

tabsAttachMode#

TypeRequiredPlatform
enum('together','afterInitialTab','onSwitchToTab')NoBoth

testID#

TypeRequiredPlatform
stringNoBoth

titleDisplayMode#

TypeRequiredPlatform
enum('alwaysShow','showWhenActive','alwaysHide')NoBoth

translucent#

A Boolean value that indicates whether the BottomTabs are translucent. For this option to function as expected 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.

TypeRequiredPlatform
booleanNoiOS

visible#

TypeRequiredPlatform
booleanNoBoth