Drawer Navigator
Drawer Navigators allow you to add an animated navigation drawer to the left or right side of your app. Each menu item is linked to a Screen or nested navigator and displays an active state when selected.
You can customize the colors, icons, and select from several animation styles. I's also possible to create a custom Drawer Navigator using a Block like you can with the Tab Navigator.
Adding a Drawer Navigator
Make sure you're in the Navigate view in the Builder, then click the + button at the top-left above the navigation hierarchy in the left panel, and select Drawer Navigator.
Adding Screens to a Drawer Navigator
You can add Screens to a Drawer Navigator by dragging and dropping the Screen under the desired Drawer Navigator in the left-side panel.
Configuring a Drawer Navigator
While in the Navigation view, select the Drawer Navigator you'd like to configure from the left panel. Once selected, the right panel will update with the available Style, Config, Data, and Interactions properties.
Controlling the Drawer Navigator
In addition to the menu button in the header which is added by default to open/close the drawer, there's also an Toggle Drawer Action you can use from any Trigger.
Style Properties
Label
Drawer Items
| Property | Description |
|---|---|
| Font | Set the font family and weight, font size, line spacing, and line height for the item labels |
Colors
General
| Property | Description |
|---|---|
| Background | Set the background color of the Drawer. |
| Overlay Color | The overlay color applied over the Screen content when the Drawer is open |
Active Item
These styles will be applied the active item. Only one item can be active at a time.
Inactive Item
These styles will be applied to all inactive item.
Header
These styles will be applied to the top header
General
| Property | Description |
|---|---|
| Font | Set the font family and weight, font size, line spacing, and line height for the header bar |
| Text | Set the color of the header bar |
| Background | Set the background color of the header bar. |
| Border | Set the bottom border color of the header bar. |
Configuration Properties
Basics
General
| Property | Description |
|---|---|
| Name | Set the name for the navigator to appear in the Navigation tree. |
| Initial Route | Set a screen or navigator as the initial route. The screen selected under this property will be the first screen displayed when the navigator gets active. (Make sure this is set) |
| Default Status | The default status of the drawer - whether the drawer should be open or closed by default. Options: openedclosed |
| Position | The position of the drawer. Defaults to left for LTR languages and right for RTL languages. Options: leftright |
| Type | Type of the drawer. It determines how the drawer looks and animates. Defaults to slide on iOS and front on other platforms. See here for more details. Defaults to slide on iOS and front on other platforms.Options: Front - Traditional drawer which covers the screen with an overlay behind it.Back - The drawer is revealed behind the screen on swipe.Slide - Both the screen and the drawer slide on swipe to reveal the drawer.Permanent - A permanent drawer is shown as a sidebar. Useful for having always visible drawer on larger screens. |
| Swipe to Reveal | When disabled, the drawer cannot be opened by swiping from the edge of the Screen in which case only tapping the default header icon or triggering the Show Drawer Action will open the drawer. |
Items
You can add multiple menu items to the Drawer Navigator. Each one will have the following properties
Item 1, Item 2...
| Property | Description |
|---|---|
| Route | Assign a Screen or Navigator to navigate to when the item is selected |
| Label | Set the label for the item (If a label is not set in this section, the label name defaults to the screen name). |
| Icon | Set an optional icon for the item. |
Header
These props control the top header
General
| Property | Description |
|---|---|
| Show Header | Set whether the top header bar should be displayed |
| Transparent | Set whether the top header bar should be transparent |
Title
| Property | Description |
|---|---|
| Title | Set whether the top header bar should be displayed |
| Align | Set whether the top header bar should be transparent |
| Allow Font Scaling | When enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings. |
Left Area
| Property | Description |
|---|---|
| Icon | Set an icon for the header bar left area. |
| Label | Set a label for the header bar left area. |
Right Area
| Property | Description |
|---|---|
| Icon | Set an icon for the header bar left area. |
| Label | Set a label for the header bar left area. |
Drawer Block
You can build a completely customized Drawer Navigator using a Block and assign it here. Check out the Drawer Nav Block doc for more details.
| Property | Description |
|---|---|
| Block | Select a Block to be used as the Drawer Navigator. To create a new Block, enter a name and select the 'New Block' option. |
Advanced
General
| Property | Description |
|---|---|
| Back Behavior | Set the back behavior for the navigator. |
| Allow Font Scaling | Enable so that the label font will scale to meet Text Size accessibility settings (enabled by default). |
Nested Navigators
You can nest any number of Stack Navigators inside a Drawer Navigator and set a specific Navigator as the Initial Route.
For example, you might want your app to have 4 different tabs and each tab might display a different Stack Navigator with multiple child Screens.
To add a Stack Navigator inside a Drawer Navigator, select the Navigator you wish to add to then click the + button and select Stack Navigator or drag-and-drop and existing Stack Navigator inside another. Or drag and drop and existing navigator inside the Drawer Navigator.
Additional Resources
Updated about 1 hour ago