If you don't use React Navigation, you can use the TabView
component directly.
Each scene in the tab view is a separate component that represents a screen. You can define these components independently:
Then use SceneMap
to map route keys to scene components:
navigationState
State for the tab view. The state should contain:
routes
: Array of route objects containing key
and title
propsindex
: Current selected tab indexrenderScene
Function that returns a React element to render for the screen. Can be created using SceneMap
or custom render function.
onIndexChange
Callback that is called when the tab index changes.
labeled
Whether to show labels in tabs. When false
, only icons will be displayed.
boolean
true
false
sidebarAdaptable
A tab bar style that adapts to each platform:
ignoresTopSafeArea
Whether to ignore the top safe area.
boolean
disablePageAnimations
Whether to disable animations between tabs.
boolean
hapticFeedbackEnabled
Whether to enable haptic feedback on tab press.
Type: boolean
Default: false
tabLabelStyle
Object containing styles for the tab label. Supported properties:
fontFamily
fontSize
fontWeight
scrollEdgeAppearance
Appearance attributes for the tab bar when a scroll view is at the bottom.
'default' | 'opaque' | 'transparent'
tabBarActiveTintColor
Color for the active tab.
ColorValue
tabBarInactiveTintColor
Color for inactive tabs.
ColorValue
barTintColor
Background color of the tab bar.
ColorValue
translucent
Whether the tab bar is translucent.
boolean
activeIndicatorColor
Color of tab indicator.
ColorValue
Each route in the routes
array can have the following properties:
key
: Unique identifier for the routetitle
: Display title for the tabfocusedIcon
: Icon to show when tab is activeunfocusedIcon
: Icon to show when tab is inactive (optional)badge
: Badge text to display on the tabactiveTintColor
: Custom active tint color for this specific tablazy
: Whether to lazy load this tab's contentgetLazy
Function to determine if a screen should be lazy loaded.
route.lazy
getLabelText
Function to get the label text for a tab.
route.title
getBadge
Function to get the badge text for a tab.
route.badge
getActiveTintColor
Function to get the active tint color for a tab.
route.activeTintColor
getIcon
Function to get the icon for a tab.
Default: Uses route.focusedIcon
and route.unfocusedIcon
getHidden
Function to determine if a tab should be hidden.
route.hidden
getTestID
Function to get the test ID for a tab item.
route.testID