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 }) => {children};
+
+const MyNavScreen = ({ navigation, banner }) => (
+
+
+ {banner}
+
+
+
+);
+
+const InboxScreen = ({ navigation }) => (
+
+);
+InboxScreen.navigationOptions = {
+ headerTitle: 'Inbox',
+};
+
+const EmailScreen = ({ navigation }) => (
+
+);
+
+const DraftsScreen = ({ navigation }) => (
+
+);
+DraftsScreen.navigationOptions = {
+ headerTitle: 'Drafts',
+};
+
+const InboxStack = createStackNavigator({
+ Inbox: { screen: InboxScreen },
+ Email: { screen: EmailScreen },
+});
+
+InboxStack.navigationOptions = {
+ drawerLabel: 'Inbox',
+ drawerIcon: ({ tintColor }) => (
+
+ ),
+};
+
+const DraftsStack = createStackNavigator({
+ Drafts: { screen: DraftsScreen },
+ Email: { screen: EmailScreen },
+});
+
+DraftsStack.navigationOptions = {
+ drawerLabel: 'Drafts',
+ drawerIcon: ({ 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}
>
{
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}
>