Use react-native-gesture-handler/DrawerLayout

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 {

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",

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;

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;
+  });
+})

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": {

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

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 = {}) => {

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}

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"