From c0047b7c2a0d6d662c0c0ecc6d0a7ecde75a82a6 Mon Sep 17 00:00:00 2001 From: Jakub Trzebiatowski Date: Wed, 12 Apr 2023 20:29:25 +0200 Subject: [PATCH 1/6] Form: Remove the scrollToOverflowEnabled property --- contributingGuides/FORMS.md | 4 ---- src/components/Form.js | 9 --------- src/pages/EnablePayments/AdditionalDetailsStep.js | 1 - src/pages/ReimbursementAccount/CompanyStep.js | 1 - src/pages/settings/Payments/AddDebitCardPage.js | 1 - 5 files changed, 16 deletions(-) diff --git a/contributingGuides/FORMS.md b/contributingGuides/FORMS.md index 3ecfefefed90c..fdfb97d25eaef 100644 --- a/contributingGuides/FORMS.md +++ b/contributingGuides/FORMS.md @@ -302,7 +302,3 @@ In case there's a nested Picker in Form, we should pass the props below to Form, #### Enable ScrollContext Pass the `scrollContextEnabled` prop to enable scrolling up when Picker is pressed, making sure the Picker is always in view and doesn't get covered by virtual keyboards for example. - -#### Enable scrolling to overflow - -In addition to the `scrollContextEnabled` prop, we can also pass `scrollToOverflowEnabled` when the nested Picker is at the bottom of the Form to prevent the popup selector from covering Picker. diff --git a/src/components/Form.js b/src/components/Form.js index 3a110ce673594..1abfe55995769 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -63,12 +63,6 @@ const propTypes = { /** Whether the form submit action is dangerous */ isSubmitActionDangerous: PropTypes.bool, - /** Whether the ScrollView overflow content is scrollable. - * Set to true to avoid nested Picker components at the bottom of the Form from rendering the popup selector over Picker - * e.g. https://github.com/Expensify/App/issues/13909#issuecomment-1396859008 - */ - scrollToOverflowEnabled: PropTypes.bool, - /** Whether ScrollWithContext should be used instead of regular ScrollView. * Set to true when there's a nested Picker component in Form. */ @@ -89,7 +83,6 @@ const defaultProps = { draftValues: {}, enabledWhenOffline: false, isSubmitActionDangerous: false, - scrollToOverflowEnabled: false, scrollContextEnabled: false, style: [], }; @@ -378,7 +371,6 @@ class Form extends React.Component { style={[styles.w100, styles.flex1]} contentContainerStyle={styles.flexGrow1} keyboardShouldPersistTaps="handled" - scrollToOverflowEnabled={this.props.scrollToOverflowEnabled} ref={this.formRef} > {scrollViewContent(safeAreaPaddingBottomStyle)} @@ -388,7 +380,6 @@ class Form extends React.Component { style={[styles.w100, styles.flex1]} contentContainerStyle={styles.flexGrow1} keyboardShouldPersistTaps="handled" - scrollToOverflowEnabled={this.props.scrollToOverflowEnabled} ref={this.formRef} > {scrollViewContent(safeAreaPaddingBottomStyle)} diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index ca1532ba66b69..cd23c03960b3e 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -228,7 +228,6 @@ class AdditionalDetailsStep extends React.Component { validate={this.validate} onSubmit={this.activateWallet} scrollContextEnabled - scrollToOverflowEnabled submitButtonText={this.props.translate('common.saveAndContinue')} style={[styles.mh5, styles.flexGrow1]} > diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index e8480b4b9436e..cbf1b2c3c34d2 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -175,7 +175,6 @@ class CompanyStep extends React.Component { validate={this.validate} onSubmit={this.submit} scrollContextEnabled - scrollToOverflowEnabled submitButtonText={this.props.translate('common.saveAndContinue')} style={[styles.ph5, styles.flexGrow1]} > diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index bc4c7f0f945fd..ae7b7f3b73306 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -126,7 +126,6 @@ class DebitCardPage extends Component { onSubmit={PaymentMethods.addPaymentCard} submitButtonText={this.props.translate('common.save')} scrollContextEnabled - scrollToOverflowEnabled style={[styles.mh5, styles.flexGrow1]} > Date: Tue, 11 Apr 2023 13:04:49 +0200 Subject: [PATCH 2/6] Use PickerAvoidingView from react-native-picker-select ...to ensure pickers aren't covered by iOS picker modal. --- src/App.js | 2 ++ src/components/ScreenWrapper/index.js | 33 +++++++++++++++------------ 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/App.js b/src/App.js index 581012838973e..5180b646d3817 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import {GestureHandlerRootView} from 'react-native-gesture-handler'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import Onyx from 'react-native-onyx'; import {PortalProvider} from '@gorhom/portal'; +import {PickerStateProvider} from 'react-native-picker-select'; import CustomStatusBar from './components/CustomStatusBar'; import ErrorBoundary from './components/ErrorBoundary'; import Expensify from './Expensify'; @@ -43,6 +44,7 @@ const App = () => ( HTMLEngineProvider, WindowDimensionsProvider, KeyboardStateProvider, + PickerStateProvider, ]} > diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index 756bedaff93bc..dcc7a74eed23d 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -3,6 +3,7 @@ import React from 'react'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; +import {PickerAvoidingView} from 'react-native-picker-select'; import KeyboardAvoidingView from '../KeyboardAvoidingView'; import CONST from '../../CONST'; import KeyboardShortcut from '../../libs/KeyboardShortcut'; @@ -123,21 +124,23 @@ class ScreenWrapper extends React.Component { {...(this.props.environment === CONST.ENVIRONMENT.DEV ? this.panResponder.panHandlers : {})} > - - {(this.props.environment === CONST.ENVIRONMENT.DEV) && } - {(this.props.environment === CONST.ENVIRONMENT.DEV) && } - {// 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.environment === CONST.ENVIRONMENT.DEV) && } + {(this.props.environment === CONST.ENVIRONMENT.DEV) && } + {// 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 && ( + + )} + ); From e4e835d47b9d84bbdff125ab105420ee8221cb38 Mon Sep 17 00:00:00 2001 From: Jakub Trzebiatowski Date: Wed, 19 Apr 2023 15:03:22 +0200 Subject: [PATCH 3/6] Disable PickerAvoidingView selectively ...so it doesn't give surprising behavior, especially on the workspace "General settings" page. --- package-lock.json | 14 +++++++------- package.json | 2 +- src/components/ScreenWrapper/index.js | 2 +- src/components/ScreenWrapper/propTypes.js | 5 +++++ src/pages/AddPersonalBankAccountPage.js | 2 +- .../ReimbursementAccount/BankAccountPlaidStep.js | 2 +- src/pages/workspace/WorkspaceNewRoomPage.js | 2 +- src/pages/workspace/WorkspacePageWithSections.js | 2 +- 8 files changed, 18 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9de57b30271d..3f00b4979e9d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,7 +79,7 @@ "react-native-pdf": "^6.6.2", "react-native-performance": "^4.0.0", "react-native-permissions": "^3.0.1", - "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#dabfcd556d2d507609a741c8d074d134be328056", + "react-native-picker-select": "git+https://github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", "react-native-plaid-link-sdk": "^10.0.0", "react-native-quick-sqlite": "^8.0.0-beta.2", "react-native-reanimated": "3.0.0-rc.10", @@ -139,7 +139,7 @@ "css-loader": "^6.7.2", "diff-so-fancy": "^1.3.0", "dotenv": "^16.0.3", - "electron": "^22.3.6", + "electron": "22.3.6", "electron-builder": "23.5.0", "electron-notarize": "^1.2.1", "eslint": "^7.6.0", @@ -34808,8 +34808,8 @@ }, "node_modules/react-native-picker-select": { "version": "8.0.4", - "resolved": "git+ssh://git@github.com/Expensify/react-native-picker-select.git#dabfcd556d2d507609a741c8d074d134be328056", - "integrity": "sha512-/NIHN6bpVAA9me6arwvnuMnLCdiMZ2Iebj8EsnBwc0u0MHr2aojLYXUBnUpDmuYjuOJLsn7yRhJta6N3hkXCHw==", + "resolved": "git+ssh://git@github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", + "integrity": "sha512-1sR2zrehqvcUSoWU8P5H5vxzzsW0dtR/umdyG+mg+t0Zs9Hoo/XUBhZQ6kyr5D0YxBiLSfhWSaaZ7FoxDipksw==", "license": "MIT", "dependencies": { "lodash.isequal": "^4.5.0" @@ -64428,9 +64428,9 @@ "requires": {} }, "react-native-picker-select": { - "version": "git+ssh://git@github.com/Expensify/react-native-picker-select.git#dabfcd556d2d507609a741c8d074d134be328056", - "integrity": "sha512-/NIHN6bpVAA9me6arwvnuMnLCdiMZ2Iebj8EsnBwc0u0MHr2aojLYXUBnUpDmuYjuOJLsn7yRhJta6N3hkXCHw==", - "from": "react-native-picker-select@git+https://github.com/Expensify/react-native-picker-select.git#dabfcd556d2d507609a741c8d074d134be328056", + "version": "git+ssh://git@github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", + "integrity": "sha512-1sR2zrehqvcUSoWU8P5H5vxzzsW0dtR/umdyG+mg+t0Zs9Hoo/XUBhZQ6kyr5D0YxBiLSfhWSaaZ7FoxDipksw==", + "from": "react-native-picker-select@git+https://github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", "requires": { "lodash.isequal": "^4.5.0" } diff --git a/package.json b/package.json index 41ca2d9351a94..3e65693bdab33 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "react-native-pdf": "^6.6.2", "react-native-performance": "^4.0.0", "react-native-permissions": "^3.0.1", - "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#dabfcd556d2d507609a741c8d074d134be328056", + "react-native-picker-select": "git+https://github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", "react-native-plaid-link-sdk": "^10.0.0", "react-native-quick-sqlite": "^8.0.0-beta.2", "react-native-reanimated": "3.0.0-rc.10", diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index dcc7a74eed23d..71ccaae496805 100644 --- a/src/components/ScreenWrapper/index.js +++ b/src/components/ScreenWrapper/index.js @@ -124,7 +124,7 @@ class ScreenWrapper extends React.Component { {...(this.props.environment === CONST.ENVIRONMENT.DEV ? this.panResponder.panHandlers : {})} > - + {(this.props.environment === CONST.ENVIRONMENT.DEV) && } {(this.props.environment === CONST.ENVIRONMENT.DEV) && } diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js index 19d065fe5b156..39cc284d847f0 100644 --- a/src/components/ScreenWrapper/propTypes.js +++ b/src/components/ScreenWrapper/propTypes.js @@ -25,6 +25,10 @@ const propTypes = { * Search 'switch(behavior)' in ./node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js for more context */ keyboardAvoidingViewBehavior: PropTypes.oneOf(['padding', 'height', 'position']), + /** Whether picker modal avoiding should be enabled. Should be enabled when there's a picker at the bottom of a + * scrollable form, gives a subtly better UX if disabled on non-scrollable screens with a submit button */ + shouldEnablePickerAvoiding: PropTypes.bool, + /** Details about any modals being used */ modal: PropTypes.shape({ /** Indicates when an Alert modal is about to be visible */ @@ -51,6 +55,7 @@ const defaultProps = { modal: {}, keyboardAvoidingViewBehavior: 'padding', shouldEnableMaxHeight: false, + shouldEnablePickerAvoiding: true, }; export {propTypes, defaultProps}; diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js index 0901f31dae740..32a7a484b0a4f 100644 --- a/src/pages/AddPersonalBankAccountPage.js +++ b/src/pages/AddPersonalBankAccountPage.js @@ -85,7 +85,7 @@ class AddPersonalBankAccountPage extends React.Component { const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false); return ( - + + + Navigation.dismissModal()} diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js index eb5d17c0a3c2c..3f9f1e20e75dd 100644 --- a/src/pages/workspace/WorkspacePageWithSections.js +++ b/src/pages/workspace/WorkspacePageWithSections.js @@ -106,7 +106,7 @@ class WorkspacePageWithSections extends React.Component { const policyName = lodashGet(this.props.policy, 'name'); return ( - + Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)} From 447a47b4764a7bcd72913cbacb0300f65569ddfe Mon Sep 17 00:00:00 2001 From: Jakub Trzebiatowski Date: Wed, 26 Apr 2023 11:37:37 +0200 Subject: [PATCH 4/6] Update the react-native-picker-select SHA1 ...to the one merged in https://github.com/Expensify/react-native-picker-select/pull/8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3e65693bdab33..82f8dfe6c1122 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "react-native-pdf": "^6.6.2", "react-native-performance": "^4.0.0", "react-native-permissions": "^3.0.1", - "react-native-picker-select": "git+https://github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", + "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#107b3786ae6bc155dec05c7fc5ee525d3421dc21", "react-native-plaid-link-sdk": "^10.0.0", "react-native-quick-sqlite": "^8.0.0-beta.2", "react-native-reanimated": "3.0.0-rc.10", From 6057a9358697116d6495119218def3d802569c36 Mon Sep 17 00:00:00 2001 From: Jakub Trzebiatowski Date: Wed, 26 Apr 2023 13:17:05 +0200 Subject: [PATCH 5/6] Update package-lock.json --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index f347bfb88754b..7f169e88acbb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,7 +80,7 @@ "react-native-pdf": "^6.6.2", "react-native-performance": "^4.0.0", "react-native-permissions": "^3.0.1", - "react-native-picker-select": "git+https://github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", + "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#107b3786ae6bc155dec05c7fc5ee525d3421dc21", "react-native-plaid-link-sdk": "^10.0.0", "react-native-quick-sqlite": "^8.0.0-beta.2", "react-native-reanimated": "3.0.0-rc.10", @@ -34824,8 +34824,8 @@ }, "node_modules/react-native-picker-select": { "version": "8.0.4", - "resolved": "git+ssh://git@github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", - "integrity": "sha512-1sR2zrehqvcUSoWU8P5H5vxzzsW0dtR/umdyG+mg+t0Zs9Hoo/XUBhZQ6kyr5D0YxBiLSfhWSaaZ7FoxDipksw==", + "resolved": "git+ssh://git@github.com/Expensify/react-native-picker-select.git#107b3786ae6bc155dec05c7fc5ee525d3421dc21", + "integrity": "sha512-XZQnnQRXm/GFFVoJt3eKrc62l7YdcP040isrDnB0ygR88JlCsMRTsM0meg1FwE3/SgtGCA85mwzV2n6qCfGf7A==", "license": "MIT", "dependencies": { "lodash.isequal": "^4.5.0" @@ -64453,9 +64453,9 @@ "requires": {} }, "react-native-picker-select": { - "version": "git+ssh://git@github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", - "integrity": "sha512-1sR2zrehqvcUSoWU8P5H5vxzzsW0dtR/umdyG+mg+t0Zs9Hoo/XUBhZQ6kyr5D0YxBiLSfhWSaaZ7FoxDipksw==", - "from": "react-native-picker-select@git+https://github.com/cubuspl42/react-native-picker-select.git#5672096e3e9979cbe639537e6e19b5e4a71ba7bb", + "version": "git+ssh://git@github.com/Expensify/react-native-picker-select.git#107b3786ae6bc155dec05c7fc5ee525d3421dc21", + "integrity": "sha512-XZQnnQRXm/GFFVoJt3eKrc62l7YdcP040isrDnB0ygR88JlCsMRTsM0meg1FwE3/SgtGCA85mwzV2n6qCfGf7A==", + "from": "react-native-picker-select@git+https://github.com/Expensify/react-native-picker-select.git#107b3786ae6bc155dec05c7fc5ee525d3421dc21", "requires": { "lodash.isequal": "^4.5.0" } From bb62d998f8ba87cea7539857ada4dfd3a52c131d Mon Sep 17 00:00:00 2001 From: Jakub Trzebiatowski Date: Thu, 27 Apr 2023 17:09:55 +0200 Subject: [PATCH 6/6] Improve formatting --- src/pages/AddPersonalBankAccountPage.js | 5 ++++- src/pages/ReimbursementAccount/BankAccountPlaidStep.js | 5 ++++- src/pages/workspace/WorkspaceNewRoomPage.js | 5 ++++- src/pages/workspace/WorkspacePageWithSections.js | 5 ++++- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js index 32a7a484b0a4f..36d82b1a70685 100644 --- a/src/pages/AddPersonalBankAccountPage.js +++ b/src/pages/AddPersonalBankAccountPage.js @@ -85,7 +85,10 @@ class AddPersonalBankAccountPage extends React.Component { const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false); return ( - + + + Navigation.dismissModal()} diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js index 3f9f1e20e75dd..85582d23b627c 100644 --- a/src/pages/workspace/WorkspacePageWithSections.js +++ b/src/pages/workspace/WorkspacePageWithSections.js @@ -106,7 +106,10 @@ class WorkspacePageWithSections extends React.Component { const policyName = lodashGet(this.props.policy, 'name'); return ( - + Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}