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/package-lock.json b/package-lock.json index 0062a70b87f31..5420c007e5cd5 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/Expensify/react-native-picker-select.git#dabfcd556d2d507609a741c8d074d134be328056", + "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", @@ -34862,8 +34862,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/Expensify/react-native-picker-select.git#107b3786ae6bc155dec05c7fc5ee525d3421dc21", + "integrity": "sha512-XZQnnQRXm/GFFVoJt3eKrc62l7YdcP040isrDnB0ygR88JlCsMRTsM0meg1FwE3/SgtGCA85mwzV2n6qCfGf7A==", "license": "MIT", "dependencies": { "lodash.isequal": "^4.5.0" @@ -64514,9 +64514,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/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" } diff --git a/package.json b/package.json index a435e0ccbe7c0..1ba0d8baf1267 100644 --- a/package.json +++ b/package.json @@ -112,7 +112,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/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", 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/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/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js index 7a2ae22ccf453..151ee96e22355 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 && ( + + )} + ); 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..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 ( - + diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js index 89339e0d7968f..65b7dea3e3952 100644 --- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js +++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js @@ -68,7 +68,10 @@ class BankAccountPlaidStep extends React.Component { const selectedPlaidAccountID = lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', ''); return ( - + 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]} > + Navigation.dismissModal()} diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js index eb5d17c0a3c2c..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)}