From c45a0411e18693323f39142db044cccf12a92cac Mon Sep 17 00:00:00 2001
From: Brett Higgins <brett.higgins@gmail.com>
Date: Thu, 7 Jun 2018 10:14:29 -0400
Subject: [PATCH] Use react-native-gesture-handler/DrawerLayout

---
 packages/drawer/example/App.js                |  2 +
 packages/drawer/example/package.json          |  4 +-
 packages/drawer/example/src/StyledDrawer.js   | 96 +++++++++++++++++++
 packages/drawer/jest-setup.js                 | 28 ++++--
 packages/drawer/package.json                  |  2 +
 .../createDrawerNavigator-test.js.snap        |  5 +
 .../src/navigators/createDrawerNavigator.js   |  4 +
 packages/drawer/src/views/DrawerView.js       |  8 +-
 packages/drawer/yarn.lock                     |  8 ++
 9 files changed, 144 insertions(+), 13 deletions(-)
 create mode 100644 packages/drawer/example/src/StyledDrawer.js

diff --git a/packages/drawer/example/App.js b/packages/drawer/example/App.js
index f56adb9d..119f45ab 100644
--- a/packages/drawer/example/App.js
+++ b/packages/drawer/example/App.js
@@ -4,9 +4,11 @@ import { FlatList } from 'react-native';
 import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
 import { ListSection, Divider } from 'react-native-paper';
 import SimpleDrawer from './src/SimpleDrawer';
+import StyledDrawer from './src/StyledDrawer';
 
 const data = [
   { component: SimpleDrawer, title: 'Simple', routeName: 'SimpleDrawer' },
+  { component: StyledDrawer, title: 'Styled', routeName: 'StyledDrawer' },
 ];
 
 class Home extends React.Component {
diff --git a/packages/drawer/example/package.json b/packages/drawer/example/package.json
index 490c5843..3f71b574 100644
--- a/packages/drawer/example/package.json
+++ b/packages/drawer/example/package.json
@@ -13,8 +13,8 @@
     "prop-types": "^15.6.0",
     "react": "16.3.1",
     "react-native": "~0.55.0",
-    "react-navigation": "^2.0.1",
-    "react-native-paper": "2.0.0-alpha.4"
+    "react-native-paper": "2.0.0-alpha.4",
+    "react-navigation": "^2.0.1"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.0.0",
diff --git a/packages/drawer/example/src/StyledDrawer.js b/packages/drawer/example/src/StyledDrawer.js
new file mode 100644
index 00000000..98c06eb0
--- /dev/null
+++ b/packages/drawer/example/src/StyledDrawer.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Button, ScrollView, StatusBar, Text } from 'react-native';
+import { createStackNavigator, SafeAreaView } from 'react-navigation';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { createDrawerNavigator } from 'react-navigation-drawer';
+
+const SampleText = ({ children }) => <Text>{children}</Text>;
+
+const MyNavScreen = ({ navigation, banner }) => (
+  <ScrollView>
+    <SafeAreaView forceInset={{ top: 'always' }}>
+      <SampleText>{banner}</SampleText>
+      <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
+      <Button
+        onPress={() => navigation.navigate('Email')}
+        title="Open other screen"
+      />
+      <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    </SafeAreaView>
+    <StatusBar barStyle="default" />
+  </ScrollView>
+);
+
+const InboxScreen = ({ navigation }) => (
+  <MyNavScreen banner={'Inbox Screen'} navigation={navigation} />
+);
+InboxScreen.navigationOptions = {
+  headerTitle: 'Inbox',
+};
+
+const EmailScreen = ({ navigation }) => (
+  <MyNavScreen banner={'Email Screen'} navigation={navigation} />
+);
+
+const DraftsScreen = ({ navigation }) => (
+  <MyNavScreen banner={'Drafts Screen'} navigation={navigation} />
+);
+DraftsScreen.navigationOptions = {
+  headerTitle: 'Drafts',
+};
+
+const InboxStack = createStackNavigator({
+  Inbox: { screen: InboxScreen },
+  Email: { screen: EmailScreen },
+});
+
+InboxStack.navigationOptions = {
+  drawerLabel: 'Inbox',
+  drawerIcon: ({ tintColor }) => (
+    <MaterialIcons
+      name="move-to-inbox"
+      size={24}
+      style={{ color: tintColor }}
+    />
+  ),
+};
+
+const DraftsStack = createStackNavigator({
+  Drafts: { screen: DraftsScreen },
+  Email: { screen: EmailScreen },
+});
+
+DraftsStack.navigationOptions = {
+  drawerLabel: 'Drafts',
+  drawerIcon: ({ tintColor }) => (
+    <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
+  ),
+};
+
+const DrawerExample = createDrawerNavigator(
+  {
+    Inbox: {
+      path: '/',
+      screen: InboxStack,
+    },
+    Drafts: {
+      path: '/sent',
+      screen: DraftsStack,
+    },
+  },
+  {
+    initialRouteName: 'Drafts',
+    contentOptions: {
+      activeTintColor: '#e91e63',
+    },
+    drawerType: 'back',
+    overlayColor: '#00000000',
+    hideStatusBar: true,
+  }
+);
+
+DrawerExample.navigationOptions = {
+  header: null,
+};
+
+export default DrawerExample;
diff --git a/packages/drawer/jest-setup.js b/packages/drawer/jest-setup.js
index da8800ef..5c38bf63 100644
--- a/packages/drawer/jest-setup.js
+++ b/packages/drawer/jest-setup.js
@@ -6,13 +6,21 @@
 
 import React from 'react';
 
-jest.mock('react-native-drawer-layout-polyfill', () => {
-  const View = require.requireActual('View');
-  class DrawerLayout extends View {
-    static positions = {
-      Left: 'left',
-      Right: 'right',
-    };
-  }
-  return DrawerLayout;
-});
+[
+  'react-native-drawer-layout-polyfill',
+
+  // tests don't test the native bits, so just substitute the same
+  // fake polyfill for now
+  'react-native-gesture-handler/DrawerLayout',
+].forEach(module => {
+  jest.mock(module, () => {
+    const View = require.requireActual('View');
+    class DrawerLayout extends View {
+      static positions = {
+        Left: 'left',
+        Right: 'right',
+      };
+    }
+    return DrawerLayout;
+  });
+})
diff --git a/packages/drawer/package.json b/packages/drawer/package.json
index 0e662905..c9d9298a 100644
--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -54,12 +54,14 @@
     "react": "16.3.1",
     "react-dom": "16.3.1",
     "react-native": "~0.55.4",
+    "react-native-gesture-handler": "^1.0.4",
     "react-navigation": "^2.1.0",
     "react-test-renderer": "16.3.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": "^1.0.0-alpha.41 || >=1.0.0",
     "react-navigation": ">=2.0 || ^2.0.0-beta"
   },
   "jest": {
diff --git a/packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap b/packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap
index 71224f5a..9a38fdaf 100644
--- a/packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap
+++ b/packages/drawer/src/navigators/__tests__/__snapshots__/createDrawerNavigator-test.js.snap
@@ -5,10 +5,15 @@ exports[`createDrawerNavigator renders successfully 1`] = `
   drawerBackgroundColor="white"
   drawerLockMode={undefined}
   drawerPosition="left"
+  drawerType="front"
   drawerWidth={320}
+  edgeWidth={undefined}
+  hideStatusBar={false}
   onDrawerClose={[Function]}
   onDrawerOpen={[Function]}
+  overlayColor="black"
   renderNavigationView={[Function]}
+  statusBarAnimation="slide"
   useNativeAnimations={true}
 >
   <View
diff --git a/packages/drawer/src/navigators/createDrawerNavigator.js b/packages/drawer/src/navigators/createDrawerNavigator.js
index 9fc76054..037cf685 100644
--- a/packages/drawer/src/navigators/createDrawerNavigator.js
+++ b/packages/drawer/src/navigators/createDrawerNavigator.js
@@ -41,6 +41,10 @@ const DefaultDrawerConfig = {
   drawerPosition: 'left',
   drawerBackgroundColor: 'white',
   useNativeAnimations: true,
+  drawerType: 'front',
+  hideStatusBar: false,
+  statusBarAnimation: 'slide',
+  overlayColor: 'black',
 };
 
 const DrawerNavigator = (routeConfigs, config = {}) => {
diff --git a/packages/drawer/src/views/DrawerView.js b/packages/drawer/src/views/DrawerView.js
index 96342282..2d1c5088 100644
--- a/packages/drawer/src/views/DrawerView.js
+++ b/packages/drawer/src/views/DrawerView.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dimensions } from 'react-native';
-import DrawerLayout from 'react-native-drawer-layout-polyfill';
 import { SceneView } from 'react-navigation';
+import { DrawerLayout } from 'react-native-gesture-handler';
 
 import DrawerSidebar from './DrawerSidebar';
 import DrawerActions from '../routers/DrawerActions';
@@ -121,6 +121,12 @@ export default class DrawerView extends React.PureComponent {
             ? DrawerLayout.positions.Right
             : DrawerLayout.positions.Left
         }
+        /* props specific to react-native-gesture-handler/DrawerLayout */
+        drawerType={this.props.navigationConfig.drawerType}
+        edgeWidth={this.props.navigationConfig.edgeWidth}
+        hideStatusBar={this.props.navigationConfig.hideStatusBar}
+        statusBarAnimation={this.props.navigationConfig.statusBarAnimation}
+        overlayColor={this.props.navigationConfig.overlayColor}
       >
         <SceneView
           navigation={descriptor.navigation}
diff --git a/packages/drawer/yarn.lock b/packages/drawer/yarn.lock
index 427b0904..8fb376b0 100644
--- a/packages/drawer/yarn.lock
+++ b/packages/drawer/yarn.lock
@@ -4882,6 +4882,14 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
+react-native-gesture-handler@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.0.4.tgz#1cc13eeffe34dcd6fe4f415c05b08823de9c7584"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+    invariant "^2.2.2"
+    prop-types "^15.5.10"
+
 react-native-safe-area-view@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"