Skip to content

Latest commit

 

History

History
55 lines (29 loc) · 2.76 KB

bottom-tab-navigator.md

File metadata and controls

55 lines (29 loc) · 2.76 KB
Raw
description
Navigate to different screens using a bottom tab navigator.

Bottom Tab Navigator

Bottom tabs are a popular way to navigate an app today

Adding Navigators

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.

Style your Tab

You have many options for styling your Bottom Tab Navigator, such as changing the background color or tint color. Here are the different options for customization:

  • Active Tint Color: An underline will appear underneath the tab you select. You can select a color for the underline.
  • Active Background 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.
  • InactiveBackgroundColor: Select a color for the background of the tabs that are not in use.

Adding Labels and Icons to your Tab

When designing a tab, you can use words or images to guide users to different screens.

Step by Step Instructions

Step 1. Add screens to a Navigator by dragging and dropping them on top of a Navigator.

Step 2. Select the Bottom 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.

Bottom Tab Navigator Visibility

To ensure that your bottom tab navigator is visible, the TabBarVisible switch must be set to true. If the TabBar is visible switch is set to false, the bottom tab navigator will not be visible in your app.