Drawer Nav Block

You can further customize the Drawer Navigator using your own Block. This is especially handy if you want to add other components to the Drawer, such as a header or footer section.

Assigning Blocks as a Drawer Navigator

To replace the default Drawer Navigator with your own custom Block, go to Navigate mode, select the Drawer Navigator on the left, then switch to the Configs tab in the right panel of the Builder. Find the Drawer 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 Drawer Block. The route data is an array of objects each representing one of the items you have defined for the Drawer 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 drawer.

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.