From b9ad34885e766c2ec8c32221745114600f4146c9 Mon Sep 17 00:00:00 2001 From: Nicolay Arefyeu 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 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 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 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 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 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 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, };