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 nested Stack Navigator and displays an active state when selected.
Adding a Tab Navigator
Make sure you're in the Navigate view in the Builder, then click the + button at the top-left above the navigation hierarchy in the left panel, and select Tab Navigator.
Adding Screens to a Tab Navigator
You can add Screens to a Tab Navigator by dragging and dropping the Screen under the desired Tab Navigator in the left-side panel.
Configuring a Tab Navigator
Select the Tab Navigator you'd like to configure from the left panel. Once selected, the right panel will update with the available properties in the Styles and Config tabs.
Style Properties
Labels
| Property | Description |
|---|---|
| Font | Set the font family and weight, 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
General
| Property | Description |
|---|---|
| Background | Set the background color of the tab bar. |
| Border | Set the top border color of the tab bar. |
Active Tab
These styles will be applied the active tab. Only one tab can be active at a time.
Inactive Tab
These styles will be applied to all inactive tabs.
Header
These styles will be applied to the top header
General
| Property | Description |
|---|---|
| Font | Set the font family and weight, font size, line spacing, and line height for the header bar |
| Text | Set the color of the header bar |
| Background | Set the background color of the header bar. |
| Border | Set the bottom border color of the header bar. |
Configuration Properties
Basics
General
| Property | Description |
|---|---|
| Name | Set the name for the navigator to appear in the Navigation tree. |
| Initial Route | 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. (Make sure this is set) |
| 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
You can add multiple Tabs to the Tab Navigator. Each one will have the following properties
Tab 1, Tab 2...
| Property | Description |
|---|---|
| Route | Assign a Screen or Navigator to navigate to when the tab is selected |
| 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. |
Header
These props control the top header
General
| Property | Description |
|---|---|
| Show Header | Set whether the top header bar should be displayed |
| Transparent | Set whether the top header bar should be transparent |
Title
| Property | Description |
|---|---|
| Title | Set whether the top header bar should be displayed |
| Align | Set whether the top header bar should be transparent |
| Allow Font Scaling | When enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings. |
Left Area
| Property | Description |
|---|---|
| Icon | Set an icon for the header bar left area. |
| Label | Set a label for the header bar left area. |
Right Area
| Property | Description |
|---|---|
| Icon | Set an icon for the header bar left area. |
| Label | Set a label for the header bar left area. |
Advanced
General
| 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). |
| Hide When Keyboard Shown | Enable so that the navigator is hidden when the keyboard appears on the screen. |
| Tab Press Initial Screen | Enable behavior so that clicking on any bottom tab will always redirect to initial screen of stack |
| Status Bar Height | Extra padding to add at the top of header to account for translucent status bar |
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 month ago