Close Keyboard on iOS/Android using Swipeable View

ios/Podfile.lock

@@ -696,4 +696,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 41b806c7f131f87b716be1f1f9377532d6c9e43a
 
-COCOAPODS: 1.10.0
+COCOAPODS: 1.10.0

src/components/SwipeableView/index.js

@@ -0,0 +1,3 @@
+export default ({children}) => children;
+
+// Swipeable View is available just on Android/iOS for now.

src/components/SwipeableView/index.native.js

@@ -0,0 +1,40 @@
+import React, {PureComponent} from 'react';
+import {PanResponder, View} from 'react-native';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    children: PropTypes.element.isRequired,
+
+    // Callback to fire when the user swipes down on the child content
+    onSwipeDown: PropTypes.func.isRequired,
+};
+
+class SwipeableView extends PureComponent {
+    constructor(props) {
+        super(props);
+
+        const minimumPixelDistance = 3;
+        this.panResponder = PanResponder.create({
+
+            // The PanResponder gets focus only when the y-axis movement is over minimumPixelDistance
+            onMoveShouldSetPanResponderCapture:
+            (_event, gestureState) => gestureState.dy > minimumPixelDistance,
+
+            // Calls the callback when the swipe down is released; after the completion of the gesture
+            onPanResponderRelease: this.props.onSwipeDown,
+        });
+    }
+
+    render() {
+        return (
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            <View {...this.panResponder.panHandlers}>
+                {this.props.children}
+            </View>
+        );
+    }
+}
+
+SwipeableView.propTypes = propTypes;
+SwipeableView.displayName = 'SwipeableView';
+export default SwipeableView;

src/components/TextInputFocusable/index.native.js

@@ -47,6 +47,7 @@ class TextInputFocusable extends React.Component {
             <TextInput
                 ref={el => this.textInput = el}
                 maxHeight={116}
+                rejectResponderTermination={false}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...this.props}
             />

src/pages/home/report/ReportView.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import PropTypes from 'prop-types';
 import ReportActionsView from './ReportActionsView';
 import ReportActionCompose from './ReportActionCompose';
 import {addAction} from '../../../libs/actions/Report';
 import KeyboardSpacer from '../../../components/KeyboardSpacer';
 import styles from '../../../styles/styles';
+import SwipeableView from '../../../components/SwipeableView';
 
 const propTypes = {
     // The ID of the report actions will be created for
@@ -25,10 +26,12 @@ class ReportView extends React.Component {
                 <ReportActionsView
                     reportID={this.props.reportID}
                 />
-                <ReportActionCompose
-                    onSubmit={text => addAction(this.props.reportID, text)}
-                    reportID={this.props.reportID}
-                />
+                <SwipeableView onSwipeDown={() => Keyboard.dismiss()}>
+                    <ReportActionCompose
+                        onSubmit={text => addAction(this.props.reportID, text)}
+                        reportID={this.props.reportID}
+                    />
+                </SwipeableView>
                 <KeyboardSpacer />
             </View>
         );