Fixes for RNN >= 3.XX

fix: 'transparent' is now automatically applied to the overlay. Fixes #19
fix: `useNativeDriver` is set to `false`. Fixes #20

Author: Luke Brandon Farrell

.gitignore

@@ -1,2 +1,3 @@
 .idea
-node_modules
+node_modules
+.DS_Store

README.md

@@ -2,6 +2,8 @@
 
 [React Native Navigation by Wix](https://wix.github.io/react-native-navigation/#/) does not offer an in-built solution for displaying a drawer on iOS. Their current side-menu has limited functionality on both iOS and Android. This is a drawer solution using showOverlay under the hood to display a drawer on iOS and Android.
 
+If you are using React Native Navigation >= 3.0.0 then use version 3.x.x + of this library.
+
 <p align="left">
   <a href="https://www.npmjs.com/package/react-native-navigation-drawer-extension" rel="nofollow">
   <img src="https://img.shields.io/npm/v/react-native-navigation-drawer-extension.svg?style=flat-square" alt="version" style="max-width:100%;" />

lib/RNNDrawer.d.ts

@@ -9,9 +9,9 @@ declare class RNNDrawer {
     /**
      * Shows a drawer component
      *
-     * @param options
+     * @param layout
      */
-    static showDrawer(options: Layout): void;
+    static showDrawer(layout: Layout): void;
     /**
      * Dismiss the drawer component
      */

lib/RNNDrawer.js

@@ -117,11 +117,13 @@ var RNNDrawer = /** @class */ (function () {
                 this.animatedDrawer = react_native_1.Animated.timing(this.state.sideMenuOpenValue, {
                     toValue: this.drawerOpenedValues[direction],
                     duration: this.props.animationOpenTime,
+                    useNativeDriver: false
                 });
                 // Animate outside side menu opacity
                 this.animatedOpacity = react_native_1.Animated.timing(this.state.sideMenuOverlayOpacity, {
                     toValue: fadeOpacity,
                     duration: this.props.animationOpenTime,
+                    useNativeDriver: false
                 });
             };
             /**
@@ -288,6 +290,7 @@ var RNNDrawer = /** @class */ (function () {
                 react_native_1.Animated.timing(this.state.sideMenuOpenValue, {
                     toValue: closeValues[direction],
                     duration: this.props.animationCloseTime,
+                    useNativeDriver: false
                 }).start(function () {
                     react_native_navigation_1.Navigation.dismissOverlay(_this.props.componentId);
                     _this.setState({ sideMenuIsDismissing: false });
@@ -296,6 +299,7 @@ var RNNDrawer = /** @class */ (function () {
                 react_native_1.Animated.timing(this.state.sideMenuOverlayOpacity, {
                     toValue: 0,
                     duration: this.props.animationCloseTime,
+                    useNativeDriver: false
                 }).start();
             };
             WrappedDrawer.defaultProps = {
@@ -314,10 +318,19 @@ var RNNDrawer = /** @class */ (function () {
     /**
      * Shows a drawer component
      *
-     * @param options
+     * @param layout
      */
-    RNNDrawer.showDrawer = function (options) {
-        react_native_navigation_1.Navigation.showOverlay(options);
+    RNNDrawer.showDrawer = function (layout) {
+        var _a, _b, _c, _d, _e;
+        // By default for this library, we make the 'componentBackgroundColor' transparent
+        var componentBackgroundColor = (_d = (_c = (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.componentBackgroundColor) !== null && _d !== void 0 ? _d : "transparent";
+        var options = __assign(__assign({}, (_e = layout === null || layout === void 0 ? void 0 : layout.component) === null || _e === void 0 ? void 0 : _e.options), { layout: {
+                componentBackgroundColor: componentBackgroundColor
+            } });
+        // Mutate options to add 'transparent' by default
+        // @ts-ignore
+        layout.component.options = __assign({}, options);
+        react_native_navigation_1.Navigation.showOverlay(layout);
     };
     /**
      * Dismiss the drawer component

lib/SideMenuView.js

@@ -77,7 +77,7 @@ var SideMenuView = /** @class */ (function (_super) {
             onShouldBlockNativeResponder: function (_evt, _gestureState) { return false; },
         };
         // LEFT PAN RESPONDER
-        _this._leftPanResponder = react_native_1.PanResponder.create(__assign({}, _this._panResponderMethods, { onPanResponderMove: function (_evt, gestureState) {
+        _this._leftPanResponder = react_native_1.PanResponder.create(__assign(__assign({}, _this._panResponderMethods), { onPanResponderMove: function (_evt, gestureState) {
                 var moveX = gestureState.moveX, vx = gestureState.vx;
                 // Emit this event on movement
                 events_1.dispatch('SWIPE_MOVE', { value: moveX, direction: 'left' });
@@ -90,7 +90,7 @@ var SideMenuView = /** @class */ (function (_super) {
                 }
             } }));
         // RIGHT PAN RESPONDER
-        _this._rightPanResponder = react_native_1.PanResponder.create(__assign({}, _this._panResponderMethods, { onPanResponderMove: function (_evt, gestureState) {
+        _this._rightPanResponder = react_native_1.PanResponder.create(__assign(__assign({}, _this._panResponderMethods), { onPanResponderMove: function (_evt, gestureState) {
                 var moveX = gestureState.moveX, vx = gestureState.vx;
                 // Emit this event on movement
                 events_1.dispatch('SWIPE_MOVE', { value: moveX, direction: 'right' });

package.json

@@ -31,7 +31,7 @@
     "typescript"
   ],
   "peerDependencies": {
-    "react-native-navigation": "2.x"
+    "react-native-navigation": ">= 3.x"
   },
   "author": "Luke Brandon Farrell",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "prettier": "1.18.2",
     "react": "^16.9.0",
     "react-native": "^0.60.4",
-    "react-native-navigation": "^2.26.5",
-    "typescript": "^3.5.3"
+    "react-native-navigation": "^6.4.0",
+    "typescript": "^3.8.3"
   }
 }

src/RNNDrawer.tsx

@@ -190,6 +190,7 @@ class RNNDrawer {
         this.animatedDrawer = Animated.timing(this.state.sideMenuOpenValue, {
           toValue: this.drawerOpenedValues[direction],
           duration: this.props.animationOpenTime,
+          useNativeDriver: false
         });
 
         // Animate outside side menu opacity
@@ -198,6 +199,7 @@ class RNNDrawer {
           {
             toValue: fadeOpacity,
             duration: this.props.animationOpenTime,
+            useNativeDriver: false
           },
         );
       }
@@ -408,6 +410,7 @@ class RNNDrawer {
         Animated.timing(this.state.sideMenuOpenValue, {
           toValue: closeValues[direction],
           duration: this.props.animationCloseTime,
+          useNativeDriver: false
         }).start(() => {
           Navigation.dismissOverlay(this.props.componentId);
           this.setState({ sideMenuIsDismissing: false });
@@ -417,6 +420,7 @@ class RNNDrawer {
         Animated.timing(this.state.sideMenuOverlayOpacity, {
           toValue: 0,
           duration: this.props.animationCloseTime,
+          useNativeDriver: false
         }).start();
       }
     }
@@ -427,10 +431,23 @@ class RNNDrawer {
   /**
    * Shows a drawer component
    *
-   * @param options
+   * @param layout
    */
-  static showDrawer(options: Layout) {
-    Navigation.showOverlay(options);
+  static showDrawer(layout: Layout) {
+    // By default for this library, we make the 'componentBackgroundColor' transparent
+    const componentBackgroundColor = layout?.component?.options?.layout?.componentBackgroundColor ?? "transparent";
+    const options = {
+      ...layout?.component?.options,
+      layout: { 
+        componentBackgroundColor: componentBackgroundColor
+      }
+    };
+
+    // Mutate options to add 'transparent' by default
+    // @ts-ignore
+    layout.component.options = { ...options };
+
+    Navigation.showOverlay(layout);
   }
 
   /**

src/events.ts

@@ -3,11 +3,6 @@
  * @description Event dispatcher for comunication between components.
  */
 
-interface EventInterface {
-  count: number;
-  funcs: any;
-}
-
 interface EvnetsInterface {
   [key: string]: any;
 }