Tab Bar Block

You can further customize the bottom tab bar for a Tab Navigator using your own Saved Block. This is especially handy if you want to add other components to the bottom tabs, such as a sticky Audio Player.

Assigning Blocks as a Tab Bar

To replace the default tab bar with your own custom Block, go to Navigate mode, select the Tab Navigator on the left, then switch to the Configs tab in the right panel of the Builder. Find the Tab Bar Block section where you can select an existing Block or create a new one.

Accessing Route Data

You can access the route data from inside the Block which is assigned as the Tab Navigator Block. The route data is an array of objects each representing one of the tabs you have defined for the Tab Navigator. The data will be accessible via a routes variable listed in variable dropdowns for components and Actions. This let's you pass the associated icon, label, and name to different components and Actions so you can customize your bottom tabs.

Route Properties

Here's an example of what the object array for the routes variable looks like:

[
  {
    "name": "HomeScreen",
    "label": "Home",
    "icon": "Feather/home"
  },
  {
    "name": "FeedScreen",
    "label": "Feed",
    "icon": "Feather/align-left"
  },
  {
    "name": "ArticlesScreen",
    "label": "Articles",
    "icon": "AntDesign/filetext1"
  }
]

You'll also have access to a currentRoute variable which is a single route object representing the currently active Screen.

{
  "name": "HomeScreen",
  "label": "Home",
  "icon": "Feather/home"
}

However, the icon, label, and name of the current route are also directly accessible from the variable dropdown for your convenience.

Navigating with Route Data

The Navigate Action includes an option for the Destination prop named Custom Destination. When selected, it will enable two additional parameters - Route Name and Params.

You can pass the name key from the route data to the Route Name prop and include any navigation params.