Use PickerAvoidingView from react-native-picker-select

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.

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",

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,
             ]}
         >
             <CustomStatusBar />

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)}

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 : {})}
                         >
                             <KeyboardAvoidingView style={[styles.w100, styles.h100, {maxHeight}]} behavior={this.props.keyboardAvoidingViewBehavior}>
-                                <HeaderGap />
-                                {(this.props.environment === CONST.ENVIRONMENT.DEV) && <TestToolsModal />}
-                                {(this.props.environment === CONST.ENVIRONMENT.DEV) && <CustomDevMenu />}
-                                {// 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 && (
-                                    <OfflineIndicator />
-                                )}
+                                <PickerAvoidingView style={styles.flex1} enabled={this.props.shouldEnablePickerAvoiding}>
+                                    <HeaderGap />
+                                    {(this.props.environment === CONST.ENVIRONMENT.DEV) && <TestToolsModal />}
+                                    {(this.props.environment === CONST.ENVIRONMENT.DEV) && <CustomDevMenu />}
+                                    {// 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 && (
+                                        <OfflineIndicator />
+                                    )}
+                                </PickerAvoidingView>
                             </KeyboardAvoidingView>
                         </View>
                     );

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};

src/pages/AddPersonalBankAccountPage.js

@@ -85,7 +85,10 @@ class AddPersonalBankAccountPage extends React.Component {
         const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false);
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={shouldShowSuccess}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={shouldShowSuccess}
+                shouldEnablePickerAvoiding={false}
+            >
                 <HeaderWithCloseButton
                     title={this.props.translate('bankAccount.addBankAccount')}
                     onCloseButtonPress={Navigation.dismissModal}

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]}
                     >

src/pages/ReimbursementAccount/BankAccountPlaidStep.js

@@ -68,7 +68,10 @@ class BankAccountPlaidStep extends React.Component {
         const selectedPlaidAccountID = lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', '');
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnablePickerAvoiding={false}
+            >
                 <HeaderWithCloseButton
                     title={this.props.translate('workspace.common.bankAccount')}
                     stepCounter={{step: 1, total: 5}}

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]}
                 >

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]}
                 >
                     <TextInput

src/pages/workspace/WorkspaceNewRoomPage.js

@@ -138,7 +138,10 @@ class WorkspaceNewRoomPage extends React.Component {
         }));
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnablePickerAvoiding={false}
+            >
                 <HeaderWithCloseButton
                     title={this.props.translate('newRoomPage.newRoom')}
                     onCloseButtonPress={() => Navigation.dismissModal()}

src/pages/workspace/WorkspacePageWithSections.js

@@ -106,7 +106,10 @@ class WorkspacePageWithSections extends React.Component {
         const policyName = lodashGet(this.props.policy, 'name');
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnablePickerAvoiding={false}
+            >
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}