RN-428 Drawer panResponder offset (#1029)

* drawer panResponder offset

* Cleanup

* Update mattermost-redux

app/components/channel_drawer/channel_drawer.js

@@ -7,6 +7,7 @@ import {
     BackHandler,
     InteractionManager,
     Keyboard,
+    Platform,
     StyleSheet,
     View
 } from 'react-native';
@@ -401,6 +402,8 @@ export default class ChannelDrawer extends Component {
                 tweenDuration={100}
                 tweenHandler={this.handleDrawerTween}
                 elevation={-5}
+                bottomPanOffset={Platform.OS === 'ios' ? 46 : 64}
+                topPanOffset={Platform.OS === 'ios' ? 64 : 46}
                 styles={{
                     main: {
                         shadowColor: '#000000',

app/components/drawer.js

@@ -1,6 +1,7 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import {Keyboard, Dimensions} from 'react-native';
 import PropTypes from 'prop-types';
 import BaseDrawer from 'react-native-drawer';
 
@@ -8,20 +9,49 @@ import BaseDrawer from 'react-native-drawer';
 export default class Drawer extends BaseDrawer {
     static propTypes = {
         ...BaseDrawer.propTypes,
-        onRequestClose: PropTypes.func.isRequired
+        onRequestClose: PropTypes.func.isRequired,
+        bottomPanOffset: PropTypes.number,
+        topPanOffset: PropTypes.number
     };
 
-    // To fix the android onLayout issue give this a value of 100% as it does not need another one
+    constructor(props) {
+        super(props);
+
+        this.keyboardHeight = 0;
+    }
+
+    componentDidMount() {
+        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    }
+
+    componentWillUnmount() {
+        this.keyboardDidShowListener.remove();
+        this.keyboardDidHideListener.remove();
+    }
+
     getMainHeight = () => '100%';
 
+    keyboardDidShow = (e) => {
+        this.keyboardHeight = e.endCoordinates.height;
+    };
+
+    keyboardDidHide = () => {
+        this.keyboardHeight = 0;
+    };
+
+    isOpened = () => {
+        return this._open; //eslint-disable-line no-underscore-dangle
+    };
+
     processTapGestures = () => {
         // Note that we explicitly don't support tap to open or double tap because I didn't copy them over
 
-        if (this._activeTween) { // eslint-disable-line no-underscore-dangle
+        if (this._activeTween) { //eslint-disable-line no-underscore-dangle
             return false;
         }
 
-        if (this.props.tapToClose && this._open) { // eslint-disable-line no-underscore-dangle
+        if (this.props.tapToClose && this._open) { //eslint-disable-line no-underscore-dangle
             this.props.onRequestClose();
 
             return true;
@@ -30,7 +60,40 @@ export default class Drawer extends BaseDrawer {
         return false;
     };
 
-    isOpened = () => {
-        return this._open; // eslint-disable-line no-underscore-dangle
-    }
+    testPanResponderMask = (e) => {
+        if (this.props.disabled) {
+            return false;
+        }
+
+        // Disable if parent or child drawer exist and are open
+        if (this.context.drawer && this.context.drawer._open) { //eslint-disable-line no-underscore-dangle
+            return false;
+        }
+
+        if (this._childDrawer && this._childDrawer._open) { //eslint-disable-line no-underscore-dangle
+            return false;
+        }
+
+        const topPanOffset = this.props.topPanOffset || 0;
+        const bottomPanOffset = this.props.bottomPanOffset || 0;
+        const height = Dimensions.get('window').height;
+        if ((this.props.topPanOffset && e.nativeEvent.pageY < topPanOffset) ||
+            (this.props.bottomPanOffset && e.nativeEvent.pageY > (height - (bottomPanOffset + this.keyboardHeight)))) {
+            return false;
+        }
+
+        const pos0 = this.isLeftOrRightSide() ? e.nativeEvent.pageX : e.nativeEvent.pageY;
+        const deltaOpen = this.isLeftOrTopSide() ? this.getDeviceLength() - pos0 : pos0;
+        const deltaClose = this.isLeftOrTopSide() ? pos0 : this.getDeviceLength() - pos0;
+
+        if (this._open && deltaOpen > this.getOpenMask()) { //eslint-disable-line no-underscore-dangle
+            return false;
+        }
+
+        if (!this._open && deltaClose > this.getClosedMask()) { //eslint-disable-line no-underscore-dangle
+            return false;
+        }
+
+        return true;
+    };
 }

yarn.lock

@@ -3878,7 +3878,7 @@ makeerror@1.0.x:
 
 mattermost-redux@mattermost/mattermost-redux#master:
   version "0.0.1"
-  resolved "https://codeload.github.com/mattermost/mattermost-redux/tar.gz/1f64d99a0df42cf6513c12be6af965065eb1374f"
+  resolved "https://codeload.github.com/mattermost/mattermost-redux/tar.gz/18fa0a2dc2d0648d0346e01f71f096aa835096ac"
   dependencies:
     deep-equal "1.0.1"
     harmony-reflect "1.5.1"