From b9ad34885e766c2ec8c32221745114600f4146c9 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 16 Feb 2023 12:45:19 +0200
Subject: [PATCH 1/7] Keyboard is visible for a brief moment on request/send
 money page after getting back from currency search page

---
 src/pages/iou/IOUCurrencySelection.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 1d4524be7d66..a63fd304f0c2 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
+import {Keyboard} from 'react-native';
 import ONYXKEYS from '../../ONYXKEYS';
 import OptionsSelector from '../../components/OptionsSelector';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -13,6 +14,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import * as IOU from '../../libs/actions/IOU';
 import * as CurrencySymbolUtils from '../../libs/CurrencySymbolUtils';
 import {withNetwork} from '../../components/OnyxProvider';
+import withKeyboardState from '../../components/withKeyboardState';
 
 /**
  * IOU Currency selection for selecting currency
@@ -51,6 +53,17 @@ class IOUCurrencySelection extends Component {
         this.changeSearchValue = this.changeSearchValue.bind(this);
     }
 
+    componentDidMount() {
+        this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
+            if (!this.props.isKeyboardShown) { return; }
+            Keyboard.dismiss();
+        });
+    }
+
+    componentWillUnmount() {
+        this.beforeRemoveSubscription();
+    }
+
     /**
      * Returns the sections needed for the OptionsSelector
      *
@@ -140,6 +153,7 @@ IOUCurrencySelection.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
+    withKeyboardState,
     withOnyx({
         currencyList: {key: ONYXKEYS.CURRENCY_LIST},
     }),

From faf9dd533ba5ad633bb80da529f88920cdbae7f2 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 16 Feb 2023 16:45:18 +0200
Subject: [PATCH 2/7] Migrate event handler logic to Screen wrapper

---
 src/components/ScreenWrapper/index.js | 11 ++++++++++-
 src/pages/iou/IOUCurrencySelection.js | 14 --------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index e7ba7e5d0e2e..b854ac99c659 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -1,4 +1,4 @@
-import {View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import React from 'react';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -16,6 +16,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import {withNetwork} from '../OnyxProvider';
 import {propTypes, defaultProps} from './propTypes';
 import SafeAreaConsumer from '../SafeAreaConsumer';
+import withKeyboardState from '../withKeyboardState';
 
 class ScreenWrapper extends React.Component {
     constructor(props) {
@@ -45,6 +46,10 @@ class ScreenWrapper extends React.Component {
             this.props.onTransitionEnd();
             Navigation.setIsNavigating(false);
         });
+        this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
+            if (!this.props.isKeyboardShown) { return; }
+            Keyboard.dismiss();
+        });
     }
 
     /**
@@ -69,6 +74,9 @@ class ScreenWrapper extends React.Component {
         if (this.unsubscribeTransitionStart) {
             this.unsubscribeTransitionStart();
         }
+        if (this.beforeRemoveSubscription) {
+            this.beforeRemoveSubscription();
+        }
     }
 
     render() {
@@ -125,6 +133,7 @@ ScreenWrapper.defaultProps = defaultProps;
 export default compose(
     withNavigation,
     withWindowDimensions,
+    withKeyboardState,
     withOnyx({
         modal: {
             key: ONYXKEYS.MODAL,
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index a63fd304f0c2..1d4524be7d66 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
-import {Keyboard} from 'react-native';
 import ONYXKEYS from '../../ONYXKEYS';
 import OptionsSelector from '../../components/OptionsSelector';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -14,7 +13,6 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import * as IOU from '../../libs/actions/IOU';
 import * as CurrencySymbolUtils from '../../libs/CurrencySymbolUtils';
 import {withNetwork} from '../../components/OnyxProvider';
-import withKeyboardState from '../../components/withKeyboardState';
 
 /**
  * IOU Currency selection for selecting currency
@@ -53,17 +51,6 @@ class IOUCurrencySelection extends Component {
         this.changeSearchValue = this.changeSearchValue.bind(this);
     }
 
-    componentDidMount() {
-        this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
-            if (!this.props.isKeyboardShown) { return; }
-            Keyboard.dismiss();
-        });
-    }
-
-    componentWillUnmount() {
-        this.beforeRemoveSubscription();
-    }
-
     /**
      * Returns the sections needed for the OptionsSelector
      *
@@ -153,7 +140,6 @@ IOUCurrencySelection.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
-    withKeyboardState,
     withOnyx({
         currencyList: {key: ONYXKEYS.CURRENCY_LIST},
     }),

From 9a74f116d082315985ef6382f043cd3c90696b26 Mon Sep 17 00:00:00 2001
From: narefyev91 <n.arefyev91@gmail.com>
Date: Thu, 16 Feb 2023 18:04:58 +0200
Subject: [PATCH 3/7] Update src/components/ScreenWrapper/index.js

add spacing

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>
---
 src/components/ScreenWrapper/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index b854ac99c659..e856e93775a4 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -46,6 +46,7 @@ class ScreenWrapper extends React.Component {
             this.props.onTransitionEnd();
             Navigation.setIsNavigating(false);
         });
+        
         this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
             if (!this.props.isKeyboardShown) { return; }
             Keyboard.dismiss();

From 2d4b7ea1ddcb3a0efa6620b3439228548e3bc16e Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 16 Feb 2023 18:08:27 +0200
Subject: [PATCH 4/7] fix linter with new line

---
 src/components/ScreenWrapper/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index e856e93775a4..201e1b90d8a1 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -46,7 +46,7 @@ class ScreenWrapper extends React.Component {
             this.props.onTransitionEnd();
             Navigation.setIsNavigating(false);
         });
-        
+
         this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
             if (!this.props.isKeyboardShown) { return; }
             Keyboard.dismiss();

From ef742bbf5e233b8dc24f5cb1c685ad5307380661 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Wed, 22 Feb 2023 17:01:06 +0200
Subject: [PATCH 5/7] Add prop to use navigation handler for control keyboard
 visibility

---
 src/components/ScreenWrapper/index.js     | 12 ++++++++----
 src/components/ScreenWrapper/propTypes.js |  4 ++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index d89799565575..193b2ee1a2d7 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -57,10 +57,14 @@ class ScreenWrapper extends React.Component {
             this.props.onEntryTransitionEnd();
         });
 
-        this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
-            if (!this.props.isKeyboardShown) { return; }
-            Keyboard.dismiss();
-        });
+        if (this.props.shouldDismissKeyboardBeforeClose) {
+            this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
+                if (!this.props.isKeyboardShown) {
+                    return;
+                }
+                Keyboard.dismiss();
+            });
+        }
     }
 
     /**
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 7cd2466183e9..83f91bcdfd7e 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -33,12 +33,16 @@ const propTypes = {
         willAlertModalBecomeVisible: PropTypes.bool,
     }),
 
+    /** Whether to dismiss keyboard before leave a screen */
+    shouldDismissKeyboardBeforeClose: PropTypes.bool,
+
     ...environmentPropTypes,
 };
 
 const defaultProps = {
     style: [],
     includeSafeAreaPaddingBottom: true,
+    shouldDismissKeyboardBeforeClose: true,
     includePaddingTop: true,
     onEntryTransitionEnd: () => {},
     modal: {},

From 9eaa7fc9d30876e0dea5d96f80ff0cda2d66de2a Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Wed, 22 Feb 2023 17:40:37 +0200
Subject: [PATCH 6/7] add description for prop

---
 src/components/ScreenWrapper/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 193b2ee1a2d7..28de449ef2ee 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -57,6 +57,9 @@ class ScreenWrapper extends React.Component {
             this.props.onEntryTransitionEnd();
         });
 
+        // We need to have this prop to remove keyboard before going away from the screen, to avoid previous screen look weird for a brief moment,
+        // also we need to have generic control in future - to prevent closing keyboard for some rare cases in which beforeRemove has limitations
+        // described here https://reactnavigation.org/docs/preventing-going-back/#limitations
         if (this.props.shouldDismissKeyboardBeforeClose) {
             this.beforeRemoveSubscription = this.props.navigation.addListener('beforeRemove', () => {
                 if (!this.props.isKeyboardShown) {

From c90218c096c3796936ff0b3e4b6d822b2e47d558 Mon Sep 17 00:00:00 2001
From: narefyev91 <n.arefyev91@gmail.com>
Date: Fri, 24 Feb 2023 12:01:33 +0200
Subject: [PATCH 7/7] Update src/components/ScreenWrapper/propTypes.js

update words

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>
---
 src/components/ScreenWrapper/propTypes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 37d31bc44f62..4345f60fad48 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -29,7 +29,7 @@ const propTypes = {
         willAlertModalBecomeVisible: PropTypes.bool,
     }),
 
-    /** Whether to dismiss keyboard before leave a screen */
+    /** Whether to dismiss keyboard before leaving a screen */
     shouldDismissKeyboardBeforeClose: PropTypes.bool,
 };
 
