Merge pull request #35 from aspect-apps/feature/add-orientation-support

add orientation support

Author: rodriigovieira

lib/RNNDrawer.js

@@ -34,6 +34,7 @@ var react_native_1 = require("react-native");
 var react_native_navigation_1 = require("react-native-navigation");
 /* Utils - Project Utilities */
 var events_1 = require("./events");
+var MaxWidthOnLandscapeMode = 300;
 var DirectionType;
 (function (DirectionType) {
     DirectionType["left"] = "left";
@@ -76,7 +77,9 @@ var RNNDrawer = /** @class */ (function () {
                     return value;
                 };
                 /** Component Variables */
-                _this.drawerWidth = _resolveDrawerSize(props.drawerScreenWidth, _this.screenWidth);
+                _this.drawerWidth = _this.isLandscape()
+                    ? MaxWidthOnLandscapeMode
+                    : _resolveDrawerSize(props.drawerScreenWidth, _this.screenWidth);
                 _this.drawerHeight = _resolveDrawerSize(props.drawerScreenHeight, _this.screenHeight);
                 _this.drawerOpenedValues = {
                     left: 0,
@@ -96,15 +99,24 @@ var RNNDrawer = /** @class */ (function () {
                     sideMenuOverlayOpacity: new react_native_1.Animated.Value(0),
                     sideMenuSwipingStarted: false,
                     sideMenuIsDismissing: false,
+                    screenHeight: _this.screenHeight,
                 };
                 /** Component Bindings */
                 _this.touchedOutside = _this.touchedOutside.bind(_this);
                 _this.dismissDrawerWithAnimation = _this.dismissDrawerWithAnimation.bind(_this);
                 _this.registerListeners = _this.registerListeners.bind(_this);
                 _this.removeListeners = _this.removeListeners.bind(_this);
+                _this.isLandscape = _this.isLandscape.bind(_this);
                 react_native_navigation_1.Navigation.events().bindComponent(_this);
                 return _this;
             }
+            /**
+             * Check if device is in landscape mode
+             */
+            WrappedDrawer.prototype.isLandscape = function () {
+                var dim = react_native_1.Dimensions.get('window');
+                return dim.height <= dim.width;
+            };
             /**
              * [ Built-in React method. ]
              *
@@ -155,6 +167,18 @@ var RNNDrawer = /** @class */ (function () {
                 var _this = this;
                 /** Props */
                 var _a = this.props, direction = _a.direction, fadeOpacity = _a.fadeOpacity;
+                // Adapt the drawer's size on orientation change
+                react_native_1.Dimensions.addEventListener("change", function (_a) {
+                    var window = _a.window;
+                    var screenHeight = window.height;
+                    _this.setState({ screenHeight: screenHeight });
+                    // Apply correct position if opened from right
+                    if (_this.props.direction === "right") {
+                        // Calculates the position of the drawer from the left side of the screen
+                        var alignedMovementValue = window.width - _this.drawerWidth;
+                        _this.state.sideMenuOpenValue.setValue(alignedMovementValue);
+                    }
+                });
                 // Executes when the side of the screen interaction starts
                 this.unsubscribeSwipeStart = events_1.listen('SWIPE_START', function () {
                     _this.setState({
@@ -226,6 +250,7 @@ var RNNDrawer = /** @class */ (function () {
              * Removes all the listenrs from this component
              */
             WrappedDrawer.prototype.removeListeners = function () {
+                react_native_1.Dimensions.removeEventListener("change", function () { });
                 if (this.unsubscribeSwipeStart)
                     this.unsubscribeSwipeStart();
                 if (this.unsubscribeSwipeMove)
@@ -260,7 +285,7 @@ var RNNDrawer = /** @class */ (function () {
                     React.createElement(react_native_1.Animated.View, { style: [
                             { backgroundColor: '#FFF' },
                             style,
-                            __assign({ height: this.drawerHeight, width: this.drawerWidth }, animatedValue),
+                            __assign({ height: this.state.screenHeight, width: this.drawerWidth }, animatedValue),
                         ] },
                         React.createElement(Component, __assign({}, this.props)))));
             };

src/RNNDrawer.tsx

@@ -18,6 +18,8 @@ import { Navigation, Layout } from 'react-native-navigation';
 /* Utils - Project Utilities */
 import { listen, dispatch } from './events';
 
+const MaxWidthOnLandscapeMode = 300;
+
 enum DirectionType {
   left = 'left',
   right = 'right',
@@ -30,6 +32,7 @@ interface IState {
   sideMenuOverlayOpacity: any;
   sideMenuSwipingStarted: boolean;
   sideMenuIsDismissing: boolean;
+  screenHeight: number;
 }
 
 interface IProps {
@@ -136,10 +139,12 @@ class RNNDrawer {
         };
 
         /** Component Variables */
-        this.drawerWidth = _resolveDrawerSize(
-          props.drawerScreenWidth,
-          this.screenWidth,
-        );
+        this.drawerWidth = this.isLandscape()
+          ? MaxWidthOnLandscapeMode
+          : _resolveDrawerSize(
+            props.drawerScreenWidth,
+            this.screenWidth,
+          );
         this.drawerHeight = _resolveDrawerSize(
           props.drawerScreenHeight,
           this.screenHeight,
@@ -165,6 +170,7 @@ class RNNDrawer {
           sideMenuOverlayOpacity: new Animated.Value(0),
           sideMenuSwipingStarted: false,
           sideMenuIsDismissing: false,
+          screenHeight: this.screenHeight,
         };
 
         /** Component Bindings */
@@ -174,9 +180,19 @@ class RNNDrawer {
         );
         this.registerListeners = this.registerListeners.bind(this);
         this.removeListeners = this.removeListeners.bind(this);
+        this.isLandscape = this.isLandscape.bind(this);
         Navigation.events().bindComponent(this);
       }
 
+      /**
+       * Check if device is in landscape mode
+       */
+      isLandscape() {
+        const dim = Dimensions.get('window');
+
+        return dim.height <= dim.width;
+      }
+
       /**
        * [ Built-in React method. ]
        *
@@ -237,6 +253,21 @@ class RNNDrawer {
         /** Props */
         const { direction, fadeOpacity } = this.props;
 
+        // Adapt the drawer's size on orientation change
+        Dimensions.addEventListener("change", ({ window }) => {
+          const screenHeight = window.height;
+
+          this.setState({ screenHeight });
+
+          // Apply correct position if opened from right
+          if (this.props.direction === "right") {
+            // Calculates the position of the drawer from the left side of the screen
+            const alignedMovementValue = window.width - this.drawerWidth;
+            
+            this.state.sideMenuOpenValue.setValue(alignedMovementValue);
+          }
+        })
+
         // Executes when the side of the screen interaction starts
         this.unsubscribeSwipeStart = listen('SWIPE_START', () => {
           this.setState({
@@ -331,6 +362,7 @@ class RNNDrawer {
        * Removes all the listenrs from this component
        */
       removeListeners() {
+        Dimensions.removeEventListener("change", () => { });
         if (this.unsubscribeSwipeStart) this.unsubscribeSwipeStart();
         if (this.unsubscribeSwipeMove) this.unsubscribeSwipeMove();
         if (this.unsubscribeSwipeEnd) this.unsubscribeSwipeEnd();
@@ -370,7 +402,7 @@ class RNNDrawer {
                 { backgroundColor: '#FFF' },
                 style,
                 {
-                  height: this.drawerHeight,
+                  height: this.state.screenHeight,
                   width: this.drawerWidth,
                   ...animatedValue,
                 },