Skip to main content
This component is Android-only. It will not work on iOS or other platforms.
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

import React from 'react';
import { DrawerLayoutAndroid, View, Text, StyleSheet } from 'react-native';

const App = () => {
  const navigationView = (
    <View style={styles.navigationContainer}>
      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
    </View>
  );

  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition="left"
      renderNavigationView={() => navigationView}>
      <View style={styles.container}>
        <Text style={styles.paragraph}>Hello</Text>
        <Text style={styles.paragraph}>World!</Text>
      </View>
    </DrawerLayoutAndroid>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16,
  },
  navigationContainer: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  paragraph: {
    margin: 10,
    fontSize: 15,
  },
});

export default App;

​
Props

​
renderNavigationView (required)

Type: () => React.Element The navigation view that will be rendered to the side of the screen and can be pulled in.

​
drawerPosition

Type: 'left' | 'right' Default: 'left' Specifies the side of the screen from which the drawer will slide in.

​
drawerWidth

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

​
drawerBackgroundColor

Type: ColorValue Default: 'white' Specifies the background color of the drawer. If you want to set the opacity of the drawer, use rgba. 
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
  {/* ... */}
</DrawerLayoutAndroid>

​
drawerLockMode

Type: 'unlocked' | 'locked-closed' | 'locked-open' Default: 'unlocked' Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
  • unlocked (default) - The drawer will respond (open/close) to touch gestures.
  • locked-closed - The drawer will stay closed and not respond to gestures.
  • locked-open - The drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).

​
keyboardDismissMode

Type: 'none' | 'on-drag' Default: 'none' Determines whether the keyboard gets dismissed in response to a drag.
  • none (the default) - Drags do not dismiss the keyboard.
  • on-drag - The keyboard is dismissed when a drag begins.

​
onDrawerClose

Type: () => void Function called whenever the navigation view has been closed.

​
onDrawerOpen

Type: () => void Function called whenever the navigation view has been opened.

​
onDrawerSlide

Type: (event: DrawerSlideEvent) => void Function called whenever there is an interaction with the navigation view.

​
onDrawerStateChanged

Type: (state: 'Idle' | 'Dragging' | 'Settling') => void Function called when the drawer state has changed. The drawer can be in 3 states:
  • Idle - There is no interaction with the navigation view happening at the time
  • Dragging - There is currently an interaction with the navigation view
  • Settling - There was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation

​
statusBarBackgroundColor

Type: ColorValue 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+.

​
Methods

​
openDrawer()

openDrawer();
Opens the drawer.

​
closeDrawer()

closeDrawer();
Closes the drawer.

​
Example with Ref

To programmatically open or close the drawer, you need to provide a ref:

​
Function Component

import React, { useRef } from 'react';
import { DrawerLayoutAndroid, Button, View } from 'react-native';

const App = () => {
  const drawerRef = useRef(null);

  const openDrawer = () => {
    drawerRef.current?.openDrawer();
  };

  const closeDrawer = () => {
    drawerRef.current?.closeDrawer();
  };

  const navigationView = (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <Button title="Close Drawer" onPress={closeDrawer} />
    </View>
  );

  return (
    <DrawerLayoutAndroid
      ref={drawerRef}
      drawerWidth={300}
      drawerPosition="left"
      renderNavigationView={() => navigationView}>
      <View style={{ flex: 1, alignItems: 'center' }}>
        <Button title="Open Drawer" onPress={openDrawer} />
      </View>
    </DrawerLayoutAndroid>
  );
};

export default App;

​
Class Component

import React, { Component } from 'react';
import { DrawerLayoutAndroid, Button, View } from 'react-native';

class App extends Component {
  drawerRef = React.createRef();

  openDrawer = () => {
    this.drawerRef.current?.openDrawer();
  };

  closeDrawer = () => {
    this.drawerRef.current?.closeDrawer();
  };

  render() {
    const navigationView = (
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <Button title="Close Drawer" onPress={this.closeDrawer} />
      </View>
    );

    return (
      <DrawerLayoutAndroid
        ref={this.drawerRef}
        drawerWidth={300}
        drawerPosition="left"
        renderNavigationView={() => navigationView}>
        <View style={{ flex: 1, alignItems: 'center' }}>
          <Button title="Open Drawer" onPress={this.openDrawer} />
        </View>
      </DrawerLayoutAndroid>
    );
  }
}

export default App;

Build docs developers (and LLMs) love

Get started for freeTalk to us