Skip to main content

DrawerLayoutAndroid

React component that wraps the platform DrawerLayout (Android only). The Drawer (typically used for navigation) is rendered with renderNavigationView and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the drawerPosition prop and its width can be set by the drawerWidth prop.

Exampleโ€‹


Reference

Propsโ€‹

View Propsโ€‹

Inherits View Props.


drawerBackgroundColorโ€‹

Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:

React TSX
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
TypeRequiredcolorNo

drawerLockModeโ€‹

Specifies the lock mode of the drawer. The drawer can be locked in 3 states:

TypeRequiredenum('unlocked', 'locked-closed', 'locked-open')No

drawerPositionโ€‹

Specifies the side of the screen from which the drawer will slide in. By default it is set to left.

TypeRequiredenum('left', 'right')No

drawerWidthโ€‹

Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.

TypeRequirednumberNo

keyboardDismissModeโ€‹

Determines whether the keyboard gets dismissed in response to a drag.

TypeRequiredenum('none', 'on-drag')No

onDrawerCloseโ€‹

Function called whenever the navigation view has been closed.

TypeRequiredfunctionNo

onDrawerOpenโ€‹

Function called whenever the navigation view has been opened.

TypeRequiredfunctionNo

onDrawerSlideโ€‹

Function called whenever there is an interaction with the navigation view.

TypeRequiredfunctionNo

onDrawerStateChangedโ€‹

Function called when the drawer state has changed. The drawer can be in 3 states:

TypeRequiredfunctionNo

renderNavigationViewโ€‹

The navigation view that will be rendered to the side of the screen and can be pulled in.

TypeRequiredfunctionYes

statusBarBackgroundColorโ€‹

Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.

TypeRequiredcolorNo

Methodsโ€‹

closeDrawer()โ€‹

React TSX
closeDrawer();

Closes the drawer.


openDrawer()โ€‹

React TSX
openDrawer();

Opens the drawer.