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. |
The Tab Navigator will ignore transparent color setting.
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. |
Tab Bar Block
You can build a completely customized tab bar for the Tab Navigator using a Block and assign it here. Check out the Tab Bar Block doc for more details.
| Property | Description |
|---|---|
| Block | Select a Block to be used as the tab bar for the Tab Navigator. To create a new Block, enter a name and select the 'New Block' option. |
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
You can nest any number of Stack Navigators inside a Tab Navigator and set a specific Navigator as the Initial Route.
For example, you might want your app to have 4 different bottoms tabs and each tab might display a different Stack Navigator with multiple child Screens.
To add a Stack Navigator inside a Tab Navigator, select the Navigator you wish to add to then click the + button and select Stack Navigator or drag-and-drop and existing Stack Navigator inside another.
Additional Resources
Updated 3 months ago