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.

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.

Property	Description
Font	Set 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 .

Property	Description
Background	Set the background color of the tab bar.
Border	Set the top border color of the tab bar.
Text	Set the color of the tab label (Note: Show labels must be active in the styles tab).
Icon	Set 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.

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.

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.

Configs

Basics

Property	Description
Name	Set 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 tabs	Set the number of tabs to appear in the navigator (max 5).
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

Property	Description
Route	Assign a screen in the navigator to a tab.
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.

Advanced

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).
Adapt to Screen	Enable so the navigator adapts to the size of the screen (enabled by default).
Hide When Keyboard Shown	Enable 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

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.