Keyboard is visible for a brief moment on request/send money page after getting back from currency search page

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';
@@ -17,6 +17,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) {
@@ -51,6 +52,18 @@ class ScreenWrapper extends React.Component {
             this.setState({didScreenTransitionEnd: true});
             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) {
+                    return;
+                }
+                Keyboard.dismiss();
+            });
+        }
     }
 
     /**
@@ -75,6 +88,9 @@ class ScreenWrapper extends React.Component {
         if (this.unsubscribeTransitionStart) {
             this.unsubscribeTransitionStart();
         }
+        if (this.beforeRemoveSubscription) {
+            this.beforeRemoveSubscription();
+        }
     }
 
     render() {
@@ -131,6 +147,7 @@ ScreenWrapper.defaultProps = defaultProps;
 export default compose(
     withNavigation,
     withWindowDimensions,
+    withKeyboardState,
     withOnyx({
         modal: {
             key: ONYXKEYS.MODAL,

src/components/ScreenWrapper/propTypes.js

@@ -28,11 +28,15 @@ const propTypes = {
         /** Indicates when an Alert modal is about to be visible */
         willAlertModalBecomeVisible: PropTypes.bool,
     }),
+
+    /** Whether to dismiss keyboard before leave a screen */
+    shouldDismissKeyboardBeforeClose: PropTypes.bool,
 };
 
 const defaultProps = {
     style: [],
     includeSafeAreaPaddingBottom: true,
+    shouldDismissKeyboardBeforeClose: true,
     includePaddingTop: true,
     onEntryTransitionEnd: () => {},
     modal: {},