The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

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 navigator) and displays an active state when selected.

Styles

Labels

Parameter

Description

Font

Set the font, font size, and line height for the tab labels (Note: Show labels must be active in the configs tab).

Colors

In this section, you can set colors for a tab's Active state (when the screen attached to the tab is currently being viewed) and Inactive state (screens that are not being viewed).

Parameter

Description

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

Background

Set the color of the area of the tab

Configs

Basics

Parameter

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.

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.

Tabs

Parameter

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

Parameter

Description

Lazy Load

If enabled, tabs will only render in the active state.

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 (defaults to true).

Adapt to Screen

Enable so the navigator adapts to the size of the screen.

Hide When Keyboard Shown

Enable so that the navigator is hidden when the keyboard appears on the screen.

Resources

React Navigation - TabNavigator reference
React Navigation - Tab navigation

Updated 3 months ago


Tab Navigator


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.