Merge pull request #3733 from parasharrajat/swipekeyboard

Fixed swipe on composer
Expensify · Jun 24, 2021 · 11476f7 · 11476f7
2 parents cef11b7 + 38e1566
commit 11476f7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/src/CONST.js b/src/CONST.js
diff --git a/src/components/SwipeableView/index.native.js b/src/components/SwipeableView/index.native.js
@@ -1,6 +1,7 @@
 import React, {PureComponent} from 'react';
 import {PanResponder, View} from 'react-native';
 import PropTypes from 'prop-types';
+import CONST from '../../CONST';
 
 const propTypes = {
     children: PropTypes.element.isRequired,
@@ -13,12 +14,19 @@ class SwipeableView extends PureComponent {
     constructor(props) {
         super(props);
 
-        const minimumPixelDistance = 3;
+        const minimumPixelDistance = CONST.COMPOSER_MAX_HEIGHT;
+        this.oldY = 0;
         this.panResponder = PanResponder.create({
 
             // The PanResponder gets focus only when the y-axis movement is over minimumPixelDistance
+            // & swip direction is downwards
             onMoveShouldSetPanResponderCapture:
-            (_event, gestureState) => gestureState.dy > minimumPixelDistance,
+            (_event, gestureState) => {
+                if ((gestureState.dy - this.oldY) > 0 && gestureState.dy > minimumPixelDistance) {
+                    return true;
+                }
+                this.oldY = gestureState.dy;
+            },
 
             // Calls the callback when the swipe down is released; after the completion of the gesture
             onPanResponderRelease: this.props.onSwipeDown,

diff --git a/src/components/TextInputFocusable/index.android.js b/src/components/TextInputFocusable/index.android.js
@@ -3,6 +3,7 @@ import {TextInput} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import themeColors from '../../styles/themes/default';
+import CONST from '../../CONST';
 
 /**
  * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
@@ -61,7 +62,7 @@ class TextInputFocusable extends React.Component {
             <TextInput
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
-                maxHeight={116}
+                maxHeight={CONST.COMPOSER_MAX_HEIGHT}
                 rejectResponderTermination={false}
                 editable={!this.props.isDisabled}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */

diff --git a/src/components/TextInputFocusable/index.ios.js b/src/components/TextInputFocusable/index.ios.js
@@ -3,6 +3,7 @@ import {TextInput} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import themeColors from '../../styles/themes/default';
+import CONST from '../../CONST';
 
 /**
  * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
@@ -73,7 +74,7 @@ class TextInputFocusable extends React.Component {
             <TextInput
                 placeholderTextColor={themeColors.placeholderText}
                 ref={el => this.textInput = el}
-                maxHeight={116}
+                maxHeight={CONST.COMPOSER_MAX_HEIGHT}
                 rejectResponderTermination={false}
                 editable={!this.props.isDisabled}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */