diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index fc5a043ac637..5c83dda89619 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'; @@ -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, diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js index 67e1b759ebac..4345f60fad48 100644 --- a/src/components/ScreenWrapper/propTypes.js +++ b/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 leaving a screen */ + shouldDismissKeyboardBeforeClose: PropTypes.bool, }; const defaultProps = { style: [], includeSafeAreaPaddingBottom: true, + shouldDismissKeyboardBeforeClose: true, includePaddingTop: true, onEntryTransitionEnd: () => {}, modal: {},