Tab Navigator

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

Labels

PropertyDescription
FontSet 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).

Colors

General

PropertyDescription
BackgroundSet the background color of the tab bar.
BorderSet the top border color of the tab bar.

Active Tab

These styles will be applied the active tab. Only one tab can be active at a time.

PropertyDescription
TextSet the color of the active tab label (Note: Show labels must be active in the styles tab).
IconSet the color of the active tab icon (Note: Show icon must be active in the configs tab).
BackgroundSet the background color of the active tab.

Inactive Tab

These styles will be applied to all inactive tabs.

PropertyDescription
TextSet the color of the inactive tab label (Note: Show labels must be active in the styles tab).
IconSet the color of the inactive tab icon (Note: Show icon must be active in the configs tab).
BackgroundSet the background color of the inactive tab.

Header

These styles will be applied to the top header

General

PropertyDescription
FontSet the font family and weight, font size, line spacing, and line height for the header bar
TextSet the color of the header bar
BackgroundSet the background color of the header bar.
BorderSet the bottom border color of the header bar.

Configuration Properties

Basics

General

PropertyDescription
NameSet the name for the navigator to appear in the Navigation tree.
Initial RouteSet a screen or navigator as the initial route. The screen selected under this property will be the first screen displayed when the navigator gets active. (Make sure this is set)
Number of tabsSet the number of tabs to appear in the navigator (max 5).
Show labelsEnable to show labels on each tab.
Show iconsEnable to show icons on each tab.
Label positionSet 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...

PropertyDescription
RouteAssign a Screen or Navigator to navigate to when the tab is selected
LabelSet the label for the tab (If a label is not set in this section, the label name defaults to the screen name).
IconSet an icon for the tab.

Header

These props control the top header

General

PropertyDescription
Show HeaderSet whether the top header bar should be displayed
TransparentSet whether the top header bar should be transparent

Title

PropertyDescription
TitleSet whether the top header bar should be displayed
AlignSet whether the top header bar should be transparent
Allow Font ScalingWhen enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings.

Left Area

PropertyDescription
IconSet an icon for the header bar left area.
LabelSet a label for the header bar left area.

Right Area

PropertyDescription
IconSet an icon for the header bar left area.
LabelSet a label for the header bar left area.

Advanced

General

PropertyDescription
Lazy LoadIf enabled, tabs will only render in the active state (enabled by default)
Back BehaviorSet the back behavior for the navigator.
Allow Font ScalingEnable so that the label font will scale to meet Text Size accessibility settings (enabled by default).
Hide When Keyboard ShownEnable so that the navigator is hidden when the keyboard appears on the screen.
Tab Press Initial ScreenEnable behavior so that clicking on any bottom tab will always redirect to initial screen of stack
Status Bar HeightExtra 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.

Additional Resources