Tab Navigators allow you to add tabbed navigation to the bottom of your app. The bar is fixed to the bottom of the screen. Each tab is linked to a Screen or nested Stack Navigator and displays an active state when selected.
Adding a Tab Navigator
Make sure you're in the Navigate view in the Builder, then click the + button at the top-left above the navigation hierarchy in the left panel, and select Tab Navigator.
Adding Screens to a Tab Navigator
You can add Screens to a Tab Navigator by dragging and dropping the Screen under the desired Tab Navigator in the left-side panel.
Configuring a Tab Navigator
Select the Tab Navigator you'd like to configure from the left panel. Once selected, the right panel will update with the available properties in the Styles and Config tabs.
Style Properties
General
Typography
Property
Description
Font
Set the font family and weight, font size, line spacing, and line height for the tab labels (Note:Show labels must be active in the configs tab to display a label on each tab).
Icons
Property
Description
Icon Size
Set a custom size for the tab bar icons. Overrides the default
Size
Property
Description
Tab Bar Height
Set a custom height for the tab bar. Overrides the default
Android
Property
Description
Top Padding
Set a custom top padding for Android. Overrides the default
Bottom Padding
Set a custom bottom padding for Android. Overrides the default
iOS
Property
Description
Top Padding
Set a custom top padding for iOS. Overrides the default
Bottom Padding
Set a custom bottom padding for iOS. Overrides the default
Web
Property
Description
Top Padding
Set a custom top padding for iOS. Overrides the default
Bottom Padding
Set a custom bottom padding for iOS. Overrides the default
Colors
General
Property
Description
Background
Set the background color of the tab bar.
Border
Set the top border color of the tab bar.
⚠️
The Tab Navigator will ignore transparent color setting.
Active Tab
These styles will be applied to the active tab. Only one tab can be active at a time.
Property
Description
Text
Set the color of the active tab label (Note: Show labels must be active in thestyles tab).
Icon
Set the color of the active tab icon (Note: Show icon must be active in theconfigs tab).
Background
Set the background color of the active tab.
Inactive Tab
These styles will be applied to all inactive tabs.
Property
Description
Text
Set the color of the inactive tab label (Note: Show labels must be active in thestyles tab).
Icon
Set the color of the inactive tab icon (Note: Show icon must be active in theconfigs tab).
Background
Set the background color of the inactive tab.
Header
These styles will be applied to the top header
General
Property
Description
Font
Set the font family and weight, font size, line spacing, and line height for the header bar
Text
Set the color of the header bar
Background
Set the background color of the header bar.
Border
Set the bottom border color of the header bar.
Configuration Properties
Basics
General
Property
Description
Name
Set the name for the navigator to appear in the Navigation tree.
Initial Route
Set a screen or navigator as the initial route. The screen selected under this property will be the first screen displayed when the navigator becomes active. (Make sure this is set)
Number of tabs
Set the number of tabs to appear in the navigator.
Show labels
Enable to show labels on each tab.
Show icons
Enable to show icons on each tab.
Label position
Set the position of the tab label. Defaults to Below.
Tabs
You can add multiple Tabs to the Tab Navigator. Each one will have the following properties
Tab 1, Tab 2...
Property
Description
Route
Assign a Screen or Navigator to navigate to when the tab is selected
Label
Set the label for the tab (If a label is not set in this section, the label name defaults to the screen name).
Icon
Set an icon for the tab.
Header
These props control the top header
General
Property
Description
Show Header
Set whether the top header bar should be displayed
Hide Parent Header
Set whether to hide the parent navigator's header
Transparent
Set whether the top header bar should be transparent
Header Mode
Set the header mode - float or screen
Title
Property
Description
Title
Set whether the top header bar should be displayed
Align
Set whether the top header bar should be transparent
Allow Font Scaling
When enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings.
Left Area
Property
Description
Icon
Set an icon for the header bar left area.
Label
Set a label for the header bar left area.
Right Area
Property
Description
Icon
Set an icon for the header bar left area.
Label
Set a label for the header bar left area.
Tab Bar Block
You can build a completely customized tab bar for the Tab Navigator using a Block and assign it here. Check out the Tab Bar Block doc for more details.
Property
Description
Block
Select a Block to be used as the tab bar for the Tab Navigator. To create a new Block, enter a name and select the 'New Block' option.
Advanced
General
Property
Description
Lazy Load
If enabled, tabs will only render in the active state (enabled by default)
Back Behavior
Set the back behavior for the navigator.
Allow Font Scaling
Enable so that the label font will scale to meet Text Size accessibility settings (enabled by default).
Hide When Keyboard Shown
Enable so that the navigator is hidden when the keyboard appears on the screen.
Tab Press Initial Screen
Enable behavior so that clicking on any bottom tab will always redirect to initial screen of stack
Status Bar Height
Extra padding to add at the top of header to account for translucent status bar
Nested Navigators
You can nest any number of Stack Navigators inside a Tab Navigator and set a specific Navigator as the Initial Route.
For example, you might want your app to have 4 different bottoms tabs and each tab might display a different Stack Navigator with multiple child Screens.
To add a Stack Navigator inside a Tab Navigator, select the Navigator you wish to add to then click the + button and select Stack Navigator or drag-and-drop and existing Stack Navigator inside another.
