Drawer Nav Block
Create a custom Drawer Navigator using a 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"
}
]
Name | Description |
---|---|
name | The name of the route (the generated Screen name) |
label | The label configured for the item. Uses the Screen name by default unless explicitly set. |
icon | The name of the icon configured for the item |
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.
Property | Description |
---|---|
Route Name | A destination route name that is in the app's navigator. Usually a Screen or Navigator name |
Params | Navigation params to send to the destination route. Example: { id: 33 } |
Updated 20 days ago