Top Tab Navigator
Possibly the most common style of navigation in mobile apps is tab-based navigation.
The Top Tab Navigator is positioned at the top of your app, and allows users to switch between different screens by clicking.

To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.
.gif?alt=media&token=5cd5d222-aeaa-4486-bf39-bb8928a48703)
You have many options for styling your Top Tab Navigator, such as changing the background color or tint color. Here are the different options for customization:
- SwipeEnabled: Allow the user to swipe between screens.
- AnimationEnabled: Select whether to animate the transitions between screens.
- Lazy: If
true
, tabs are only loaded once the tab is opened. Iffalse
, all tabs are loaded when the Tab Navigator is first opened. - Background Color: Select a color for the top tab navigator.
- Tab Indicator Color: An underline will appear underneath the tab you select. You can select a color for the underline.
- Active Tint Color: Select a font color for the tab currently in use.
- Inactive Tint Color: Select a color for the text of the tabs that are not in use.
- ShowIcon: Toggle whether to show icons in the Tab Navigator.
- ShowLabel: Toggle whether to show tab labels in the Tab Navigator.
- Upper Case Label: Make the text for all the tabs upper case.
- PressColor: Color of material ripple as a tab is pressed
- PressOpacity: Opacity of material ripple as a tab is pressed
- ScrollEnabled: Toggle whether to enable scrollable tabs
- Tab Indicator Height: An underline will appear underneath the tab you select. This section will allow you to choose how tall the underline is.
When designing a tab, you can use words or images to guide users to different screens.

Using Words

Using Images
Step 1. Add screens to a Navigator by dragging and dropping them on top of a Navigator.
Step 2. Select the Top Tab Navigator. Decide if you would like to display icons or labels by clicking on these switches:

Step 3. Depending on if you are adding icons or labels, select the screen you would like to style and upload an image or add content:

Additional descriptions are below:
Tab Bar Label -- The name of your tab label
Active Tab Icon -- Icon that appears when tab is selected; You can upload an image for this icon.
Inactive Tab Icon -- Icon that appears when tab is not selected; You can upload an image for this icon.
Swiping is a popular way to move through screens and is enabled by the Tab Navigator. You can enable the swipe feature by clicking the "SwipeEnabled' switch.

Last modified 11mo ago