Drawer Navigator
Navigate to different screens using a clickable drawer that slides out from the side.
In this tutorial, we'll explore the benefits of using a drawer navigator and provide step-by-step instructions on implementation.
To add a navigator to your app, click Screens + at the top of your component tree.
Select Add Navigator and select the Navigator you want to add.
Within the component tree, drag and drop screens to nest them under the Drawer Navigator component.
​.gif?alt=media&token=54edf115-c37a-421e-8b24-1825a104ee1f)
​
​
Once a screen has been added to the drawer navigator, a new section in the screen's properties panel, Drawer Navigation Options, becomes available. This is where you define the screen's label that displays in the user's drawer navigator.
You have many options for styling your Drawer Navigator, such as changing the background color or tint color. Here are the different options for customization:
Property | Description | Data Type |
|---|---|---|
Drawer Width | The width of the drawer in pixels. By default, this is 280 pixels for phones and 320 pixels for tablets. | Number |
Drawer Position | The position the Drawer enters the screen from. | Select from menu (left or right) |
Active Tint Color | Text color of selected drawer. | Color |
Active Background Color | Background color of selected drawer. | Color |
Inactive Tint Color | Text color for unselected drawers. | Color |
Inactive Background Color | Background color for unselected drawers. | Color |
​
Last modified 15d ago