Skip to content
Drawer navigator for React Navigation
TypeScript JavaScript
Branch: master
Clone or download
nvojnovic and osdnk fix: navigation drawer sometimes not closing when pressed outside (#126)
I noticed this issue only on android devices.
After many rewrites of this component I ended up with this simple change and now drawer is closing properly every time.
Most important part is to set new state inside function with

state: (s: Animated.Value<number>) => set(this.gestureState, s)
because I was also experiencing some issues when setting it like this

state: this.gestureState
Latest commit 2220252 Oct 21, 2019

React Navigation Drawer

npm version CircleCI badge PRs Welcome

Drawer navigator for use on iOS and Android.


Open a Terminal in the project root and run:

yarn add react-navigation-drawer

If you are using Expo, you are done. Otherwise, continue to the next step.

Install and link react-native-gesture-handler and react-native-reanimated. To install and link them, run:

yarn add react-native-reanimated react-native-gesture-handler
react-native link react-native-reanimated
react-native link react-native-gesture-handler

IMPORTANT: There are additional steps required for react-native-gesture-handler on Android after running react-native link react-native-gesture-handler. Check the this guide to complete the installation.


import { createDrawerNavigator } from 'react-navigation-drawer';

export default createDrawerNavigator({
  Inbox: InboxStack
  Drafts: DraftsStack,
}, {
  initialRouteName: 'Inbox',
  contentOptions: {
    activeTintColor: '#e91e63',

Development workflow

  • Clone this repository
  • Run yarn in the root directory and in the example directory
  • Run yarn dev in the root directory
  • Run yarn start in the example directory


Documentation can be found on the React Navigation website.

You can’t perform that action at this time.