From b32303f5b89ddcd70bbedb023bab9d4264f3a88c Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Tue, 11 Jul 2023 18:41:15 +0200
Subject: [PATCH 1/2] create PanHanlder to detect horizontal swipe and dismiss
 keyboard

---
 src/components/ScreenWrapper/index.js | 68 ++++++++++++++++-----------
 1 file changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index f5f0f2fadd41..fe8e5e593787 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -29,6 +29,17 @@ class ScreenWrapper extends React.Component {
             onPanResponderRelease: toggleTestToolsModal,
         });
 
+        this.keyboardDissmissPanResponder = PanResponder.create({
+            onMoveShouldSetPanResponderCapture: (e, gestureState) => {
+                const isHorizontalSwipe = Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+                if(isHorizontalSwipe && this.props.shouldDismissKeyboardBeforeClose) {
+                    return true;
+                }
+                return false;
+            },
+            onPanResponderGrant: Keyboard.dismiss,
+        });
+
         this.state = {
             didScreenTransitionEnd: false,
         };
@@ -96,35 +107,38 @@ class ScreenWrapper extends React.Component {
 
                     return (
                         <View
-                            style={[...this.props.style, styles.flex1, paddingStyle]}
-                            // eslint-disable-next-line react/jsx-props-no-spreading
-                            {...(this.props.environment === CONST.ENVIRONMENT.DEV ? this.panResponder.panHandlers : {})}
+                        style={styles.flex1}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...(this.props.environment === CONST.ENVIRONMENT.DEV ? {...this.panResponder.panHandlers} : undefined)}
                         >
-                            <KeyboardAvoidingView
-                                style={[styles.w100, styles.h100, {maxHeight}]}
-                                behavior={this.props.keyboardAvoidingViewBehavior}
-                                enabled={this.props.shouldEnableKeyboardAvoidingView}
-                            >
-                                <PickerAvoidingView
-                                    style={styles.flex1}
-                                    enabled={this.props.shouldEnablePickerAvoiding}
+                            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                            <View style={[...this.props.style, styles.flex1, paddingStyle]} {...this.keyboardDissmissPanResponder.panHandlers}>
+                                <KeyboardAvoidingView
+                                    style={[styles.w100, styles.h100, {maxHeight}]}
+                                    behavior={this.props.keyboardAvoidingViewBehavior}
+                                    enabled={this.props.shouldEnableKeyboardAvoidingView}
                                 >
-                                    <HeaderGap />
-                                    {this.props.environment === CONST.ENVIRONMENT.DEV && <TestToolsModal />}
-                                    {this.props.environment === CONST.ENVIRONMENT.DEV && <CustomDevMenu />}
-                                    {
-                                        // If props.children is a function, call it to provide the insets to the children.
-                                        _.isFunction(this.props.children)
-                                            ? this.props.children({
-                                                  insets,
-                                                  safeAreaPaddingBottomStyle,
-                                                  didScreenTransitionEnd: this.state.didScreenTransitionEnd,
-                                              })
-                                            : this.props.children
-                                    }
-                                    {this.props.isSmallScreenWidth && this.props.shouldShowOfflineIndicator && <OfflineIndicator />}
-                                </PickerAvoidingView>
-                            </KeyboardAvoidingView>
+                                    <PickerAvoidingView
+                                        style={styles.flex1}
+                                        enabled={this.props.shouldEnablePickerAvoiding}
+                                    >
+                                        <HeaderGap />
+                                        {this.props.environment === CONST.ENVIRONMENT.DEV && <TestToolsModal />}
+                                        {this.props.environment === CONST.ENVIRONMENT.DEV && <CustomDevMenu />}
+                                        {
+                                            // If props.children is a function, call it to provide the insets to the children.
+                                            _.isFunction(this.props.children)
+                                                ? this.props.children({
+                                                    insets,
+                                                    safeAreaPaddingBottomStyle,
+                                                    didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                                })
+                                                : this.props.children
+                                        }
+                                        {this.props.isSmallScreenWidth && this.props.shouldShowOfflineIndicator && <OfflineIndicator />}
+                                    </PickerAvoidingView>
+                                </KeyboardAvoidingView>
+                            </View>
                         </View>
                     );
                 }}

From 24eb5fce0f889af5d173a73f5b3af7e3bcef6ad9 Mon Sep 17 00:00:00 2001
From: Robert Kozik <robert.kozik@swmansion.com>
Date: Thu, 13 Jul 2023 00:14:58 +0200
Subject: [PATCH 2/2] prettier fix

---
 src/components/ScreenWrapper/index.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index fe8e5e593787..766de729586c 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -32,7 +32,7 @@ class ScreenWrapper extends React.Component {
         this.keyboardDissmissPanResponder = PanResponder.create({
             onMoveShouldSetPanResponderCapture: (e, gestureState) => {
                 const isHorizontalSwipe = Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
-                if(isHorizontalSwipe && this.props.shouldDismissKeyboardBeforeClose) {
+                if (isHorizontalSwipe && this.props.shouldDismissKeyboardBeforeClose) {
                     return true;
                 }
                 return false;
@@ -107,12 +107,15 @@ class ScreenWrapper extends React.Component {
 
                     return (
                         <View
-                        style={styles.flex1}
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...(this.props.environment === CONST.ENVIRONMENT.DEV ? {...this.panResponder.panHandlers} : undefined)}
+                            style={styles.flex1}
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...(this.props.environment === CONST.ENVIRONMENT.DEV ? {...this.panResponder.panHandlers} : undefined)}
                         >
-                            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-                            <View style={[...this.props.style, styles.flex1, paddingStyle]} {...this.keyboardDissmissPanResponder.panHandlers}>
+                            <View
+                                style={[...this.props.style, styles.flex1, paddingStyle]}
+                                /* eslint-disable-next-line react/jsx-props-no-spreading */
+                                {...this.keyboardDissmissPanResponder.panHandlers}
+                            >
                                 <KeyboardAvoidingView
                                     style={[styles.w100, styles.h100, {maxHeight}]}
                                     behavior={this.props.keyboardAvoidingViewBehavior}
@@ -129,10 +132,10 @@ class ScreenWrapper extends React.Component {
                                             // If props.children is a function, call it to provide the insets to the children.
                                             _.isFunction(this.props.children)
                                                 ? this.props.children({
-                                                    insets,
-                                                    safeAreaPaddingBottomStyle,
-                                                    didScreenTransitionEnd: this.state.didScreenTransitionEnd,
-                                                })
+                                                      insets,
+                                                      safeAreaPaddingBottomStyle,
+                                                      didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                                  })
                                                 : this.props.children
                                         }
                                         {this.props.isSmallScreenWidth && this.props.shouldShowOfflineIndicator && <OfflineIndicator />}