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 .

Property

Description

Background

Set the background color of the tab.

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

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.

When the Home Navigator is nested n 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


Did this page help you?