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 a nested Stack Navigator) and displays an active state when selected.

1122

Each tab has two states:

  • Active State: when the screen attached to the tab is currently being viewed
  • Inactive State: rest of the screens that are not being viewed

Styles

Labels

In this section, you can modify the appearance of each tab's label.

400
PropertyDescription
FontSet the font, 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

In this section, you can set colors for a tab's active state and inactive state .

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

Tab Navigator Border

By default, the Bottom Tab Navigator has a top border that is visible.

600

You can modify the color of the top border using Background and Border properties from the Properties panel > Style tab.

In the below example, the bottom tab bar has a background color set to Primary.

800

To make the top border of the bottom tab bar invisible, set the color of the Border property same as the Background property's value.

800

Configs

Basics

400
PropertyDescription
NameSet the name for the navigator to appear in the Navigation tree.
Initial Route(Make sure this is set)Set 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.
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

400
PropertyDescription
RouteAssign a screen in the navigator to a tab.
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.

Advanced

400
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).
Adapt to ScreenEnable so the navigator adapts to the size of the screen (enabled by default).
Hide When Keyboard ShownEnable so that the navigator is hidden when the keyboard appears on the screen.

Nested Navigators

The term nested navigators mean that rendering a navigator as a primary route on another navigator.

A common scenario for nested navigators in a Draftbit app is when you have a Stack Navigator that contains two screens, but one of the screen from this Stack Navigator is also the initial route for a tab.

In the example below, notice that the HomeNavigator is composed of two screens:

  • Home
  • Property Detail
800

The Home screen is assigned an Initial route in the Home Navigator.

380

The "Initial route" property is set to Home (Screen).

When the Home Navigator is nested in the Tab Navigator (called Main in the above example), the Initial route of the Home Navigator becomes the initial screen of the Tab Navigator as well.

600

Additional Resources