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.

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 .

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.

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.

Additional Resources
Updated about 1 year ago