import React from 'react';
import { Dimensions } from 'react-native';
import DrawerLayout from 'react-native-drawer-layout-polyfill';
import { SceneView } from 'react-navigation';

import DrawerSidebar from './DrawerSidebar';
import DrawerActions from '../routers/DrawerActions';

/**
 * Component that renders the drawer.
 */
export default class DrawerView extends React.PureComponent {
  state = {
    drawerWidth:
      typeof this.props.navigationConfig.drawerWidth === 'function'
        ? this.props.navigationConfig.drawerWidth()
        : this.props.navigationConfig.drawerWidth,
  };

  componentDidMount() {
    Dimensions.addEventListener('change', this._updateWidth);
  }

  componentDidUpdate(prevProps) {
    const { isDrawerOpen } = this.props.navigation.state;
    const wasDrawerOpen = prevProps.navigation.state.isDrawerOpen;

    if (this._shouldOpen(isDrawerOpen, wasDrawerOpen)) {
      this._drawerState = 'opening';
      this._drawer.openDrawer();
    } else if (this._shouldClose(isDrawerOpen, wasDrawerOpen)) {
      this._drawerState = 'closing';
      this._drawer.closeDrawer();
    }
  }

  componentWillUnmount() {
    Dimensions.removeEventListener('change', this._updateWidth);
  }

  _drawerState = 'closed';

  _shouldOpen = (isDrawerOpen, wasDrawerOpen) => {
    return (
      isDrawerOpen &&
      !wasDrawerOpen &&
      (this._drawerState === 'closed' || this._drawerState === 'closing')
    );
  };

  _shouldClose = (isDrawerOpen, wasDrawerOpen) => {
    return (
      wasDrawerOpen &&
      !isDrawerOpen &&
      (this._drawerState === 'open' || this._drawerState === 'opening')
    );
  };

  _handleDrawerOpen = () => {
    const { navigation } = this.props;
    const { isDrawerOpen } = navigation.state;
    if (!isDrawerOpen && this._drawerState === 'closed') {
      navigation.dispatch({ type: DrawerActions.OPEN_DRAWER });
    }
    this._drawerState = 'open';
  };

  _handleDrawerClose = () => {
    const { navigation } = this.props;
    const { isDrawerOpen } = navigation.state;
    if (isDrawerOpen && this._drawerState === 'open') {
      navigation.dispatch({ type: DrawerActions.CLOSE_DRAWER });
    }
    this._drawerState = 'closed';
  };

  _updateWidth = () => {
    const drawerWidth =
      typeof this.props.navigationConfig.drawerWidth === 'function'
        ? this.props.navigationConfig.drawerWidth()
        : this.props.navigationConfig.drawerWidth;

    if (this.state.drawerWidth !== drawerWidth) {
      this.setState({ drawerWidth });
    }
  };

  _renderNavigationView = () => {
    return (
      <DrawerSidebar
        screenProps={this.props.screenProps}
        navigation={this.props.navigation}
        descriptors={this.props.descriptors}
        contentComponent={this.props.navigationConfig.contentComponent}
        contentOptions={this.props.navigationConfig.contentOptions}
        drawerPosition={this.props.navigationConfig.drawerPosition}
        style={this.props.navigationConfig.style}
        {...this.props.navigationConfig}
      />
    );
  };

  render() {
    const { state } = this.props.navigation;
    const activeKey = state.routes[state.index].key;
    const descriptor = this.props.descriptors[activeKey];

    const { drawerLockMode } = descriptor.options;

    return (
      <DrawerLayout
        ref={c => {
          this._drawer = c;
        }}
        drawerLockMode={
          drawerLockMode ||
          (this.props.screenProps && this.props.screenProps.drawerLockMode) ||
          this.props.navigationConfig.drawerLockMode
        }
        drawerBackgroundColor={
          this.props.navigationConfig.drawerBackgroundColor
        }
        drawerWidth={this.state.drawerWidth}
        onDrawerOpen={this._handleDrawerOpen}
        onDrawerClose={this._handleDrawerClose}
        useNativeAnimations={this.props.navigationConfig.useNativeAnimations}
        renderNavigationView={this._renderNavigationView}
        drawerPosition={
          this.props.navigationConfig.drawerPosition === 'right'
            ? DrawerLayout.positions.Right
            : DrawerLayout.positions.Left
        }
      >
        <SceneView
          navigation={descriptor.navigation}
          screenProps={this.props.screenProps}
          component={descriptor.getComponent()}
        />
      </DrawerLayout>
    );
  }
}

@@ -733,24 +733,29 @@
 isDrawerOpen
+, key
  %7D = this.pr
@@ -772,24 +772,76 @@
 tion.state;%0A
+    const prevKey = prevProps.navigation.state.key;%0A
     const wa
@@ -895,25 +895,39 @@
 erOpen;%0A
-%0A    if (
+    const shouldOpen = 
 this._sh
@@ -955,32 +955,150 @@
 , wasDrawerOpen)
+;%0A    const shouldClose =%0A      this._shouldClose(isDrawerOpen, wasDrawerOpen) %7C%7C key !== prevKey;%0A%0A    if (shouldOpen
 ) %7B%0A      this._
@@ -1170,22 +1170,16 @@
 lse if (
-this._
 shouldCl
@@ -1185,37 +1185,8 @@
 lose
-(isDrawerOpen, wasDrawerOpen)
 ) %7B%0A

Fix drawer closing behavior