Merge pull request #37 from aspect-apps/deniseng/ch1987/improve-api-of-rnn-drawer

Luke Brandon Farrell · web-flow · commit 111e74a0beaf · 2021-01-11T09:16:24.000Z
Improve API of SideMenuView
diff --git a/README.md b/README.md
@@ -114,14 +114,24 @@ import { SideMenuView } from "react-native-navigation-drawer-extension";
 
 <SideMenuView
   style={{ flex: 1 }}
-  right={() => RNNDrawer.showDrawer({
-    component: {
-      name: "CustomDrawer",
-      passProps: {
-       direction: "right"
-      }
+  drawerName={'CustomDrawer'}
+  direction={'right'}
+  passProps={{
+    animationOpenTime: 300,
+    animationCloseTime: 300,
+    dismissWhenTouchOutside: true,
+    fadeOpacity: 0.6,
+    drawerScreenWidth: '75%',
+    drawerScreenHeight: '100%',
+    parentComponentId: props.componentId,
+    style: {
+      backgroundColor: 'white', 
+    },
+  }}
+  options={{
+    layout: {
+      componentBackgroundColor: 'transparent',
     }
-  })}
  >
   {...}
  </SideMenuView>
@@ -132,8 +142,11 @@ import { SideMenuView } from "react-native-navigation-drawer-extension";
 
 | Prop                | Type          | Optional  | Default | Description                                                                             |
 | ------------------- | ------------- | --------- | ------- | --------------------------------------------------------------------------------------- |
-| left                | func          | Yes       |         | Function which is executed when the left gutter is swiped.                              |
-| right               | func          | Yes       |         | Function which is executed when the right gutter is swiped.                             |
+| style               | StyleProp<ViewStyle> | Yes |        | The style of the drawer container.                              |
+| drawerName          | string        | No        |         | The name of the drawer component.
+| direction           | string        | Yes       | left    | The direction to open the drawer, one of: ["left", "right"].
+| passProps           | object        | Yes       |         | The values passed to the drawer. See props in RNNDrawer above.
+| options             | Options       | Yes       |         | The options to configure properties of the React Native Navigation native screen. Refer to React Native Navigation's options object.
 | swipeSensitivity    | number        | Yes       | 0.2     | The sensitivity of the swipe to invoke each function.                                   |
 | sideMargin          | number        | Yes       | 15      | The size of the gutter for both sides.                                                  |
 | sideMarginLeft      | number        | Yes       |         | The size of the gutter for the left side.                                               |
diff --git a/example/src/pages/AnotherPage.js b/example/src/pages/AnotherPage.js
@@ -1,26 +1,18 @@
 import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-import {
-  RNNDrawer,
-  SideMenuView,
-} from 'react-native-navigation-drawer-extension';
+import { StyleSheet, Text } from 'react-native';
+import { SideMenuView } from 'react-native-navigation-drawer-extension';
 
 const AnotherPage = (props) => {
   console.log(props);
   return (
     <SideMenuView
       style={styles.mainContainer}
-      right={() =>
-        RNNDrawer.showDrawer({
-          component: {
-            name: 'CustomDrawer',
-            passProps: {
-              direction: 'right',
-              parentComponentId: props.componentId,
-            },
-          },
-        })
-      }>
+      drawerName={'CustomDrawer'}
+      direction={'right'}
+      passProps={{
+        parentComponentId: props.componentId,
+      }}
+    >
       <Text style={styles.bodyText}>
         In this page, you can try the SideMenuView component, by simply swiping
         from the right to the left.
diff --git a/example/src/pages/HomePage.js b/example/src/pages/HomePage.js
@@ -6,38 +6,60 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { RNNDrawer, SideMenuView } from 'react-native-navigation-drawer-extension';
+import {
+  RNNDrawer,
+  SideMenuView,
+} from 'react-native-navigation-drawer-extension';
 
 const HomePage = (props) => {
   const onPress = () => {
     RNNDrawer.showDrawer({
       component: {
         name: 'CustomDrawer',
         passProps: {
+          animationOpenTime: 300,
+          animationCloseTime: 300,
           direction: 'left',
           dismissWhenTouchOutside: true,
           fadeOpacity: 0.6,
           drawerScreenWidth: '75%' || 445,
           drawerScreenHeight: '100%' || 700,
           parentComponentId: props.componentId,
+          style: {
+            backgroundColor: 'white',
+          },
+        },
+        options: {
+          layout: {
+            componentBackgroundColor: 'black',
+          },
         },
       },
     });
   };
 
   return (
     <SideMenuView
-      style={{ flex: 1 }}
-      left={() => RNNDrawer.showDrawer({
-        component: {
-          name: 'CustomDrawer',
-          passProps: {
-            direction: 'left',
-            parentComponentId: props.componentId,
-          },
+      style={{ flex: 1 }} // Styles the view
+      drawerName={'CustomDrawer'}
+      direction={'left'}
+      passProps={{
+        animationOpenTime: 300,
+        animationCloseTime: 300,
+        dismissWhenTouchOutside: true,
+        fadeOpacity: 0.6,
+        drawerScreenWidth: '75%' || 445,
+        drawerScreenHeight: '100%' || 700,
+        parentComponentId: props.componentId,
+        style: {
+          backgroundColor: 'white', // Styles the drawer container
+        },
+      }}
+      options={{
+        layout: {
+          componentBackgroundColor: 'transparent',
         },
-      }
-      )}
+      }}
     >
       <SafeAreaView>
         <View style={styles.mainContainer}>
diff --git a/src/SideMenuView.tsx b/src/SideMenuView.tsx
@@ -17,21 +17,24 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
+import { Options } from 'react-native-navigation';
+
 /* Utils - Project Utilities */
+import RNNDrawer from './RNNDrawer';
 import { listen, dispatch } from './events';
 
 const screenHeight: number = Dimensions.get('screen').height;
 
-type SwipeFunctionType = () => void;
-
 interface IProps {
   swipeSensitivity?: number;
-  left?: SwipeFunctionType;
-  right?: SwipeFunctionType;
   sideMargin?: number;
   sideMarginLeft?: number;
   sideMarginRight?: number;
   style?: StyleProp<ViewStyle>;
+  drawerName: string;
+  direction: 'left' | 'right';
+  passProps?: object;
+  options?: Options;
 }
 
 class SideMenuView extends React.Component<IProps, {}> {
@@ -44,6 +47,7 @@ class SideMenuView extends React.Component<IProps, {}> {
   static defaultProps = {
     sideMargin: 15,
     swipeSensitivity: 0.2,
+    direction: 'left',
   };
 
   /**
@@ -58,8 +62,14 @@ class SideMenuView extends React.Component<IProps, {}> {
 
     this.isOpened = false;
 
-    const { swipeSensitivity, left, right } = props;
-
+    const {
+      swipeSensitivity,
+      drawerName,
+      direction,
+      passProps,
+      options,
+    } = props;
+    const directionIsLeft = direction ? direction == 'left' : true;
     this._panResponderMethods = {
       // Ask to be the responder:
       onStartShouldSetPanResponder: (
@@ -117,9 +127,18 @@ class SideMenuView extends React.Component<IProps, {}> {
 
         // Left Swipe
         if (typeof swipeSensitivity !== 'undefined') {
-          if (vx > swipeSensitivity && !this.isOpened && left) {
+          if (vx > swipeSensitivity && !this.isOpened && directionIsLeft) {
             this.isOpened = true;
-            left();
+            RNNDrawer.showDrawer({
+              component: {
+                name: drawerName,
+                passProps: {
+                  direction: 'left',
+                  ...passProps,
+                },
+                options: { ...options },
+              },
+            });
           }
         }
       },
@@ -139,9 +158,18 @@ class SideMenuView extends React.Component<IProps, {}> {
 
         // Right Swipe
         if (typeof swipeSensitivity !== 'undefined') {
-          if (vx > -swipeSensitivity && !this.isOpened && right) {
+          if (vx > -swipeSensitivity && !this.isOpened && !directionIsLeft) {
             this.isOpened = true;
-            right();
+            RNNDrawer.showDrawer({
+              component: {
+                name: drawerName,
+                passProps: {
+                  direction: 'right',
+                  ...passProps,
+                },
+                options: { ...options },
+              },
+            });
           }
         }
       },
@@ -186,19 +214,19 @@ class SideMenuView extends React.Component<IProps, {}> {
     /** Props */
     const {
       children,
-      left,
-      right,
+      direction,
       sideMargin,
       sideMarginLeft,
       sideMarginRight,
       ...props
     } = this.props;
 
+    const directionIsLeft = direction ? direction == 'left' : true;
     return (
       <View {...props}>
         {children}
 
-        {left ? (
+        {directionIsLeft ? (
           <View
             style={{
               left: 0,
@@ -209,9 +237,7 @@ class SideMenuView extends React.Component<IProps, {}> {
             }}
             {...this._leftPanResponder.panHandlers}
           />
-        ) : null}
-
-        {right ? (
+        ) : (
           <View
             style={{
               position: 'absolute',
@@ -222,7 +248,7 @@ class SideMenuView extends React.Component<IProps, {}> {
             }}
             {...this._rightPanResponder.panHandlers}
           />
-        ) : null}
+        )}
       </View>
     );
   }
