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
In this section, you can modify the appearance of each tab's label.
|Font||Set the font, font size, line spacing, and line height for the tab labels (Note: |
In this section, you can set colors for a tab's active state and inactive state .
By default, the Bottom Tab Navigator has a top border that is visible.
You can modify the color of the top border using
Border properties from the Properties panel > Style tab.
In the below example, the bottom tab bar has a background color set to
To make the top border of the bottom tab bar invisible, set the color of the
Border property same as the
Background property's value.
|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.|
|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.|
|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.|
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:
- Property Detail
The Home screen is assigned an Initial route in the Home Navigator.
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.
Updated over 1 year ago