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.
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.
You can add Screens to a Tab Navigator by dragging and dropping the Screen under the desired Tab Navigator in the left-side panel.
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.
| 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). |
| Property | Description |
|---|
| Icon Size | Set a custom size for the tab bar icons. Overrides the default |
| Property | Description |
|---|
| Tab Bar Height | Set a custom height for the tab bar. Overrides the default |
| Property | Description |
|---|
| Top Padding | Set a custom top padding for Android. Overrides the default |
| Bottom Padding | Set a custom bottom padding for Android. Overrides the default |
| Property | Description |
|---|
| Top Padding | Set a custom top padding for iOS. Overrides the default |
| Bottom Padding | Set a custom bottom padding for iOS. Overrides the default |
| Property | Description |
|---|
| Top Padding | Set a custom top padding for iOS. Overrides the default |
| Bottom Padding | Set a custom bottom padding for iOS. Overrides the default |
| 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.
These styles will be applied to the active tab. Only one tab can be active at a time.
| Property | Description |
|---|
| Text | Set the color of the active tab label (Note: Show labels must be active in thestyles tab). |
| Icon | Set the color of the active tab icon (Note: Show icon must be active in theconfigs tab). |
| Background | Set the background color of the active tab. |
These styles will be applied to all inactive tabs.
| Property | Description |
|---|
| Text | Set the color of the inactive tab label (Note: Show labels must be active in thestyles tab). |
| Icon | Set the color of the inactive tab icon (Note: Show icon must be active in theconfigs tab). |
| Background | Set the background color of the inactive tab. |
These styles will be applied to the top header
| 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. |
| 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 becomes active. (Make sure this is set) |
| Number of tabs | Set the number of tabs to appear in the navigator. |
| 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. |
You can add multiple Tabs to the Tab Navigator. Each one will have the following properties
| 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. |
These props control the top header
| Property | Description |
|---|
| Show Header | Set whether the top header bar should be displayed |
| Hide Parent Header | Set whether to hide the parent navigator's header |
| Transparent | Set whether the top header bar should be transparent |
| Header Mode | Set the header mode - float or screen |
| 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. |
| Property | Description |
|---|
| Icon | Set an icon for the header bar left area. |
| Label | Set a label for the header bar left area. |
| Property | Description |
|---|
| Icon | Set an icon for the header bar left area. |
| Label | Set a label for the header bar left area. |
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. |
| 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 |
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.
