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

PropertyDescription
FontSet the font family and weight, font size, line spacing, and line height for the item labels

Colors

General

PropertyDescription
BackgroundSet the background color of the Drawer.
Overlay ColorThe 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.

PropertyDescription
TextSet the color of the active item label (Note: Show labels must be active in the styles tab).
IconSet the color of the active item icon (Note: Show icon must be active in the configs tab).
BackgroundSet the background color of the active item.

Inactive Item

These styles will be applied to all inactive item.

PropertyDescription
TextSet the color of the inactive item label (Note: Show labels must be active in the styles tab).
IconSet the color of the inactive item icon (Note: Show icon must be active in the configs tab).
BackgroundSet the background color of the inactive item.

Header

These styles will be applied to the top header

General

PropertyDescription
FontSet the font family and weight, font size, line spacing, and line height for the header bar
TextSet the color of the header bar
BackgroundSet the background color of the header bar.
BorderSet the bottom border color of the header bar.

Configuration Properties

Basics

General

PropertyDescription
NameSet the name for the navigator to appear in the Navigation tree.
Initial RouteSet 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 StatusThe default status of the drawer - whether the drawer should be open or closed by default.

Options:
opened
closed
PositionThe position of the drawer. Defaults to left for LTR languages and right for RTL languages.

Options:
left
right
TypeType 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 RevealWhen 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...

PropertyDescription
RouteAssign a Screen or Navigator to navigate to when the item is selected
LabelSet the label for the item (If a label is not set in this section, the label name defaults to the screen name).
IconSet an optional icon for the item.

Header

These props control the top header

General

PropertyDescription
Show HeaderSet whether the top header bar should be displayed
TransparentSet whether the top header bar should be transparent

Title

PropertyDescription
TitleSet whether the top header bar should be displayed
AlignSet whether the top header bar should be transparent
Allow Font ScalingWhen enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings.

Left Area

PropertyDescription
IconSet an icon for the header bar left area.
LabelSet a label for the header bar left area.

Right Area

PropertyDescription
IconSet an icon for the header bar left area.
LabelSet 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.

PropertyDescription
BlockSelect 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

PropertyDescription
Back BehaviorSet the back behavior for the navigator.
Allow Font ScalingEnable 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