From 54c4ef81ab7bd0c27b0a55894e7d1219501e5a44 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 13 Dec 2022 16:43:31 -1000
Subject: [PATCH 01/14] Fix initial screens

---
 src/components/ScreenWrapper/index.js         |   1 +
 src/pages/NewChatPage.js                      |   4 +-
 src/pages/SearchPage.js                       |   4 +-
 src/pages/settings/AboutPage/AboutPage.js     |   4 +-
 src/pages/settings/InitialSettingsPage.js     |   4 +-
 src/pages/settings/PreferencesPage.js         |   4 +-
 src/pages/settings/Profile/ProfilePage.js     | 206 +++++++++---------
 .../settings/Security/CloseAccountPage.js     |  98 +++++----
 src/pages/workspace/WorkspaceInitialPage.js   |   4 +-
 src/pages/workspace/WorkspaceMembersPage.js   |   5 +-
 10 files changed, 181 insertions(+), 153 deletions(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 52d9aa5e6b62..dacd915a0cb0 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -95,6 +95,7 @@ class ScreenWrapper extends React.Component {
                                     _.isFunction(this.props.children)
                                         ? this.props.children({
                                             insets,
+                                            paddingBottom,
                                             didScreenTransitionEnd: this.state.didScreenTransitionEnd,
                                         })
                                         : this.props.children
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index dbbf8edf21f4..e5a1f7f4be18 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -235,7 +235,9 @@ class NewChatPage extends Component {
             maxParticipantsReached,
         );
         return (
-            <ScreenWrapper>
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
                 {({didScreenTransitionEnd}) => (
                     <>
                         <HeaderWithCloseButton
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index ecd77c325a10..ed6fab2409c0 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -165,7 +165,9 @@ class SearchPage extends Component {
             this.state.searchValue,
         );
         return (
-            <ScreenWrapper>
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
                 {({didScreenTransitionEnd}) => (
                     <>
                         <HeaderWithCloseButton
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 3ac1564a61f9..c8351396e3b5 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -61,7 +61,9 @@ const AboutPage = (props) => {
     ];
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper
+            includePaddingBottom={false}
+        >
             <HeaderWithCloseButton
                 title={props.translate('initialSettingsPage.about')}
                 shouldShowBackButton
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index c2bf6b384b87..9505265d753d 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -234,7 +234,9 @@ class InitialSettingsPage extends React.Component {
         }
 
         return (
-            <ScreenWrapper>
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
                 <HeaderWithCloseButton
                     title={this.props.translate('common.settings')}
                     onCloseButtonPress={() => Navigation.dismissModal(true)}
diff --git a/src/pages/settings/PreferencesPage.js b/src/pages/settings/PreferencesPage.js
index e3d10d6fb4b1..4f7f1661b41a 100755
--- a/src/pages/settings/PreferencesPage.js
+++ b/src/pages/settings/PreferencesPage.js
@@ -57,7 +57,9 @@ const PreferencesPage = (props) => {
     };
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper
+            includePaddingBottom={false}
+        >
             <HeaderWithCloseButton
                 title={props.translate('common.preferences')}
                 shouldShowBackButton
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 6c805ade9b17..635b10ab14f0 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -221,111 +221,117 @@ class ProfilePage extends Component {
         const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.pronouns;
 
         return (
-            <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('common.profile')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM}
-                    validate={this.validate}
-                    onSubmit={this.updatePersonalDetails}
-                    submitButtonText={this.props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <OfflineWithFeedback
-                        pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
-                        errors={lodashGet(this.props.currentUserPersonalDetails, 'errorFields.avatar', null)}
-                        errorRowStyles={[styles.mt6]}
-                        onClose={PersonalDetails.clearAvatarErrors}
-                    >
-                        <AvatarWithImagePicker
-                            isUsingDefaultAvatar={lodashGet(currentUserDetails, 'avatar', '').includes('/images/avatars/avatar')}
-                            avatarURL={currentUserDetails.avatar}
-                            onImageSelected={PersonalDetails.updateAvatar}
-                            onImageRemoved={PersonalDetails.deleteAvatar}
-                            anchorPosition={styles.createMenuPositionProfile}
-                            size={CONST.AVATAR_SIZE.LARGE}
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
+                {({paddingBottom}) => (
+                    <>
+                        <HeaderWithCloseButton
+                            title={this.props.translate('common.profile')}
+                            shouldShowBackButton
+                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
+                            onCloseButtonPress={() => Navigation.dismissModal(true)}
                         />
-                    </OfflineWithFeedback>
-                    <Text style={[styles.mt6, styles.mb6]}>
-                        {this.props.translate('profilePage.tellUsAboutYourself')}
-                    </Text>
-
-                    <View style={[styles.flexRow, styles.mt4, styles.mb4]}>
-                        <View style={styles.flex1}>
-                            <TextInput
-                                inputID="firstName"
-                                name="fname"
-                                label={this.props.translate('common.firstName')}
-                                defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
-                                placeholder={this.props.translate('profilePage.john')}
+                        <Form
+                            style={[styles.flexGrow1, styles.ph5, {paddingBottom}]}
+                            formID={ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM}
+                            validate={this.validate}
+                            onSubmit={this.updatePersonalDetails}
+                            submitButtonText={this.props.translate('common.save')}
+                            enabledWhenOffline
+                        >
+                            <OfflineWithFeedback
+                                pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
+                                errors={lodashGet(this.props.currentUserPersonalDetails, 'errorFields.avatar', null)}
+                                errorRowStyles={[styles.mt6]}
+                                onClose={PersonalDetails.clearAvatarErrors}
+                            >
+                                <AvatarWithImagePicker
+                                    isUsingDefaultAvatar={lodashGet(currentUserDetails, 'avatar', '').includes('/images/avatars/avatar')}
+                                    avatarURL={currentUserDetails.avatar}
+                                    onImageSelected={PersonalDetails.updateAvatar}
+                                    onImageRemoved={PersonalDetails.deleteAvatar}
+                                    anchorPosition={styles.createMenuPositionProfile}
+                                    size={CONST.AVATAR_SIZE.LARGE}
+                                />
+                            </OfflineWithFeedback>
+                            <Text style={[styles.mt6, styles.mb6]}>
+                                {this.props.translate('profilePage.tellUsAboutYourself')}
+                            </Text>
+
+                            <View style={[styles.flexRow, styles.mt4, styles.mb4]}>
+                                <View style={styles.flex1}>
+                                    <TextInput
+                                        inputID="firstName"
+                                        name="fname"
+                                        label={this.props.translate('common.firstName')}
+                                        defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
+                                        placeholder={this.props.translate('profilePage.john')}
+                                    />
+                                </View>
+                                <View style={[styles.flex1, styles.ml2]}>
+                                    <TextInput
+                                        inputID="lastName"
+                                        name="lname"
+                                        label={this.props.translate('common.lastName')}
+                                        defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
+                                        placeholder={this.props.translate('profilePage.doe')}
+                                    />
+                                </View>
+                            </View>
+                            <View style={styles.mb6}>
+                                <Picker
+                                    inputID="pronouns"
+                                    label={this.props.translate('profilePage.preferredPronouns')}
+                                    items={pronounsList}
+                                    placeholder={{
+                                        value: '',
+                                        label: this.props.translate('profilePage.selectYourPronouns'),
+                                    }}
+                                    defaultValue={pronounsPickerValue}
+                                    onValueChange={this.setPronouns}
+                                />
+                                {this.state.hasSelfSelectedPronouns && (
+                                    <View style={styles.mt2}>
+                                        <TextInput
+                                            inputID="selfSelectedPronoun"
+                                            defaultValue={this.pronouns}
+                                            placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
+                                        />
+                                    </View>
+                                )}
+                            </View>
+                            <LoginField
+                                label={this.props.translate('profilePage.emailAddress')}
+                                type="email"
+                                login={this.state.logins.email}
+                                defaultValue={this.state.logins.email}
                             />
-                        </View>
-                        <View style={[styles.flex1, styles.ml2]}>
-                            <TextInput
-                                inputID="lastName"
-                                name="lname"
-                                label={this.props.translate('common.lastName')}
-                                defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
-                                placeholder={this.props.translate('profilePage.doe')}
+                            <LoginField
+                                label={this.props.translate('common.phoneNumber')}
+                                type="phone"
+                                login={this.state.logins.phone}
+                                defaultValue={this.state.logins.phone}
                             />
-                        </View>
-                    </View>
-                    <View style={styles.mb6}>
-                        <Picker
-                            inputID="pronouns"
-                            label={this.props.translate('profilePage.preferredPronouns')}
-                            items={pronounsList}
-                            placeholder={{
-                                value: '',
-                                label: this.props.translate('profilePage.selectYourPronouns'),
-                            }}
-                            defaultValue={pronounsPickerValue}
-                            onValueChange={this.setPronouns}
-                        />
-                        {this.state.hasSelfSelectedPronouns && (
-                            <View style={styles.mt2}>
-                                <TextInput
-                                    inputID="selfSelectedPronoun"
-                                    defaultValue={this.pronouns}
-                                    placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
+                            <View style={styles.mb3}>
+                                <Picker
+                                    inputID="timezone"
+                                    label={this.props.translate('profilePage.timezone')}
+                                    items={timezones}
+                                    isDisabled={this.state.isAutomaticTimezone}
+                                    value={this.state.selectedTimezone}
+                                    onValueChange={selectedTimezone => this.setState({selectedTimezone})}
                                 />
                             </View>
-                        )}
-                    </View>
-                    <LoginField
-                        label={this.props.translate('profilePage.emailAddress')}
-                        type="email"
-                        login={this.state.logins.email}
-                        defaultValue={this.state.logins.email}
-                    />
-                    <LoginField
-                        label={this.props.translate('common.phoneNumber')}
-                        type="phone"
-                        login={this.state.logins.phone}
-                        defaultValue={this.state.logins.phone}
-                    />
-                    <View style={styles.mb3}>
-                        <Picker
-                            inputID="timezone"
-                            label={this.props.translate('profilePage.timezone')}
-                            items={timezones}
-                            isDisabled={this.state.isAutomaticTimezone}
-                            value={this.state.selectedTimezone}
-                            onValueChange={selectedTimezone => this.setState({selectedTimezone})}
-                        />
-                    </View>
-                    <CheckboxWithLabel
-                        inputID="isAutomaticTimezone"
-                        label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
-                        defaultValue={this.state.isAutomaticTimezone}
-                        onValueChange={this.setAutomaticTimezone}
-                    />
-                </Form>
+                            <CheckboxWithLabel
+                                inputID="isAutomaticTimezone"
+                                label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
+                                defaultValue={this.state.isAutomaticTimezone}
+                                onValueChange={this.setAutomaticTimezone}
+                            />
+                        </Form>
+                    </>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 99f295726cec..00071846dfe3 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -60,53 +60,59 @@ class CloseAccountPage extends Component {
     render() {
         const userEmailOrPhone = Str.removeSMSDomain(this.props.session.email);
         return (
-            <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('closeAccountPage.closeAccount')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <Form
-                    formID={ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM}
-                    validate={this.validate}
-                    onSubmit={this.onSubmit}
-                    submitButtonText={this.props.translate('closeAccountPage.closeAccount')}
-                    style={[styles.flexGrow1, styles.mh5]}
-                    isDangerousAction
-                >
-                    <View style={[styles.flexGrow1]}>
-                        <Text>{this.props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
-                        <TextInput
-                            inputID="reasonForLeaving"
-                            multiline
-                            numberOfLines={6}
-                            textAlignVertical="top"
-                            label={this.props.translate('closeAccountPage.enterMessageHere')}
-                            containerStyles={[styles.mt5, styles.closeAccountMessageInput]}
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
+                {({paddingBottom}) => (
+                    <>
+                        <HeaderWithCloseButton
+                            title={this.props.translate('closeAccountPage.closeAccount')}
+                            shouldShowBackButton
+                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
+                            onCloseButtonPress={() => Navigation.dismissModal(true)}
                         />
-                        <Text style={[styles.mt5]}>
-                            <Text style={[styles.textStrong]}>
-                                {this.props.translate('closeAccountPage.closeAccountWarning')}
-                            </Text>
-                            {' '}
-                            {this.props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
-                        </Text>
-                        <Text textBreakStrategy="simple" style={[styles.mt5]}>
-                            <Text style={[styles.textStrong]}>
-                                {this.props.translate('closeAccountPage.defaultContact')}
-                            </Text>
-                            {' '}
-                            {userEmailOrPhone}
-                        </Text>
-                        <TextInput
-                            inputID="phoneOrEmail"
-                            autoCapitalize="none"
-                            label={this.props.translate('closeAccountPage.enterDefaultContact')}
-                            containerStyles={[styles.mt5]}
-                        />
-                    </View>
-                </Form>
+                        <Form
+                            formID={ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM}
+                            validate={this.validate}
+                            onSubmit={this.onSubmit}
+                            submitButtonText={this.props.translate('closeAccountPage.closeAccount')}
+                            style={[styles.flexGrow1, styles.mh5, {paddingBottom}]}
+                            isDangerousAction
+                        >
+                            <View style={[styles.flexGrow1]}>
+                                <Text>{this.props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
+                                <TextInput
+                                    inputID="reasonForLeaving"
+                                    multiline
+                                    numberOfLines={6}
+                                    textAlignVertical="top"
+                                    label={this.props.translate('closeAccountPage.enterMessageHere')}
+                                    containerStyles={[styles.mt5, styles.closeAccountMessageInput]}
+                                />
+                                <Text style={[styles.mt5]}>
+                                    <Text style={[styles.textStrong]}>
+                                        {this.props.translate('closeAccountPage.closeAccountWarning')}
+                                    </Text>
+                                    {' '}
+                                    {this.props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
+                                </Text>
+                                <Text textBreakStrategy="simple" style={[styles.mt5]}>
+                                    <Text style={[styles.textStrong]}>
+                                        {this.props.translate('closeAccountPage.defaultContact')}
+                                    </Text>
+                                    {' '}
+                                    {userEmailOrPhone}
+                                </Text>
+                                <TextInput
+                                    inputID="phoneOrEmail"
+                                    autoCapitalize="none"
+                                    label={this.props.translate('closeAccountPage.enterDefaultContact')}
+                                    containerStyles={[styles.mt5]}
+                                />
+                            </View>
+                        </Form>
+                    </>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 241d275ccf7d..d70dfcc2810e 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -147,7 +147,9 @@ class WorkspaceInitialPage extends React.Component {
         ];
 
         return (
-            <ScreenWrapper>
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 92ac6559f895..066f58ef0f3a 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -317,7 +317,10 @@ class WorkspaceMembersPage extends React.Component {
         const policyName = lodashGet(this.props.policy, 'name');
 
         return (
-            <ScreenWrapper style={[styles.defaultModalContainer]}>
+            <ScreenWrapper
+                includePaddingBottom={false}
+                style={[styles.defaultModalContainer]}
+            >
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}

From 6c1b9ece5031f6b0be050765d3c5ea26dad1bd2a Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 14 Dec 2022 11:28:10 -1000
Subject: [PATCH 02/14] Fix IOU screens

---
 .../BankAccountManualStep.js                  |   2 +-
 .../BankAccountPlaidStep.js                   |   2 +-
 .../ReimbursementAccount/BankAccountStep.js   |   4 +-
 src/pages/ReimbursementAccount/CompanyStep.js |   2 +-
 .../ReimbursementAccountPage.js               |  53 ++++---
 .../ReimbursementAccount/RequestorStep.js     |   2 +-
 src/pages/RequestCallConfirmationScreen.js    |   2 +-
 src/pages/RequestCallPage.js                  | 148 +++++++++---------
 src/pages/iou/IOUModal.js                     |  11 +-
 .../IOUParticipantsPage.js                    |   1 +
 .../IOUParticipantsSplit.js                   |   2 +-
 .../workspace/WorkspacePageWithSections.js    |  64 ++++----
 src/pages/workspace/WorkspaceSettingsPage.js  |   5 +-
 13 files changed, 160 insertions(+), 138 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 25e767d24800..143693758ec3 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -88,7 +88,7 @@ class BankAccountManualStep extends React.Component {
                     onSubmit={this.submit}
                     validate={this.validate}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
-                    style={[styles.mh5, styles.flexGrow1]}
+                    style={[styles.mh5, styles.flexGrow1, {paddingBottom: this.props.paddingBottom}]}
                 >
                     <Text style={[styles.mb5]}>
                         {this.props.translate('bankAccount.checkHelpLine')}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 1142cfde7efd..93b65b2414f4 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -80,7 +80,7 @@ class BankAccountPlaidStep extends React.Component {
                     validate={() => ({})}
                     onSubmit={this.submit}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
-                    style={[styles.mh5, styles.flexGrow1]}
+                    style={[styles.mh5, styles.flexGrow1, {paddingBottom: this.props.paddingBottom}]}
                     isSubmitButtonVisible={Boolean(selectedPlaidAccountID)}
                 >
                     <AddPlaidBankAccount
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 7d1b8d3cdeec..a61c84bde55c 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -77,11 +77,11 @@ const BankAccountStep = (props) => {
     const bankAccountRoute = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.BANK_ACCOUNT}`;
 
     if (subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
-        return <BankAccountManualStep onBack={props.onSubStepBack} />;
+        return <BankAccountManualStep onBack={props.onSubStepBack} paddingBottom={props.paddingBottom} />;
     }
 
     if (subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
-        return <BankAccountPlaidStep onBack={props.onSubStepBack} />;
+        return <BankAccountPlaidStep onBack={props.onSubStepBack} paddingBottom={props.paddingBottom} />;
     }
 
     return (
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 10c2c6fdc021..239e5f8e93f2 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -152,7 +152,7 @@ class CompanyStep extends React.Component {
                     validate={this.validate}
                     onSubmit={this.submit}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
-                    style={[styles.ph5, styles.flexGrow1]}
+                    style={[styles.ph5, styles.flexGrow1, {paddingBottom: this.props.paddingBottom}]}
                 >
                     <Text>{this.props.translate('companyStep.subtitle')}</Text>
                     <TextInput
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 35368423a935..62a2b528b5f3 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -240,30 +240,37 @@ class ReimbursementAccountPage extends React.Component {
             );
         }
         return (
-            <ScreenWrapper>
-                {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
-                    <BankAccountStep
-                        receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
-                        plaidLinkOAuthToken={this.props.plaidLinkToken}
-                        onSubStepBack={() => (hasInProgressVBBA ? this.setState({shouldShowContinueSetupButton: true}) : BankAccounts.setBankAccountSubStep(null))}
-                    />
-                )}
-                {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && (
-                    <CompanyStep />
-                )}
-                {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
-                    <RequestorStep />
-                )}
-                {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && (
-                    <ACHContractStep companyName={achData.companyName} />
-                )}
-                {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (
-                    <ValidationStep />
-                )}
-                {currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE && (
-                    <EnableStep />
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
+                {({paddingBottom}) => (
+                    <>
+                        {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
+                            <BankAccountStep
+                                receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+                                plaidLinkOAuthToken={this.props.plaidLinkToken}
+                                onSubStepBack={() => (hasInProgressVBBA ? this.setState({shouldShowContinueSetupButton: true}) : BankAccounts.setBankAccountSubStep(null))}
+                                paddingBottom={paddingBottom}
+                            />
+                        )}
+                        {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && (
+                            <CompanyStep paddingBottom={paddingBottom} />
+                        )}
+                        {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
+                            <RequestorStep paddingBottom={paddingBottom} />
+                        )}
+                        {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && (
+                            <ACHContractStep companyName={achData.companyName} paddingBottom={paddingBottom} />
+                        )}
+                        {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (
+                            <ValidationStep />
+                        )}
+                        {currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE && (
+                            <EnableStep />
+                        )}
+                        <WorkspaceResetBankAccountModal />
+                    </>
                 )}
-                <WorkspaceResetBankAccountModal />
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 474ed78b4281..f3542687901f 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -162,7 +162,7 @@ class RequestorStep extends React.Component {
                         submitButtonText={this.props.translate('common.saveAndContinue')}
                         validate={this.validate}
                         onSubmit={this.submit}
-                        style={[styles.mh5, styles.flexGrow1]}
+                        style={[styles.mh5, styles.flexGrow1, {paddingBottom: this.props.paddingBottom}]}
                     >
                         <Text>{this.props.translate('requestorStep.subtitle')}</Text>
                         <View style={[styles.mb5, styles.mt1, styles.dFlex, styles.flexRow]}>
diff --git a/src/pages/RequestCallConfirmationScreen.js b/src/pages/RequestCallConfirmationScreen.js
index 22c1d3eeb2c6..a723119a2327 100644
--- a/src/pages/RequestCallConfirmationScreen.js
+++ b/src/pages/RequestCallConfirmationScreen.js
@@ -36,7 +36,7 @@ const RequestCallConfirmationScreen = props => (
             <Button
                 success
                 text={props.translate('requestCallConfirmationScreen.gotIt')}
-                style={styles.mt6}
+                style={[styles.mt6, {paddingBottom: props.paddingBottom}]}
                 pressOnEnter
                 onPress={() => Navigation.goBack()}
             />
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index b46a4ecfc5b0..24fe64b4a36d 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -245,77 +245,83 @@ class RequestCallPage extends Component {
         const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
 
         return (
-            <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('requestCallPage.title')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                {this.props.requestCallForm.didRequestCallSucceed
-                    ? (
-                        <RequestCallConfirmationScreen />
-                    ) : (
-                        <Form
-                            formID={ONYXKEYS.FORMS.REQUEST_CALL_FORM}
-                            validate={this.validate}
-                            onSubmit={this.onSubmit}
-                            submitButtonText={this.props.translate('requestCallPage.callMe')}
-                            style={[styles.flexGrow1, styles.mh5]}
-                        >
-                            <Section
-                                title={this.props.translate('requestCallPage.subtitle')}
-                                icon={Illustrations.ConciergeBubble}
-                                containerStyles={[styles.callRequestSection]}
-                            >
-                                <Text style={[styles.mv3]}>
-                                    {this.props.translate('requestCallPage.description')}
-                                </Text>
-                            </Section>
-                            <TextInput
-                                inputID="firstName"
-                                defaultValue={firstName}
-                                label={this.props.translate('common.firstName')}
-                                name="fname"
-                                placeholder={this.props.translate('profilePage.john')}
-                                containerStyles={[styles.mt4]}
-                            />
-                            <TextInput
-                                inputID="lastName"
-                                defaultValue={lastName}
-                                label={this.props.translate('common.lastName')}
-                                name="lname"
-                                placeholder={this.props.translate('profilePage.doe')}
-                                containerStyles={[styles.mt4]}
-                            />
-                            <TextInput
-                                inputID="phoneNumber"
-                                defaultValue={this.getPhoneNumber()}
-                                label={this.props.translate('common.phoneNumber')}
-                                name="phone"
-                                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                                autoCorrect={false}
-                                placeholder="2109400803"
-                                containerStyles={[styles.mt4]}
-                            />
-                            <TextInput
-                                inputID="phoneNumberExtension"
-                                label={this.props.translate('requestCallPage.phoneNumberExtension')}
-                                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                                autoCompleteType="off"
-                                autoCorrect={false}
-                                placeholder="100"
-                                containerStyles={[styles.mt4]}
-                            />
-                            {User.isBlockedFromConcierge(this.props.blockedFromConcierge) ? (
-                                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt4]}>
-                                    <Icon src={Expensicons.Exclamation} fill={colors.yellow} />
-                                    <Text style={[styles.mutedTextLabel, styles.ml2, styles.flex1]}>{this.props.translate('requestCallPage.blockedFromConcierge')}</Text>
-                                </View>
-                            )
-                                : <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>}
-                        </Form>
-                    )}
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
+                {({paddingBottom}) => (
+                    <>
+                        <HeaderWithCloseButton
+                            title={this.props.translate('requestCallPage.title')}
+                            shouldShowBackButton
+                            onBackButtonPress={() => Navigation.goBack()}
+                            onCloseButtonPress={() => Navigation.dismissModal(true)}
+                        />
+                        {this.props.requestCallForm.didRequestCallSucceed
+                            ? (
+                                <RequestCallConfirmationScreen paddingBottom={paddingBottom} />
+                            ) : (
+                                <Form
+                                    formID={ONYXKEYS.FORMS.REQUEST_CALL_FORM}
+                                    validate={this.validate}
+                                    onSubmit={this.onSubmit}
+                                    submitButtonText={this.props.translate('requestCallPage.callMe')}
+                                    style={[styles.flexGrow1, styles.mh5, {paddingBottom}]}
+                                >
+                                    <Section
+                                        title={this.props.translate('requestCallPage.subtitle')}
+                                        icon={Illustrations.ConciergeBubble}
+                                        containerStyles={[styles.callRequestSection]}
+                                    >
+                                        <Text style={[styles.mv3]}>
+                                            {this.props.translate('requestCallPage.description')}
+                                        </Text>
+                                    </Section>
+                                    <TextInput
+                                        inputID="firstName"
+                                        defaultValue={firstName}
+                                        label={this.props.translate('common.firstName')}
+                                        name="fname"
+                                        placeholder={this.props.translate('profilePage.john')}
+                                        containerStyles={[styles.mt4]}
+                                    />
+                                    <TextInput
+                                        inputID="lastName"
+                                        defaultValue={lastName}
+                                        label={this.props.translate('common.lastName')}
+                                        name="lname"
+                                        placeholder={this.props.translate('profilePage.doe')}
+                                        containerStyles={[styles.mt4]}
+                                    />
+                                    <TextInput
+                                        inputID="phoneNumber"
+                                        defaultValue={this.getPhoneNumber()}
+                                        label={this.props.translate('common.phoneNumber')}
+                                        name="phone"
+                                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                                        autoCorrect={false}
+                                        placeholder="2109400803"
+                                        containerStyles={[styles.mt4]}
+                                    />
+                                    <TextInput
+                                        inputID="phoneNumberExtension"
+                                        label={this.props.translate('requestCallPage.phoneNumberExtension')}
+                                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                                        autoCompleteType="off"
+                                        autoCorrect={false}
+                                        placeholder="100"
+                                        containerStyles={[styles.mt4]}
+                                    />
+                                    {User.isBlockedFromConcierge(this.props.blockedFromConcierge) ? (
+                                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt4]}>
+                                            <Icon src={Expensicons.Exclamation} fill={colors.yellow} />
+                                            <Text style={[styles.mutedTextLabel, styles.ml2, styles.flex1]}>{this.props.translate('requestCallPage.blockedFromConcierge')}</Text>
+                                        </View>
+                                    )
+                                        : <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>}
+                                </Form>
+                            )}
+                    </>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index 2f9bb1453094..a8151e880914 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -396,8 +396,10 @@ class IOUModal extends Component {
         const currentStep = this.steps[this.state.currentStepIndex];
         const reportID = lodashGet(this.props, 'route.params.reportID', '');
         return (
-            <ScreenWrapper>
-                {({didScreenTransitionEnd}) => (
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
+                {({didScreenTransitionEnd, paddingBottom}) => (
                     <>
                         <View style={[styles.pRelative, styles.flex1]}>
                             {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
@@ -406,7 +408,7 @@ class IOUModal extends Component {
                                     {currentStep === Steps.IOUAmount && (
                                         <AnimatedStep
                                             direction={this.getDirection()}
-                                            style={[styles.flex1]}
+                                            style={[styles.flex1, {paddingBottom}]}
                                         >
                                             {this.renderHeader()}
                                             <IOUAmountPage
@@ -433,12 +435,13 @@ class IOUModal extends Component {
                                                 hasMultipleParticipants={this.props.hasMultipleParticipants}
                                                 onAddParticipants={this.addParticipants}
                                                 onStepComplete={this.navigateToNextStep}
+                                                paddingBottom={paddingBottom}
                                             />
                                         </AnimatedStep>
                                     )}
                                     {currentStep === Steps.IOUConfirm && (
                                         <AnimatedStep
-                                            style={[styles.flex1]}
+                                            style={[styles.flex1, {paddingBottom}]}
                                             direction={this.getDirection()}
                                         >
                                             {this.renderHeader()}
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
index e87c4ac9832d..28f86913c00e 100644
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
@@ -63,6 +63,7 @@ const IOUParticipantsPage = (props) => {
                 onStepComplete={props.onStepComplete}
                 participants={props.participants}
                 onAddParticipants={props.onAddParticipants}
+                paddingBottom={props.paddingBottom}
             />
         )
         : (
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
index 68ec0fb3e9be..f438d931eb0e 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
@@ -210,7 +210,7 @@ class IOUParticipantsSplit extends Component {
         );
         return (
             <>
-                <View style={[styles.flex1, styles.w100]}>
+                <View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? {paddingBottom: this.props.paddingBottom} : {})]}>
                     <Text style={[styles.formLabel, styles.pt3, styles.ph5]}>
                         {this.props.translate('common.to')}
                     </Text>
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index 0816075726f3..d4ebbb615fbc 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -105,36 +105,40 @@ class WorkspacePageWithSections extends React.Component {
         const policyName = lodashGet(this.props.policy, 'name');
 
         return (
-            <ScreenWrapper>
-                <FullPageNotFoundView
-                    shouldShow={_.isEmpty(this.props.policy)}
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
-                >
-                    <HeaderWithCloseButton
-                        title={this.props.headerText}
-                        subtitle={policyName}
-                        shouldShowGetAssistanceButton
-                        guidesCallTaskID={this.props.guidesCallTaskID}
-                        shouldShowBackButton
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                    />
-                    {this.props.shouldUseScrollView
-                        ? (
-                            <ScrollView
-                                keyboardShouldPersistTaps="handled"
-                                style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
-                            >
-                                <View style={[styles.w100, styles.flex1]}>
-
-                                    {this.props.children(hasVBA, policyID, isUsingECard)}
-
-                                </View>
-                            </ScrollView>
-                        )
-                        : this.props.children(hasVBA, policyID, isUsingECard)}
-                    {this.props.footer}
-                </FullPageNotFoundView>
+            <ScreenWrapper
+                includePaddingBottom={false}
+            >
+                {({paddingBottom}) => (
+                    <FullPageNotFoundView
+                        shouldShow={_.isEmpty(this.props.policy)}
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                    >
+                        <HeaderWithCloseButton
+                            title={this.props.headerText}
+                            subtitle={policyName}
+                            shouldShowGetAssistanceButton
+                            guidesCallTaskID={this.props.guidesCallTaskID}
+                            shouldShowBackButton
+                            onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
+                            onCloseButtonPress={() => Navigation.dismissModal()}
+                        />
+                        {this.props.shouldUseScrollView
+                            ? (
+                                <ScrollView
+                                    keyboardShouldPersistTaps="handled"
+                                    style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
+                                >
+                                    <View style={[styles.w100, styles.flex1]}>
+
+                                        {this.props.children(hasVBA, policyID, isUsingECard, paddingBottom)}
+
+                                    </View>
+                                </ScrollView>
+                            )
+                            : this.props.children(hasVBA, policyID, isUsingECard, paddingBottom)}
+                        {this.props.footer}
+                    </FullPageNotFoundView>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index d890a3996dd2..7d50b013156e 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -76,11 +76,12 @@ class WorkspaceSettingsPage extends React.Component {
                 route={this.props.route}
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
             >
-                {hasVBA => (
+                {/* eslint-disable-next-line no-unused-vars */}
+                {(hasVBA, _policyID, _isUsingECard, paddingBottom) => (
                     <Form
                         formID={ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM}
                         submitButtonText={this.props.translate('workspace.editor.save')}
-                        style={[styles.mh5, styles.mt5, styles.flexGrow1]}
+                        style={[styles.mh5, styles.mt5, styles.flexGrow1, {paddingBottom}]}
                         validate={this.validate}
                         onSubmit={this.submit}
                         enabledWhenOffline

From 68c20aaed4a99caf3e300334c387c45576aa5113 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 14 Dec 2022 12:15:36 -1000
Subject: [PATCH 03/14] Try to clean things up by specifying when a form should
 include the padding bottom

---
 src/components/Form.js                        |  77 +++----
 src/components/SafeAreaConsumer.js            |  26 +++
 src/components/ScreenWrapper/index.js         |  12 +-
 .../BankAccountManualStep.js                  |   2 +-
 .../BankAccountPlaidStep.js                   |   3 +-
 src/pages/ReimbursementAccount/CompanyStep.js |   3 +-
 .../ReimbursementAccountPage.js               |  53 ++---
 .../ReimbursementAccount/RequestorStep.js     |   3 +-
 src/pages/RequestCallConfirmationScreen.js    |  19 +-
 src/pages/RequestCallPage.js                  | 149 ++++++-------
 src/pages/iou/IOUModal.js                     |   7 +-
 .../IOUParticipantsPage.js                    |   1 -
 .../IOUParticipantsSplit.js                   |  45 ++--
 src/pages/settings/Profile/ProfilePage.js     | 207 +++++++++---------
 .../settings/Security/CloseAccountPage.js     |  99 ++++-----
 .../workspace/WorkspacePageWithSections.js    |  64 +++---
 src/pages/workspace/WorkspaceSettingsPage.js  |   6 +-
 17 files changed, 393 insertions(+), 383 deletions(-)
 create mode 100644 src/components/SafeAreaConsumer.js

diff --git a/src/components/Form.js b/src/components/Form.js
index a6320fe04b74..26fe03a46621 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -10,6 +10,7 @@ import * as FormActions from '../libs/actions/FormActions';
 import * as ErrorUtils from '../libs/ErrorUtils';
 import styles from '../styles/styles';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
+import SafeAreaConsumer from './SafeAreaConsumer';
 
 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -244,43 +245,45 @@ class Form extends React.Component {
 
     render() {
         return (
-            <>
-                <ScrollView
-                    style={[styles.w100, styles.flex1]}
-                    contentContainerStyle={styles.flexGrow1}
-                    keyboardShouldPersistTaps="handled"
-                    ref={el => this.form = el}
-                >
-                    <View style={[this.props.style]}>
-                        {this.childrenWrapperWithProps(this.props.children)}
-                        {this.props.isSubmitButtonVisible && (
-                        <FormAlertWithSubmitButton
-                            buttonText={this.props.submitButtonText}
-                            isAlertVisible={_.size(this.state.errors) > 0 || Boolean(this.getErrorMessage()) || !_.isEmpty(this.props.formState.errorFields)}
-                            isLoading={this.props.formState.isLoading}
-                            message={_.isEmpty(this.props.formState.errorFields) ? this.getErrorMessage() : null}
-                            onSubmit={this.submit}
-                            onFixTheErrorsLinkPressed={() => {
-                                const errors = !_.isEmpty(this.state.errors) ? this.state.errors : this.props.formState.errorFields;
-                                const focusKey = _.find(_.keys(this.inputRefs), key => _.keys(errors).includes(key));
-                                const focusInput = this.inputRefs[focusKey];
-                                if (focusInput.focus && typeof focusInput.focus === 'function') {
-                                    focusInput.focus();
-                                }
-
-                                // We substract 10 to scroll slightly above the input
-                                if (focusInput.measureLayout && typeof focusInput.measureLayout === 'function') {
-                                    focusInput.measureLayout(this.form, (x, y) => this.form.scrollTo({y: y - 10, animated: false}));
-                                }
-                            }}
-                            containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
-                            enabledWhenOffline={this.props.enabledWhenOffline}
-                            isDangerousAction={this.props.isDangerousAction}
-                        />
-                        )}
-                    </View>
-                </ScrollView>
-            </>
+            <SafeAreaConsumer>
+                {({paddingBottomStyle}) => (
+                    <ScrollView
+                        style={[styles.w100, styles.flex1]}
+                        contentContainerStyle={styles.flexGrow1}
+                        keyboardShouldPersistTaps="handled"
+                        ref={el => this.form = el}
+                    >
+                        <View style={[this.props.style, this.props.includeSafeAreaBottomPadding ? paddingBottomStyle : {}]}>
+                            {this.childrenWrapperWithProps(this.props.children)}
+                            {this.props.isSubmitButtonVisible && (
+                            <FormAlertWithSubmitButton
+                                buttonText={this.props.submitButtonText}
+                                isAlertVisible={_.size(this.state.errors) > 0 || Boolean(this.getErrorMessage()) || !_.isEmpty(this.props.formState.errorFields)}
+                                isLoading={this.props.formState.isLoading}
+                                message={_.isEmpty(this.props.formState.errorFields) ? this.getErrorMessage() : null}
+                                onSubmit={this.submit}
+                                onFixTheErrorsLinkPressed={() => {
+                                    const errors = !_.isEmpty(this.state.errors) ? this.state.errors : this.props.formState.errorFields;
+                                    const focusKey = _.find(_.keys(this.inputRefs), key => _.keys(errors).includes(key));
+                                    const focusInput = this.inputRefs[focusKey];
+                                    if (focusInput.focus && typeof focusInput.focus === 'function') {
+                                        focusInput.focus();
+                                    }
+
+                                    // We substract 10 to scroll slightly above the input
+                                    if (focusInput.measureLayout && typeof focusInput.measureLayout === 'function') {
+                                        focusInput.measureLayout(this.form, (x, y) => this.form.scrollTo({y: y - 10, animated: false}));
+                                    }
+                                }}
+                                containerStyles={[styles.mh0, styles.mt5, styles.flex1]}
+                                enabledWhenOffline={this.props.enabledWhenOffline}
+                                isDangerousAction={this.props.isDangerousAction}
+                            />
+                            )}
+                        </View>
+                    </ScrollView>
+                )}
+            </SafeAreaConsumer>
         );
     }
 }
diff --git a/src/components/SafeAreaConsumer.js b/src/components/SafeAreaConsumer.js
new file mode 100644
index 000000000000..39c62211716e
--- /dev/null
+++ b/src/components/SafeAreaConsumer.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import * as StyleUtils from '../styles/StyleUtils';
+
+const propTypes = {
+    /** Children to render. */
+    children: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.node,
+    ]).isRequired,
+};
+
+const SafeAreaConsumer = props => (
+    <SafeAreaInsetsContext.Consumer>
+        {(insets) => {
+            const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+            return props.children({
+                paddingTop, paddingBottom, insets, paddingBottomStyle: {paddingBottom},
+            });
+        }}
+    </SafeAreaInsetsContext.Consumer>
+);
+
+SafeAreaConsumer.displayName = 'SafeAreaConsumer';
+SafeAreaConsumer.propTypes = propTypes;
+export default SafeAreaConsumer;
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index dacd915a0cb0..2d50f0c1e5d1 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -1,6 +1,5 @@
 import {View} from 'react-native';
 import React from 'react';
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import KeyboardAvoidingView from '../KeyboardAvoidingView';
@@ -8,7 +7,6 @@ import CONST from '../../CONST';
 import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import Navigation from '../../libs/Navigation/Navigation';
 import onScreenTransitionEnd from '../../libs/onScreenTransitionEnd';
-import * as StyleUtils from '../../styles/StyleUtils';
 import styles from '../../styles/styles';
 import HeaderGap from '../HeaderGap';
 import OfflineIndicator from '../OfflineIndicator';
@@ -18,6 +16,7 @@ import withWindowDimensions from '../withWindowDimensions';
 import ONYXKEYS from '../../ONYXKEYS';
 import {withNetwork} from '../OnyxProvider';
 import {propTypes, defaultProps} from './propTypes';
+import SafeAreaConsumer from '../SafeAreaConsumer';
 
 class ScreenWrapper extends React.Component {
     constructor(props) {
@@ -67,9 +66,8 @@ class ScreenWrapper extends React.Component {
 
     render() {
         return (
-            <SafeAreaInsetsContext.Consumer>
-                {(insets) => {
-                    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+            <SafeAreaConsumer>
+                {({insets, paddingTop, paddingBottom}) => {
                     const paddingStyle = {};
 
                     if (this.props.includePaddingTop) {
@@ -95,7 +93,7 @@ class ScreenWrapper extends React.Component {
                                     _.isFunction(this.props.children)
                                         ? this.props.children({
                                             insets,
-                                            paddingBottom,
+                                            safeAreaPaddingStyle: {paddingBottom},
                                             didScreenTransitionEnd: this.state.didScreenTransitionEnd,
                                         })
                                         : this.props.children
@@ -107,7 +105,7 @@ class ScreenWrapper extends React.Component {
                         </View>
                     );
                 }}
-            </SafeAreaInsetsContext.Consumer>
+            </SafeAreaConsumer>
         );
     }
 }
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 143693758ec3..21223d58cb58 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -88,7 +88,7 @@ class BankAccountManualStep extends React.Component {
                     onSubmit={this.submit}
                     validate={this.validate}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
-                    style={[styles.mh5, styles.flexGrow1, {paddingBottom: this.props.paddingBottom}]}
+                    includeSafeAreaBottomPadding
                 >
                     <Text style={[styles.mb5]}>
                         {this.props.translate('bankAccount.checkHelpLine')}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 93b65b2414f4..735a1438048c 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -80,8 +80,9 @@ class BankAccountPlaidStep extends React.Component {
                     validate={() => ({})}
                     onSubmit={this.submit}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
-                    style={[styles.mh5, styles.flexGrow1, {paddingBottom: this.props.paddingBottom}]}
+                    style={[styles.mh5, styles.flexGrow1]}
                     isSubmitButtonVisible={Boolean(selectedPlaidAccountID)}
+                    includeSafeAreaBottomPadding
                 >
                     <AddPlaidBankAccount
                         text={this.props.translate('bankAccount.plaidBodyCopy')}
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 239e5f8e93f2..f62bbed45e17 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -152,7 +152,8 @@ class CompanyStep extends React.Component {
                     validate={this.validate}
                     onSubmit={this.submit}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
-                    style={[styles.ph5, styles.flexGrow1, {paddingBottom: this.props.paddingBottom}]}
+                    style={[styles.ph5, styles.flexGrow1]}
+                    includeSafeAreaBottomPadding
                 >
                     <Text>{this.props.translate('companyStep.subtitle')}</Text>
                     <TextInput
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 62a2b528b5f3..7d07f2fc46f3 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -240,37 +240,30 @@ class ReimbursementAccountPage extends React.Component {
             );
         }
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
-                {({paddingBottom}) => (
-                    <>
-                        {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
-                            <BankAccountStep
-                                receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
-                                plaidLinkOAuthToken={this.props.plaidLinkToken}
-                                onSubStepBack={() => (hasInProgressVBBA ? this.setState({shouldShowContinueSetupButton: true}) : BankAccounts.setBankAccountSubStep(null))}
-                                paddingBottom={paddingBottom}
-                            />
-                        )}
-                        {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && (
-                            <CompanyStep paddingBottom={paddingBottom} />
-                        )}
-                        {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
-                            <RequestorStep paddingBottom={paddingBottom} />
-                        )}
-                        {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && (
-                            <ACHContractStep companyName={achData.companyName} paddingBottom={paddingBottom} />
-                        )}
-                        {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (
-                            <ValidationStep />
-                        )}
-                        {currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE && (
-                            <EnableStep />
-                        )}
-                        <WorkspaceResetBankAccountModal />
-                    </>
+            <ScreenWrapper includePaddingBottom={false}>
+                {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
+                    <BankAccountStep
+                        receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+                        plaidLinkOAuthToken={this.props.plaidLinkToken}
+                        onSubStepBack={() => (hasInProgressVBBA ? this.setState({shouldShowContinueSetupButton: true}) : BankAccounts.setBankAccountSubStep(null))}
+                    />
+                )}
+                {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && (
+                    <CompanyStep />
+                )}
+                {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
+                    <RequestorStep />
+                )}
+                {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && (
+                    <ACHContractStep companyName={achData.companyName} />
+                )}
+                {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (
+                    <ValidationStep />
+                )}
+                {currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE && (
+                    <EnableStep />
                 )}
+                <WorkspaceResetBankAccountModal />
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index f3542687901f..9485e2a102b4 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -162,7 +162,8 @@ class RequestorStep extends React.Component {
                         submitButtonText={this.props.translate('common.saveAndContinue')}
                         validate={this.validate}
                         onSubmit={this.submit}
-                        style={[styles.mh5, styles.flexGrow1, {paddingBottom: this.props.paddingBottom}]}
+                        style={[styles.mh5, styles.flexGrow1]}
+                        includeSafeAreaPaddingBottom
                     >
                         <Text>{this.props.translate('requestorStep.subtitle')}</Text>
                         <View style={[styles.mb5, styles.mt1, styles.dFlex, styles.flexRow]}>
diff --git a/src/pages/RequestCallConfirmationScreen.js b/src/pages/RequestCallConfirmationScreen.js
index a723119a2327..79510933151b 100644
--- a/src/pages/RequestCallConfirmationScreen.js
+++ b/src/pages/RequestCallConfirmationScreen.js
@@ -7,6 +7,7 @@ import confettiPop from '../../assets/images/confetti-pop.gif';
 import Button from '../components/Button';
 import FixedFooter from '../components/FixedFooter';
 import Navigation from '../libs/Navigation/Navigation';
+import SafeAreaConsumer from '../components/SafeAreaConsumer';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -33,13 +34,17 @@ const RequestCallConfirmationScreen = props => (
             </Text>
         </View>
         <FixedFooter>
-            <Button
-                success
-                text={props.translate('requestCallConfirmationScreen.gotIt')}
-                style={[styles.mt6, {paddingBottom: props.paddingBottom}]}
-                pressOnEnter
-                onPress={() => Navigation.goBack()}
-            />
+            <SafeAreaConsumer>
+                {({paddingBottomStyle}) => (
+                    <Button
+                        success
+                        text={props.translate('requestCallConfirmationScreen.gotIt')}
+                        style={[styles.mt6, paddingBottomStyle]}
+                        pressOnEnter
+                        onPress={() => Navigation.goBack()}
+                    />
+                )}
+            </SafeAreaConsumer>
         </FixedFooter>
     </>
 );
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 24fe64b4a36d..55cbb3a69f24 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -245,83 +245,78 @@ class RequestCallPage extends Component {
         const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
 
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
-                {({paddingBottom}) => (
-                    <>
-                        <HeaderWithCloseButton
-                            title={this.props.translate('requestCallPage.title')}
-                            shouldShowBackButton
-                            onBackButtonPress={() => Navigation.goBack()}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
-                        />
-                        {this.props.requestCallForm.didRequestCallSucceed
-                            ? (
-                                <RequestCallConfirmationScreen paddingBottom={paddingBottom} />
-                            ) : (
-                                <Form
-                                    formID={ONYXKEYS.FORMS.REQUEST_CALL_FORM}
-                                    validate={this.validate}
-                                    onSubmit={this.onSubmit}
-                                    submitButtonText={this.props.translate('requestCallPage.callMe')}
-                                    style={[styles.flexGrow1, styles.mh5, {paddingBottom}]}
-                                >
-                                    <Section
-                                        title={this.props.translate('requestCallPage.subtitle')}
-                                        icon={Illustrations.ConciergeBubble}
-                                        containerStyles={[styles.callRequestSection]}
-                                    >
-                                        <Text style={[styles.mv3]}>
-                                            {this.props.translate('requestCallPage.description')}
-                                        </Text>
-                                    </Section>
-                                    <TextInput
-                                        inputID="firstName"
-                                        defaultValue={firstName}
-                                        label={this.props.translate('common.firstName')}
-                                        name="fname"
-                                        placeholder={this.props.translate('profilePage.john')}
-                                        containerStyles={[styles.mt4]}
-                                    />
-                                    <TextInput
-                                        inputID="lastName"
-                                        defaultValue={lastName}
-                                        label={this.props.translate('common.lastName')}
-                                        name="lname"
-                                        placeholder={this.props.translate('profilePage.doe')}
-                                        containerStyles={[styles.mt4]}
-                                    />
-                                    <TextInput
-                                        inputID="phoneNumber"
-                                        defaultValue={this.getPhoneNumber()}
-                                        label={this.props.translate('common.phoneNumber')}
-                                        name="phone"
-                                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                                        autoCorrect={false}
-                                        placeholder="2109400803"
-                                        containerStyles={[styles.mt4]}
-                                    />
-                                    <TextInput
-                                        inputID="phoneNumberExtension"
-                                        label={this.props.translate('requestCallPage.phoneNumberExtension')}
-                                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                                        autoCompleteType="off"
-                                        autoCorrect={false}
-                                        placeholder="100"
-                                        containerStyles={[styles.mt4]}
-                                    />
-                                    {User.isBlockedFromConcierge(this.props.blockedFromConcierge) ? (
-                                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt4]}>
-                                            <Icon src={Expensicons.Exclamation} fill={colors.yellow} />
-                                            <Text style={[styles.mutedTextLabel, styles.ml2, styles.flex1]}>{this.props.translate('requestCallPage.blockedFromConcierge')}</Text>
-                                        </View>
-                                    )
-                                        : <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>}
-                                </Form>
-                            )}
-                    </>
-                )}
+            <ScreenWrapper includePaddingBottom={false}>
+                <HeaderWithCloseButton
+                    title={this.props.translate('requestCallPage.title')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.goBack()}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                {this.props.requestCallForm.didRequestCallSucceed
+                    ? (
+                        <RequestCallConfirmationScreen />
+                    ) : (
+                        <Form
+                            formID={ONYXKEYS.FORMS.REQUEST_CALL_FORM}
+                            validate={this.validate}
+                            onSubmit={this.onSubmit}
+                            submitButtonText={this.props.translate('requestCallPage.callMe')}
+                            style={[styles.flexGrow1, styles.mh5]}
+                            includeSafeAreaBottomPadding
+                        >
+                            <Section
+                                title={this.props.translate('requestCallPage.subtitle')}
+                                icon={Illustrations.ConciergeBubble}
+                                containerStyles={[styles.callRequestSection]}
+                            >
+                                <Text style={[styles.mv3]}>
+                                    {this.props.translate('requestCallPage.description')}
+                                </Text>
+                            </Section>
+                            <TextInput
+                                inputID="firstName"
+                                defaultValue={firstName}
+                                label={this.props.translate('common.firstName')}
+                                name="fname"
+                                placeholder={this.props.translate('profilePage.john')}
+                                containerStyles={[styles.mt4]}
+                            />
+                            <TextInput
+                                inputID="lastName"
+                                defaultValue={lastName}
+                                label={this.props.translate('common.lastName')}
+                                name="lname"
+                                placeholder={this.props.translate('profilePage.doe')}
+                                containerStyles={[styles.mt4]}
+                            />
+                            <TextInput
+                                inputID="phoneNumber"
+                                defaultValue={this.getPhoneNumber()}
+                                label={this.props.translate('common.phoneNumber')}
+                                name="phone"
+                                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                                autoCorrect={false}
+                                placeholder="2109400803"
+                                containerStyles={[styles.mt4]}
+                            />
+                            <TextInput
+                                inputID="phoneNumberExtension"
+                                label={this.props.translate('requestCallPage.phoneNumberExtension')}
+                                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                                autoCompleteType="off"
+                                autoCorrect={false}
+                                placeholder="100"
+                                containerStyles={[styles.mt4]}
+                            />
+                            {User.isBlockedFromConcierge(this.props.blockedFromConcierge) ? (
+                                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt4]}>
+                                    <Icon src={Expensicons.Exclamation} fill={colors.yellow} />
+                                    <Text style={[styles.mutedTextLabel, styles.ml2, styles.flex1]}>{this.props.translate('requestCallPage.blockedFromConcierge')}</Text>
+                                </View>
+                            )
+                                : <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>}
+                        </Form>
+                    )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index a8151e880914..68646b6674f9 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -399,7 +399,7 @@ class IOUModal extends Component {
             <ScreenWrapper
                 includePaddingBottom={false}
             >
-                {({didScreenTransitionEnd, paddingBottom}) => (
+                {({didScreenTransitionEnd, safeAreaPaddingStyle}) => (
                     <>
                         <View style={[styles.pRelative, styles.flex1]}>
                             {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
@@ -408,7 +408,7 @@ class IOUModal extends Component {
                                     {currentStep === Steps.IOUAmount && (
                                         <AnimatedStep
                                             direction={this.getDirection()}
-                                            style={[styles.flex1, {paddingBottom}]}
+                                            style={[styles.flex1, safeAreaPaddingStyle]}
                                         >
                                             {this.renderHeader()}
                                             <IOUAmountPage
@@ -435,13 +435,12 @@ class IOUModal extends Component {
                                                 hasMultipleParticipants={this.props.hasMultipleParticipants}
                                                 onAddParticipants={this.addParticipants}
                                                 onStepComplete={this.navigateToNextStep}
-                                                paddingBottom={paddingBottom}
                                             />
                                         </AnimatedStep>
                                     )}
                                     {currentStep === Steps.IOUConfirm && (
                                         <AnimatedStep
-                                            style={[styles.flex1, {paddingBottom}]}
+                                            style={[styles.flex1, safeAreaPaddingStyle]}
                                             direction={this.getDirection()}
                                         >
                                             {this.renderHeader()}
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
index 28f86913c00e..e87c4ac9832d 100644
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
@@ -63,7 +63,6 @@ const IOUParticipantsPage = (props) => {
                 onStepComplete={props.onStepComplete}
                 participants={props.participants}
                 onAddParticipants={props.onAddParticipants}
-                paddingBottom={props.paddingBottom}
             />
         )
         : (
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
index f438d931eb0e..053cd575ffe4 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
@@ -13,6 +13,7 @@ import compose from '../../../../libs/compose';
 import Text from '../../../../components/Text';
 import personalDetailsPropType from '../../../personalDetailsPropType';
 import reportPropTypes from '../../../reportPropTypes';
+import SafeAreaConsumer from '../../../../components/SafeAreaConsumer';
 
 const propTypes = {
     /** Beta features list */
@@ -209,27 +210,29 @@ class IOUParticipantsSplit extends Component {
             maxParticipantsReached,
         );
         return (
-            <>
-                <View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? {paddingBottom: this.props.paddingBottom} : {})]}>
-                    <Text style={[styles.formLabel, styles.pt3, styles.ph5]}>
-                        {this.props.translate('common.to')}
-                    </Text>
-                    <OptionsSelector
-                        canSelectMultipleOptions
-                        sections={sections}
-                        selectedOptions={this.props.participants}
-                        value={this.state.searchTerm}
-                        onSelectRow={this.toggleOption}
-                        onChangeText={this.updateOptionsWithSearchTerm}
-                        headerMessage={headerMessage}
-                        boldStyle
-                        shouldShowConfirmButton
-                        confirmButtonText={this.props.translate('common.next')}
-                        onConfirmSelection={this.finalizeParticipants}
-                        placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
-                    />
-                </View>
-            </>
+            <SafeAreaConsumer>
+                {({paddingBottomStyle}) => (
+                    <View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? paddingBottomStyle : {})]}>
+                        <Text style={[styles.formLabel, styles.pt3, styles.ph5]}>
+                            {this.props.translate('common.to')}
+                        </Text>
+                        <OptionsSelector
+                            canSelectMultipleOptions
+                            sections={sections}
+                            selectedOptions={this.props.participants}
+                            value={this.state.searchTerm}
+                            onSelectRow={this.toggleOption}
+                            onChangeText={this.updateOptionsWithSearchTerm}
+                            headerMessage={headerMessage}
+                            boldStyle
+                            shouldShowConfirmButton
+                            confirmButtonText={this.props.translate('common.next')}
+                            onConfirmSelection={this.finalizeParticipants}
+                            placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+                        />
+                    </View>
+                )}
+            </SafeAreaConsumer>
         );
     }
 }
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 635b10ab14f0..bc4d2a4020ac 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -221,117 +221,112 @@ class ProfilePage extends Component {
         const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.pronouns;
 
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
-                {({paddingBottom}) => (
-                    <>
-                        <HeaderWithCloseButton
-                            title={this.props.translate('common.profile')}
-                            shouldShowBackButton
-                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
+            <ScreenWrapper includePaddingBottom={false}>
+                <HeaderWithCloseButton
+                    title={this.props.translate('common.profile')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <Form
+                    style={[styles.flexGrow1, styles.ph5]}
+                    formID={ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM}
+                    validate={this.validate}
+                    onSubmit={this.updatePersonalDetails}
+                    submitButtonText={this.props.translate('common.save')}
+                    enabledWhenOffline
+                    includeSafeAreaBottomPadding
+                >
+                    <OfflineWithFeedback
+                        pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
+                        errors={lodashGet(this.props.currentUserPersonalDetails, 'errorFields.avatar', null)}
+                        errorRowStyles={[styles.mt6]}
+                        onClose={PersonalDetails.clearAvatarErrors}
+                    >
+                        <AvatarWithImagePicker
+                            isUsingDefaultAvatar={lodashGet(currentUserDetails, 'avatar', '').includes('/images/avatars/avatar')}
+                            avatarURL={currentUserDetails.avatar}
+                            onImageSelected={PersonalDetails.updateAvatar}
+                            onImageRemoved={PersonalDetails.deleteAvatar}
+                            anchorPosition={styles.createMenuPositionProfile}
+                            size={CONST.AVATAR_SIZE.LARGE}
                         />
-                        <Form
-                            style={[styles.flexGrow1, styles.ph5, {paddingBottom}]}
-                            formID={ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM}
-                            validate={this.validate}
-                            onSubmit={this.updatePersonalDetails}
-                            submitButtonText={this.props.translate('common.save')}
-                            enabledWhenOffline
-                        >
-                            <OfflineWithFeedback
-                                pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
-                                errors={lodashGet(this.props.currentUserPersonalDetails, 'errorFields.avatar', null)}
-                                errorRowStyles={[styles.mt6]}
-                                onClose={PersonalDetails.clearAvatarErrors}
-                            >
-                                <AvatarWithImagePicker
-                                    isUsingDefaultAvatar={lodashGet(currentUserDetails, 'avatar', '').includes('/images/avatars/avatar')}
-                                    avatarURL={currentUserDetails.avatar}
-                                    onImageSelected={PersonalDetails.updateAvatar}
-                                    onImageRemoved={PersonalDetails.deleteAvatar}
-                                    anchorPosition={styles.createMenuPositionProfile}
-                                    size={CONST.AVATAR_SIZE.LARGE}
-                                />
-                            </OfflineWithFeedback>
-                            <Text style={[styles.mt6, styles.mb6]}>
-                                {this.props.translate('profilePage.tellUsAboutYourself')}
-                            </Text>
-
-                            <View style={[styles.flexRow, styles.mt4, styles.mb4]}>
-                                <View style={styles.flex1}>
-                                    <TextInput
-                                        inputID="firstName"
-                                        name="fname"
-                                        label={this.props.translate('common.firstName')}
-                                        defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
-                                        placeholder={this.props.translate('profilePage.john')}
-                                    />
-                                </View>
-                                <View style={[styles.flex1, styles.ml2]}>
-                                    <TextInput
-                                        inputID="lastName"
-                                        name="lname"
-                                        label={this.props.translate('common.lastName')}
-                                        defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
-                                        placeholder={this.props.translate('profilePage.doe')}
-                                    />
-                                </View>
-                            </View>
-                            <View style={styles.mb6}>
-                                <Picker
-                                    inputID="pronouns"
-                                    label={this.props.translate('profilePage.preferredPronouns')}
-                                    items={pronounsList}
-                                    placeholder={{
-                                        value: '',
-                                        label: this.props.translate('profilePage.selectYourPronouns'),
-                                    }}
-                                    defaultValue={pronounsPickerValue}
-                                    onValueChange={this.setPronouns}
-                                />
-                                {this.state.hasSelfSelectedPronouns && (
-                                    <View style={styles.mt2}>
-                                        <TextInput
-                                            inputID="selfSelectedPronoun"
-                                            defaultValue={this.pronouns}
-                                            placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
-                                        />
-                                    </View>
-                                )}
-                            </View>
-                            <LoginField
-                                label={this.props.translate('profilePage.emailAddress')}
-                                type="email"
-                                login={this.state.logins.email}
-                                defaultValue={this.state.logins.email}
+                    </OfflineWithFeedback>
+                    <Text style={[styles.mt6, styles.mb6]}>
+                        {this.props.translate('profilePage.tellUsAboutYourself')}
+                    </Text>
+
+                    <View style={[styles.flexRow, styles.mt4, styles.mb4]}>
+                        <View style={styles.flex1}>
+                            <TextInput
+                                inputID="firstName"
+                                name="fname"
+                                label={this.props.translate('common.firstName')}
+                                defaultValue={lodashGet(currentUserDetails, 'firstName', '')}
+                                placeholder={this.props.translate('profilePage.john')}
                             />
-                            <LoginField
-                                label={this.props.translate('common.phoneNumber')}
-                                type="phone"
-                                login={this.state.logins.phone}
-                                defaultValue={this.state.logins.phone}
+                        </View>
+                        <View style={[styles.flex1, styles.ml2]}>
+                            <TextInput
+                                inputID="lastName"
+                                name="lname"
+                                label={this.props.translate('common.lastName')}
+                                defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
+                                placeholder={this.props.translate('profilePage.doe')}
                             />
-                            <View style={styles.mb3}>
-                                <Picker
-                                    inputID="timezone"
-                                    label={this.props.translate('profilePage.timezone')}
-                                    items={timezones}
-                                    isDisabled={this.state.isAutomaticTimezone}
-                                    value={this.state.selectedTimezone}
-                                    onValueChange={selectedTimezone => this.setState({selectedTimezone})}
+                        </View>
+                    </View>
+                    <View style={styles.mb6}>
+                        <Picker
+                            inputID="pronouns"
+                            label={this.props.translate('profilePage.preferredPronouns')}
+                            items={pronounsList}
+                            placeholder={{
+                                value: '',
+                                label: this.props.translate('profilePage.selectYourPronouns'),
+                            }}
+                            defaultValue={pronounsPickerValue}
+                            onValueChange={this.setPronouns}
+                        />
+                        {this.state.hasSelfSelectedPronouns && (
+                            <View style={styles.mt2}>
+                                <TextInput
+                                    inputID="selfSelectedPronoun"
+                                    defaultValue={this.pronouns}
+                                    placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
                                 />
                             </View>
-                            <CheckboxWithLabel
-                                inputID="isAutomaticTimezone"
-                                label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
-                                defaultValue={this.state.isAutomaticTimezone}
-                                onValueChange={this.setAutomaticTimezone}
-                            />
-                        </Form>
-                    </>
-                )}
+                        )}
+                    </View>
+                    <LoginField
+                        label={this.props.translate('profilePage.emailAddress')}
+                        type="email"
+                        login={this.state.logins.email}
+                        defaultValue={this.state.logins.email}
+                    />
+                    <LoginField
+                        label={this.props.translate('common.phoneNumber')}
+                        type="phone"
+                        login={this.state.logins.phone}
+                        defaultValue={this.state.logins.phone}
+                    />
+                    <View style={styles.mb3}>
+                        <Picker
+                            inputID="timezone"
+                            label={this.props.translate('profilePage.timezone')}
+                            items={timezones}
+                            isDisabled={this.state.isAutomaticTimezone}
+                            value={this.state.selectedTimezone}
+                            onValueChange={selectedTimezone => this.setState({selectedTimezone})}
+                        />
+                    </View>
+                    <CheckboxWithLabel
+                        inputID="isAutomaticTimezone"
+                        label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
+                        defaultValue={this.state.isAutomaticTimezone}
+                        onValueChange={this.setAutomaticTimezone}
+                    />
+                </Form>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 00071846dfe3..9b4de17f656a 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -60,59 +60,54 @@ class CloseAccountPage extends Component {
     render() {
         const userEmailOrPhone = Str.removeSMSDomain(this.props.session.email);
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
-                {({paddingBottom}) => (
-                    <>
-                        <HeaderWithCloseButton
-                            title={this.props.translate('closeAccountPage.closeAccount')}
-                            shouldShowBackButton
-                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
+            <ScreenWrapper includePaddingBottom={false}>
+                <HeaderWithCloseButton
+                    title={this.props.translate('closeAccountPage.closeAccount')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <Form
+                    formID={ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM}
+                    validate={this.validate}
+                    onSubmit={this.onSubmit}
+                    submitButtonText={this.props.translate('closeAccountPage.closeAccount')}
+                    style={[styles.flexGrow1, styles.mh5]}
+                    isDangerousAction
+                    includeSafeAreaPaddingBottom
+                >
+                    <View style={[styles.flexGrow1]}>
+                        <Text>{this.props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
+                        <TextInput
+                            inputID="reasonForLeaving"
+                            multiline
+                            numberOfLines={6}
+                            textAlignVertical="top"
+                            label={this.props.translate('closeAccountPage.enterMessageHere')}
+                            containerStyles={[styles.mt5, styles.closeAccountMessageInput]}
                         />
-                        <Form
-                            formID={ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM}
-                            validate={this.validate}
-                            onSubmit={this.onSubmit}
-                            submitButtonText={this.props.translate('closeAccountPage.closeAccount')}
-                            style={[styles.flexGrow1, styles.mh5, {paddingBottom}]}
-                            isDangerousAction
-                        >
-                            <View style={[styles.flexGrow1]}>
-                                <Text>{this.props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
-                                <TextInput
-                                    inputID="reasonForLeaving"
-                                    multiline
-                                    numberOfLines={6}
-                                    textAlignVertical="top"
-                                    label={this.props.translate('closeAccountPage.enterMessageHere')}
-                                    containerStyles={[styles.mt5, styles.closeAccountMessageInput]}
-                                />
-                                <Text style={[styles.mt5]}>
-                                    <Text style={[styles.textStrong]}>
-                                        {this.props.translate('closeAccountPage.closeAccountWarning')}
-                                    </Text>
-                                    {' '}
-                                    {this.props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
-                                </Text>
-                                <Text textBreakStrategy="simple" style={[styles.mt5]}>
-                                    <Text style={[styles.textStrong]}>
-                                        {this.props.translate('closeAccountPage.defaultContact')}
-                                    </Text>
-                                    {' '}
-                                    {userEmailOrPhone}
-                                </Text>
-                                <TextInput
-                                    inputID="phoneOrEmail"
-                                    autoCapitalize="none"
-                                    label={this.props.translate('closeAccountPage.enterDefaultContact')}
-                                    containerStyles={[styles.mt5]}
-                                />
-                            </View>
-                        </Form>
-                    </>
-                )}
+                        <Text style={[styles.mt5]}>
+                            <Text style={[styles.textStrong]}>
+                                {this.props.translate('closeAccountPage.closeAccountWarning')}
+                            </Text>
+                            {' '}
+                            {this.props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
+                        </Text>
+                        <Text textBreakStrategy="simple" style={[styles.mt5]}>
+                            <Text style={[styles.textStrong]}>
+                                {this.props.translate('closeAccountPage.defaultContact')}
+                            </Text>
+                            {' '}
+                            {userEmailOrPhone}
+                        </Text>
+                        <TextInput
+                            inputID="phoneOrEmail"
+                            autoCapitalize="none"
+                            label={this.props.translate('closeAccountPage.enterDefaultContact')}
+                            containerStyles={[styles.mt5]}
+                        />
+                    </View>
+                </Form>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index d4ebbb615fbc..6cac7fb61ebd 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -105,40 +105,36 @@ class WorkspacePageWithSections extends React.Component {
         const policyName = lodashGet(this.props.policy, 'name');
 
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
-                {({paddingBottom}) => (
-                    <FullPageNotFoundView
-                        shouldShow={_.isEmpty(this.props.policy)}
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
-                    >
-                        <HeaderWithCloseButton
-                            title={this.props.headerText}
-                            subtitle={policyName}
-                            shouldShowGetAssistanceButton
-                            guidesCallTaskID={this.props.guidesCallTaskID}
-                            shouldShowBackButton
-                            onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
-                            onCloseButtonPress={() => Navigation.dismissModal()}
-                        />
-                        {this.props.shouldUseScrollView
-                            ? (
-                                <ScrollView
-                                    keyboardShouldPersistTaps="handled"
-                                    style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
-                                >
-                                    <View style={[styles.w100, styles.flex1]}>
-
-                                        {this.props.children(hasVBA, policyID, isUsingECard, paddingBottom)}
-
-                                    </View>
-                                </ScrollView>
-                            )
-                            : this.props.children(hasVBA, policyID, isUsingECard, paddingBottom)}
-                        {this.props.footer}
-                    </FullPageNotFoundView>
-                )}
+            <ScreenWrapper includePaddingBottom={false}>
+                <FullPageNotFoundView
+                    shouldShow={_.isEmpty(this.props.policy)}
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                >
+                    <HeaderWithCloseButton
+                        title={this.props.headerText}
+                        subtitle={policyName}
+                        shouldShowGetAssistanceButton
+                        guidesCallTaskID={this.props.guidesCallTaskID}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
+                    />
+                    {this.props.shouldUseScrollView
+                        ? (
+                            <ScrollView
+                                keyboardShouldPersistTaps="handled"
+                                style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
+                            >
+                                <View style={[styles.w100, styles.flex1]}>
+
+                                    {this.props.children(hasVBA, policyID, isUsingECard)}
+
+                                </View>
+                            </ScrollView>
+                        )
+                        : this.props.children(hasVBA, policyID, isUsingECard)}
+                    {this.props.footer}
+                </FullPageNotFoundView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index 7d50b013156e..5c80b0f045cc 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -76,15 +76,15 @@ class WorkspaceSettingsPage extends React.Component {
                 route={this.props.route}
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
             >
-                {/* eslint-disable-next-line no-unused-vars */}
-                {(hasVBA, _policyID, _isUsingECard, paddingBottom) => (
+                {hasVBA => (
                     <Form
                         formID={ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM}
                         submitButtonText={this.props.translate('workspace.editor.save')}
-                        style={[styles.mh5, styles.mt5, styles.flexGrow1, {paddingBottom}]}
+                        style={[styles.mh5, styles.mt5, styles.flexGrow1]}
                         validate={this.validate}
                         onSubmit={this.submit}
                         enabledWhenOffline
+                        includeSafeAreaBottomPadding
                     >
                         <OfflineWithFeedback
                             pendingAction={lodashGet(this.props.policy, 'pendingFields.avatar', null)}

From f6e3a5af3596ec582b99fd8b4f3f210e13a6df72 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 14 Dec 2022 12:40:10 -1000
Subject: [PATCH 04/14] clean up

---
 src/pages/NewChatPage.js                                | 4 +---
 src/pages/ReimbursementAccount/BankAccountManualStep.js | 1 +
 src/pages/ReimbursementAccount/BankAccountStep.js       | 4 ++--
 src/pages/SearchPage.js                                 | 4 +---
 src/pages/iou/IOUModal.js                               | 4 +---
 src/pages/settings/AboutPage/AboutPage.js               | 4 +---
 src/pages/settings/InitialSettingsPage.js               | 4 +---
 src/pages/settings/PreferencesPage.js                   | 4 +---
 src/pages/workspace/WorkspaceInitialPage.js             | 4 +---
 9 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index e5a1f7f4be18..a7447e9ce4d6 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -235,9 +235,7 @@ class NewChatPage extends Component {
             maxParticipantsReached,
         );
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
+            <ScreenWrapper includePaddingBottom={false}>
                 {({didScreenTransitionEnd}) => (
                     <>
                         <HeaderWithCloseButton
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 21223d58cb58..39d27bf113af 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -88,6 +88,7 @@ class BankAccountManualStep extends React.Component {
                     onSubmit={this.submit}
                     validate={this.validate}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
+                    style={[styles.mh5, styles.flexGrow1]}
                     includeSafeAreaBottomPadding
                 >
                     <Text style={[styles.mb5]}>
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index a61c84bde55c..7d1b8d3cdeec 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -77,11 +77,11 @@ const BankAccountStep = (props) => {
     const bankAccountRoute = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.BANK_ACCOUNT}`;
 
     if (subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) {
-        return <BankAccountManualStep onBack={props.onSubStepBack} paddingBottom={props.paddingBottom} />;
+        return <BankAccountManualStep onBack={props.onSubStepBack} />;
     }
 
     if (subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) {
-        return <BankAccountPlaidStep onBack={props.onSubStepBack} paddingBottom={props.paddingBottom} />;
+        return <BankAccountPlaidStep onBack={props.onSubStepBack} />;
     }
 
     return (
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index ed6fab2409c0..8fa76b7278da 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -165,9 +165,7 @@ class SearchPage extends Component {
             this.state.searchValue,
         );
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
+            <ScreenWrapper includePaddingBottom={false}>
                 {({didScreenTransitionEnd}) => (
                     <>
                         <HeaderWithCloseButton
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index 68646b6674f9..629b948d7beb 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -396,9 +396,7 @@ class IOUModal extends Component {
         const currentStep = this.steps[this.state.currentStepIndex];
         const reportID = lodashGet(this.props, 'route.params.reportID', '');
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
+            <ScreenWrapper includePaddingBottom={false}>
                 {({didScreenTransitionEnd, safeAreaPaddingStyle}) => (
                     <>
                         <View style={[styles.pRelative, styles.flex1]}>
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index c8351396e3b5..85f3ff30e771 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -61,9 +61,7 @@ const AboutPage = (props) => {
     ];
 
     return (
-        <ScreenWrapper
-            includePaddingBottom={false}
-        >
+        <ScreenWrapper includePaddingBottom={false}>
             <HeaderWithCloseButton
                 title={props.translate('initialSettingsPage.about')}
                 shouldShowBackButton
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 9505265d753d..e523cf7b5470 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -234,9 +234,7 @@ class InitialSettingsPage extends React.Component {
         }
 
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
+            <ScreenWrapper includePaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('common.settings')}
                     onCloseButtonPress={() => Navigation.dismissModal(true)}
diff --git a/src/pages/settings/PreferencesPage.js b/src/pages/settings/PreferencesPage.js
index 4f7f1661b41a..a246ada321cd 100755
--- a/src/pages/settings/PreferencesPage.js
+++ b/src/pages/settings/PreferencesPage.js
@@ -57,9 +57,7 @@ const PreferencesPage = (props) => {
     };
 
     return (
-        <ScreenWrapper
-            includePaddingBottom={false}
-        >
+        <ScreenWrapper includePaddingBottom={false}>
             <HeaderWithCloseButton
                 title={props.translate('common.preferences')}
                 shouldShowBackButton
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index d70dfcc2810e..dd5113733d1b 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -147,9 +147,7 @@ class WorkspaceInitialPage extends React.Component {
         ];
 
         return (
-            <ScreenWrapper
-                includePaddingBottom={false}
-            >
+            <ScreenWrapper includePaddingBottom={false}>
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}

From 2189f4ecc699e341cda4ce75a0e7d6fdb1c45e69 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 14 Dec 2022 17:32:17 -1000
Subject: [PATCH 05/14] update names

---
 src/components/Form.js                        |  4 +--
 src/components/SafeAreaConsumer.js            |  2 +-
 src/components/ScreenWrapper/index.js         |  8 +++---
 src/components/ScreenWrapper/propTypes.js     |  4 +--
 src/pages/AddPersonalBankAccountPage.js       |  3 ++-
 .../EnablePayments/AdditionalDetailsStep.js   | 27 ++++++++++++-------
 .../EnablePayments/EnablePaymentsPage.js      |  6 ++---
 src/pages/NewChatPage.js                      |  6 ++---
 .../BankAccountManualStep.js                  |  2 +-
 .../BankAccountPlaidStep.js                   |  2 +-
 src/pages/ReimbursementAccount/CompanyStep.js |  2 +-
 .../ReimbursementAccountPage.js               |  2 +-
 src/pages/RequestCallConfirmationScreen.js    |  4 +--
 src/pages/RequestCallPage.js                  |  4 +--
 src/pages/SearchPage.js                       |  2 +-
 .../SidebarScreen/BaseSidebarScreen.js        |  2 +-
 src/pages/iou/IOUCurrencySelection.js         |  2 +-
 src/pages/iou/IOUModal.js                     |  8 +++---
 .../IOUParticipantsSplit.js                   |  4 +--
 src/pages/settings/AboutPage/AboutPage.js     |  2 +-
 src/pages/settings/InitialSettingsPage.js     |  2 +-
 .../settings/Payments/AddDebitCardPage.js     |  3 ++-
 src/pages/settings/PreferencesPage.js         |  2 +-
 src/pages/settings/Profile/ProfilePage.js     |  4 +--
 .../settings/Security/CloseAccountPage.js     |  2 +-
 src/pages/workspace/WorkspaceInitialPage.js   |  2 +-
 src/pages/workspace/WorkspaceMembersPage.js   |  2 +-
 .../workspace/WorkspacePageWithSections.js    |  2 +-
 src/pages/workspace/WorkspaceSettingsPage.js  |  2 +-
 29 files changed, 64 insertions(+), 53 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 26fe03a46621..731d25a45932 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -246,14 +246,14 @@ class Form extends React.Component {
     render() {
         return (
             <SafeAreaConsumer>
-                {({paddingBottomStyle}) => (
+                {({safeAreaPaddingBottomStyle}) => (
                     <ScrollView
                         style={[styles.w100, styles.flex1]}
                         contentContainerStyle={styles.flexGrow1}
                         keyboardShouldPersistTaps="handled"
                         ref={el => this.form = el}
                     >
-                        <View style={[this.props.style, this.props.includeSafeAreaBottomPadding ? paddingBottomStyle : {}]}>
+                        <View style={[this.props.style, this.props.includeSafeAreaPaddingBottom ? safeAreaPaddingBottomStyle : {}]}>
                             {this.childrenWrapperWithProps(this.props.children)}
                             {this.props.isSubmitButtonVisible && (
                             <FormAlertWithSubmitButton
diff --git a/src/components/SafeAreaConsumer.js b/src/components/SafeAreaConsumer.js
index 39c62211716e..607f33b8bdef 100644
--- a/src/components/SafeAreaConsumer.js
+++ b/src/components/SafeAreaConsumer.js
@@ -15,7 +15,7 @@ const SafeAreaConsumer = props => (
         {(insets) => {
             const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
             return props.children({
-                paddingTop, paddingBottom, insets, paddingBottomStyle: {paddingBottom},
+                paddingTop, paddingBottom, insets, safeAreaPaddingBottomStyle: {paddingBottom},
             });
         }}
     </SafeAreaInsetsContext.Consumer>
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 2d50f0c1e5d1..bed7167eb6e8 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -67,7 +67,9 @@ class ScreenWrapper extends React.Component {
     render() {
         return (
             <SafeAreaConsumer>
-                {({insets, paddingTop, paddingBottom}) => {
+                {({
+                    insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle,
+                }) => {
                     const paddingStyle = {};
 
                     if (this.props.includePaddingTop) {
@@ -75,7 +77,7 @@ class ScreenWrapper extends React.Component {
                     }
 
                     // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
-                    if (this.props.includePaddingBottom || this.props.network.isOffline) {
+                    if (this.props.includeSafeAreaPaddingBottom || this.props.network.isOffline) {
                         paddingStyle.paddingBottom = paddingBottom;
                     }
 
@@ -93,7 +95,7 @@ class ScreenWrapper extends React.Component {
                                     _.isFunction(this.props.children)
                                         ? this.props.children({
                                             insets,
-                                            safeAreaPaddingStyle: {paddingBottom},
+                                            safeAreaPaddingBottomStyle,
                                             didScreenTransitionEnd: this.state.didScreenTransitionEnd,
                                         })
                                         : this.props.children
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index ce1858ef20bd..46cc9ed6315b 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -11,7 +11,7 @@ const propTypes = {
     ]).isRequired,
 
     /** Whether to include padding bottom */
-    includePaddingBottom: PropTypes.bool,
+    includeSafeAreaPaddingBottom: PropTypes.bool,
 
     /** Whether to include padding top */
     includePaddingTop: PropTypes.bool,
@@ -32,7 +32,7 @@ const propTypes = {
 
 const defaultProps = {
     style: [],
-    includePaddingBottom: true,
+    includeSafeAreaPaddingBottom: true,
     includePaddingTop: true,
     onTransitionEnd: () => {},
     modal: {},
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 67be90c921f2..5cc20bde8ff2 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -86,7 +86,7 @@ class AddPersonalBankAccountPage extends React.Component {
         const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false);
 
         return (
-            <ScreenWrapper>
+            <ScreenWrapper includeSafeAreaPaddingBottom={shouldShowSuccess}>
                 <HeaderWithCloseButton
                     title={this.props.translate('bankAccount.addBankAccount')}
                     onCloseButtonPress={Navigation.dismissModal}
@@ -129,6 +129,7 @@ class AddPersonalBankAccountPage extends React.Component {
                         onSubmit={this.submit}
                         validate={this.validate}
                         style={[styles.mh5, styles.flex1]}
+                        includeSafeAreaPaddingBottom
                     >
                         <>
                             <AddPlaidBankAccount
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 1a90a8a35189..50a6496e8787 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -30,6 +30,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes,
 import * as PersonalDetails from '../../libs/actions/PersonalDetails';
 import OfflineIndicator from '../../components/OfflineIndicator';
 import * as ErrorUtils from '../../libs/ErrorUtils';
+import SafeAreaConsumer from '../../components/SafeAreaConsumer';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -366,16 +367,22 @@ class AdditionalDetailsStep extends React.Component {
                                 keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                             />
                         </View>
-                        <FormAlertWithSubmitButton
-                            isAlertVisible={isErrorVisible}
-                            onSubmit={this.activateWallet}
-                            onFixTheErrorsLinkPressed={() => {
-                                this.form.scrollTo({y: 0, animated: true});
-                            }}
-                            message={errorMessage}
-                            isLoading={this.props.walletAdditionalDetails.isLoading}
-                            buttonText={this.props.translate('common.saveAndContinue')}
-                        />
+                        <SafeAreaConsumer>
+                            {({safeAreaPaddingBottomStyle}) => (
+                                <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
+                                    <FormAlertWithSubmitButton
+                                        isAlertVisible={isErrorVisible}
+                                        onSubmit={this.activateWallet}
+                                        onFixTheErrorsLinkPressed={() => {
+                                            this.form.scrollTo({y: 0, animated: true});
+                                        }}
+                                        message={errorMessage}
+                                        isLoading={this.props.walletAdditionalDetails.isLoading}
+                                        buttonText={this.props.translate('common.saveAndContinue')}
+                                    />
+                                </View>
+                            )}
+                        </SafeAreaConsumer>
                         <OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />
                     </FormScrollView>
                 </View>
diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
index 42aeea32622c..91c4799a808b 100644
--- a/src/pages/EnablePayments/EnablePaymentsPage.js
+++ b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -54,8 +54,8 @@ class EnablePaymentsPage extends React.Component {
         }
 
         return (
-            <ScreenWrapper>
-                {(() => {
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+                {() => {
                     if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) {
                         return (
                             <>
@@ -85,7 +85,7 @@ class EnablePaymentsPage extends React.Component {
                             {currentStep === CONST.WALLET.STEP.ACTIVATE && <ActivateStep userWallet={this.props.userWallet} />}
                         </>
                     );
-                })()}
+                }}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index a7447e9ce4d6..1c0294881360 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -235,8 +235,8 @@ class NewChatPage extends Component {
             maxParticipantsReached,
         );
         return (
-            <ScreenWrapper includePaddingBottom={false}>
-                {({didScreenTransitionEnd}) => (
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+                {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
                         <HeaderWithCloseButton
                             title={this.props.isGroupChat
@@ -244,7 +244,7 @@ class NewChatPage extends Component {
                                 : this.props.translate('sidebarScreen.newChat')}
                             onCloseButtonPress={() => Navigation.dismissModal(true)}
                         />
-                        <View style={[styles.flex1, styles.w100, styles.pRelative]}>
+                        <View style={[styles.flex1, styles.w100, styles.pRelative, this.state.selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
                             {didScreenTransitionEnd ? (
                                 <OptionsSelector
                                     canSelectMultipleOptions={this.props.isGroupChat}
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 39d27bf113af..96f2ff9583c1 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -89,7 +89,7 @@ class BankAccountManualStep extends React.Component {
                     validate={this.validate}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.mh5, styles.flexGrow1]}
-                    includeSafeAreaBottomPadding
+                    includeSafeAreaPaddingBottom
                 >
                     <Text style={[styles.mb5]}>
                         {this.props.translate('bankAccount.checkHelpLine')}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 735a1438048c..bd4f55366bb0 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -82,7 +82,7 @@ class BankAccountPlaidStep extends React.Component {
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.mh5, styles.flexGrow1]}
                     isSubmitButtonVisible={Boolean(selectedPlaidAccountID)}
-                    includeSafeAreaBottomPadding
+                    includeSafeAreaPaddingBottom
                 >
                     <AddPlaidBankAccount
                         text={this.props.translate('bankAccount.plaidBodyCopy')}
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index f62bbed45e17..7818770728c2 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -153,7 +153,7 @@ class CompanyStep extends React.Component {
                     onSubmit={this.submit}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.ph5, styles.flexGrow1]}
-                    includeSafeAreaBottomPadding
+                    includeSafeAreaPaddingBottom
                 >
                     <Text>{this.props.translate('companyStep.subtitle')}</Text>
                     <TextInput
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 7d07f2fc46f3..c0e60c126d8f 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -240,7 +240,7 @@ class ReimbursementAccountPage extends React.Component {
             );
         }
         return (
-            <ScreenWrapper includePaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
                     <BankAccountStep
                         receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
diff --git a/src/pages/RequestCallConfirmationScreen.js b/src/pages/RequestCallConfirmationScreen.js
index 79510933151b..f6b24dcbd957 100644
--- a/src/pages/RequestCallConfirmationScreen.js
+++ b/src/pages/RequestCallConfirmationScreen.js
@@ -35,11 +35,11 @@ const RequestCallConfirmationScreen = props => (
         </View>
         <FixedFooter>
             <SafeAreaConsumer>
-                {({paddingBottomStyle}) => (
+                {({safeAreaPaddingBottomStyle}) => (
                     <Button
                         success
                         text={props.translate('requestCallConfirmationScreen.gotIt')}
-                        style={[styles.mt6, paddingBottomStyle]}
+                        style={[styles.mt6, safeAreaPaddingBottomStyle]}
                         pressOnEnter
                         onPress={() => Navigation.goBack()}
                     />
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 55cbb3a69f24..2711b65dd7be 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -245,7 +245,7 @@ class RequestCallPage extends Component {
         const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
 
         return (
-            <ScreenWrapper includePaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('requestCallPage.title')}
                     shouldShowBackButton
@@ -262,7 +262,7 @@ class RequestCallPage extends Component {
                             onSubmit={this.onSubmit}
                             submitButtonText={this.props.translate('requestCallPage.callMe')}
                             style={[styles.flexGrow1, styles.mh5]}
-                            includeSafeAreaBottomPadding
+                            includeSafeAreaPaddingBottom
                         >
                             <Section
                                 title={this.props.translate('requestCallPage.subtitle')}
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 8fa76b7278da..0d1bf78064d8 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -165,7 +165,7 @@ class SearchPage extends Component {
             this.state.searchValue,
         );
         return (
-            <ScreenWrapper includePaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 {({didScreenTransitionEnd}) => (
                     <>
                         <HeaderWithCloseButton
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 14ca7bc531e5..3410b95e4163 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -50,7 +50,7 @@ class BaseSidebarScreen extends Component {
     render() {
         return (
             <ScreenWrapper
-                includePaddingBottom={false}
+                includeSafeAreaPaddingBottom={false}
                 style={[styles.sidebar]}
             >
                 {({insets}) => (
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index b7affe898beb..db6092205f9b 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -111,7 +111,7 @@ class IOUCurrencySelection extends Component {
     render() {
         const headerMessage = this.state.searchValue.trim() && !this.state.currencyData.length ? this.props.translate('common.noResultsFound') : '';
         return (
-            <ScreenWrapper>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('iOUCurrencySelection.selectCurrency')}
                     onCloseButtonPress={Navigation.goBack}
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index 629b948d7beb..a5a20eff1dcd 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -396,8 +396,8 @@ class IOUModal extends Component {
         const currentStep = this.steps[this.state.currentStepIndex];
         const reportID = lodashGet(this.props, 'route.params.reportID', '');
         return (
-            <ScreenWrapper includePaddingBottom={false}>
-                {({didScreenTransitionEnd, safeAreaPaddingStyle}) => (
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+                {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
                         <View style={[styles.pRelative, styles.flex1]}>
                             {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
@@ -406,7 +406,7 @@ class IOUModal extends Component {
                                     {currentStep === Steps.IOUAmount && (
                                         <AnimatedStep
                                             direction={this.getDirection()}
-                                            style={[styles.flex1, safeAreaPaddingStyle]}
+                                            style={[styles.flex1, safeAreaPaddingBottomStyle]}
                                         >
                                             {this.renderHeader()}
                                             <IOUAmountPage
@@ -438,7 +438,7 @@ class IOUModal extends Component {
                                     )}
                                     {currentStep === Steps.IOUConfirm && (
                                         <AnimatedStep
-                                            style={[styles.flex1, safeAreaPaddingStyle]}
+                                            style={[styles.flex1, safeAreaPaddingBottomStyle]}
                                             direction={this.getDirection()}
                                         >
                                             {this.renderHeader()}
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
index 053cd575ffe4..ebcaeb9c1226 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
@@ -211,8 +211,8 @@ class IOUParticipantsSplit extends Component {
         );
         return (
             <SafeAreaConsumer>
-                {({paddingBottomStyle}) => (
-                    <View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? paddingBottomStyle : {})]}>
+                {({safeAreaPaddingBottomStyle}) => (
+                    <View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? safeAreaPaddingBottomStyle : {})]}>
                         <Text style={[styles.formLabel, styles.pt3, styles.ph5]}>
                             {this.props.translate('common.to')}
                         </Text>
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 85f3ff30e771..e6da84ee5d5c 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -61,7 +61,7 @@ const AboutPage = (props) => {
     ];
 
     return (
-        <ScreenWrapper includePaddingBottom={false}>
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <HeaderWithCloseButton
                 title={props.translate('initialSettingsPage.about')}
                 shouldShowBackButton
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index e523cf7b5470..7f78d11cc881 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -234,7 +234,7 @@ class InitialSettingsPage extends React.Component {
         }
 
         return (
-            <ScreenWrapper includePaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('common.settings')}
                     onCloseButtonPress={() => Navigation.dismissModal(true)}
diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js
index 5ab14f4c3b96..206de6725c25 100644
--- a/src/pages/settings/Payments/AddDebitCardPage.js
+++ b/src/pages/settings/Payments/AddDebitCardPage.js
@@ -108,7 +108,7 @@ class DebitCardPage extends Component {
 
     render() {
         return (
-            <ScreenWrapper>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('addDebitCardPage.addADebitCard')}
                     shouldShowBackButton
@@ -121,6 +121,7 @@ class DebitCardPage extends Component {
                     onSubmit={PaymentMethods.addPaymentCard}
                     submitButtonText={this.props.translate('common.save')}
                     style={[styles.mh5, styles.flexGrow1]}
+                    includeSafeAreaPaddingBottom
                 >
                     <TextInput
                         inputID="nameOnCard"
diff --git a/src/pages/settings/PreferencesPage.js b/src/pages/settings/PreferencesPage.js
index a246ada321cd..a35c0f54352c 100755
--- a/src/pages/settings/PreferencesPage.js
+++ b/src/pages/settings/PreferencesPage.js
@@ -57,7 +57,7 @@ const PreferencesPage = (props) => {
     };
 
     return (
-        <ScreenWrapper includePaddingBottom={false}>
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <HeaderWithCloseButton
                 title={props.translate('common.preferences')}
                 shouldShowBackButton
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index bc4d2a4020ac..ee875b647801 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -221,7 +221,7 @@ class ProfilePage extends Component {
         const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.pronouns;
 
         return (
-            <ScreenWrapper includePaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('common.profile')}
                     shouldShowBackButton
@@ -235,7 +235,7 @@ class ProfilePage extends Component {
                     onSubmit={this.updatePersonalDetails}
                     submitButtonText={this.props.translate('common.save')}
                     enabledWhenOffline
-                    includeSafeAreaBottomPadding
+                    includeSafeAreaPaddingBottom
                 >
                     <OfflineWithFeedback
                         pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 9b4de17f656a..4e8d8063590b 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -60,7 +60,7 @@ class CloseAccountPage extends Component {
     render() {
         const userEmailOrPhone = Str.removeSMSDomain(this.props.session.email);
         return (
-            <ScreenWrapper includePaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('closeAccountPage.closeAccount')}
                     shouldShowBackButton
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index dd5113733d1b..27e8a3b897c2 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -147,7 +147,7 @@ class WorkspaceInitialPage extends React.Component {
         ];
 
         return (
-            <ScreenWrapper includePaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 066f58ef0f3a..50943e9d7c67 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -318,7 +318,7 @@ class WorkspaceMembersPage extends React.Component {
 
         return (
             <ScreenWrapper
-                includePaddingBottom={false}
+                includeSafeAreaPaddingBottom={false}
                 style={[styles.defaultModalContainer]}
             >
                 <FullPageNotFoundView
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index 6cac7fb61ebd..e6ae12780119 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -105,7 +105,7 @@ class WorkspacePageWithSections extends React.Component {
         const policyName = lodashGet(this.props.policy, 'name');
 
         return (
-            <ScreenWrapper includePaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index 5c80b0f045cc..4e34596df4d5 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -84,7 +84,7 @@ class WorkspaceSettingsPage extends React.Component {
                         validate={this.validate}
                         onSubmit={this.submit}
                         enabledWhenOffline
-                        includeSafeAreaBottomPadding
+                        includeSafeAreaPaddingBottom
                     >
                         <OfflineWithFeedback
                             pendingAction={lodashGet(this.props.policy, 'pendingFields.avatar', null)}

From 4e915a957e343b30e6a233d80735fe70a42037a4 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 15 Dec 2022 11:41:06 -1000
Subject: [PATCH 06/14] Fix attachment modal spacing

---
 src/components/AttachmentModal.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 14b80f5f1a49..8791ec55b20d 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -22,6 +22,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import ConfirmModal from './ConfirmModal';
 import TextWithEllipsis from './TextWithEllipsis';
 import HeaderGap from './HeaderGap';
+import SafeAreaConsumer from './SafeAreaConsumer';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -275,17 +276,21 @@ class AttachmentModal extends PureComponent {
 
                     {/* If we have an onConfirm method show a confirmation button */}
                     {this.props.onConfirm && (
-                        <Animated.View style={StyleUtils.fade(this.state.confirmButtonFadeAnimation)}>
-                            <Button
-                                success
-                                style={[styles.buttonConfirm, this.props.isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
-                                textStyles={[styles.buttonConfirmText]}
-                                text={this.props.translate('common.send')}
-                                onPress={this.submitAndClose}
-                                disabled={this.state.isConfirmButtonDisabled}
-                                pressOnEnter
-                            />
-                        </Animated.View>
+                        <SafeAreaConsumer>
+                            {({safeAreaPaddingBottomStyle}) => (
+                                <Animated.View style={[StyleUtils.fade(this.state.confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
+                                    <Button
+                                        success
+                                        style={[styles.buttonConfirm, this.props.isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
+                                        textStyles={[styles.buttonConfirmText]}
+                                        text={this.props.translate('common.send')}
+                                        onPress={this.submitAndClose}
+                                        disabled={this.state.isConfirmButtonDisabled}
+                                        pressOnEnter
+                                    />
+                                </Animated.View>
+                            )}
+                        </SafeAreaConsumer>
                     )}
                 </Modal>
 

From d28b876964e2a254026c8d0f4dd5faa1eb78c3f8 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 21 Dec 2022 12:00:46 -1000
Subject: [PATCH 07/14] remove safe area padding from WalletStatementPage

---
 src/pages/wallet/WalletStatementPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js
index 572aa672bff4..72f696df4732 100644
--- a/src/pages/wallet/WalletStatementPage.js
+++ b/src/pages/wallet/WalletStatementPage.js
@@ -103,7 +103,7 @@ class WalletStatementPage extends React.Component {
         const url = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}statement.php?period=${this.yearMonth}`;
 
         return (
-            <ScreenWrapper>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={Str.recapitalize(title)}
                     shouldShowDownloadButton

From e7aed24ce724f954948447da4fff441484586c0c Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 21 Dec 2022 12:15:03 -1000
Subject: [PATCH 08/14] Fix Display name page

---
 src/pages/settings/Profile/DisplayNamePage.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index cb4ebaaea35a..701dc6c82dc9 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -77,7 +77,7 @@ class DisplayNamePage extends Component {
         const currentUserDetails = this.props.currentUserPersonalDetails || {};
 
         return (
-            <ScreenWrapper>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('displayNamePage.headerTitle')}
                     shouldShowBackButton
@@ -91,6 +91,7 @@ class DisplayNamePage extends Component {
                     onSubmit={this.updateDisplayName}
                     submitButtonText={this.props.translate('common.save')}
                     enabledWhenOffline
+                    includeSafeAreaPaddingBottom
                 >
                     <Text style={[styles.mb6]}>
                         {this.props.translate('displayNamePage.isShownOnProfile')}

From e7bcf84cb856e75fe26de7a055ec42c7fbc26e2a Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 21 Dec 2022 12:27:58 -1000
Subject: [PATCH 09/14] Simplify as all Form components need the safe area
 bottom added

---
 src/components/Form.js                                  | 2 +-
 src/pages/AddPersonalBankAccountPage.js                 | 1 -
 src/pages/ReimbursementAccount/BankAccountManualStep.js | 1 -
 src/pages/ReimbursementAccount/BankAccountPlaidStep.js  | 1 -
 src/pages/ReimbursementAccount/CompanyStep.js           | 1 -
 src/pages/ReimbursementAccount/RequestorStep.js         | 1 -
 src/pages/RequestCallPage.js                            | 1 -
 src/pages/settings/Payments/AddDebitCardPage.js         | 1 -
 src/pages/settings/Profile/DisplayNamePage.js           | 1 -
 src/pages/settings/Security/CloseAccountPage.js         | 1 -
 src/pages/workspace/WorkspaceNewRoomPage.js             | 2 +-
 src/pages/workspace/WorkspaceSettingsPage.js            | 1 -
 12 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 6ddc0ff32db4..42781c91ad84 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -257,7 +257,7 @@ class Form extends React.Component {
                         keyboardShouldPersistTaps="handled"
                         ref={el => this.form = el}
                     >
-                        <View style={[this.props.style, this.props.includeSafeAreaPaddingBottom ? safeAreaPaddingBottomStyle : {}]}>
+                        <View style={[this.props.style, safeAreaPaddingBottomStyle]}>
                             {this.childrenWrapperWithProps(this.props.children)}
                             {this.props.isSubmitButtonVisible && (
                             <FormAlertWithSubmitButton
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 5cc20bde8ff2..25f6026436a0 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -129,7 +129,6 @@ class AddPersonalBankAccountPage extends React.Component {
                         onSubmit={this.submit}
                         validate={this.validate}
                         style={[styles.mh5, styles.flex1]}
-                        includeSafeAreaPaddingBottom
                     >
                         <>
                             <AddPlaidBankAccount
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 96f2ff9583c1..25e767d24800 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -89,7 +89,6 @@ class BankAccountManualStep extends React.Component {
                     validate={this.validate}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.mh5, styles.flexGrow1]}
-                    includeSafeAreaPaddingBottom
                 >
                     <Text style={[styles.mb5]}>
                         {this.props.translate('bankAccount.checkHelpLine')}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index bd4f55366bb0..1142cfde7efd 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -82,7 +82,6 @@ class BankAccountPlaidStep extends React.Component {
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.mh5, styles.flexGrow1]}
                     isSubmitButtonVisible={Boolean(selectedPlaidAccountID)}
-                    includeSafeAreaPaddingBottom
                 >
                     <AddPlaidBankAccount
                         text={this.props.translate('bankAccount.plaidBodyCopy')}
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 381edc399c8d..6dcce7a9534d 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -153,7 +153,6 @@ class CompanyStep extends React.Component {
                     onSubmit={this.submit}
                     submitButtonText={this.props.translate('common.saveAndContinue')}
                     style={[styles.ph5, styles.flexGrow1]}
-                    includeSafeAreaPaddingBottom
                 >
                     <Text>{this.props.translate('companyStep.subtitle')}</Text>
                     <TextInput
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 9485e2a102b4..474ed78b4281 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -163,7 +163,6 @@ class RequestorStep extends React.Component {
                         validate={this.validate}
                         onSubmit={this.submit}
                         style={[styles.mh5, styles.flexGrow1]}
-                        includeSafeAreaPaddingBottom
                     >
                         <Text>{this.props.translate('requestorStep.subtitle')}</Text>
                         <View style={[styles.mb5, styles.mt1, styles.dFlex, styles.flexRow]}>
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 2711b65dd7be..35d9a5813c45 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -262,7 +262,6 @@ class RequestCallPage extends Component {
                             onSubmit={this.onSubmit}
                             submitButtonText={this.props.translate('requestCallPage.callMe')}
                             style={[styles.flexGrow1, styles.mh5]}
-                            includeSafeAreaPaddingBottom
                         >
                             <Section
                                 title={this.props.translate('requestCallPage.subtitle')}
diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js
index 206de6725c25..5e5ff76fe51f 100644
--- a/src/pages/settings/Payments/AddDebitCardPage.js
+++ b/src/pages/settings/Payments/AddDebitCardPage.js
@@ -121,7 +121,6 @@ class DebitCardPage extends Component {
                     onSubmit={PaymentMethods.addPaymentCard}
                     submitButtonText={this.props.translate('common.save')}
                     style={[styles.mh5, styles.flexGrow1]}
-                    includeSafeAreaPaddingBottom
                 >
                     <TextInput
                         inputID="nameOnCard"
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index 701dc6c82dc9..b07d1f0525ae 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -91,7 +91,6 @@ class DisplayNamePage extends Component {
                     onSubmit={this.updateDisplayName}
                     submitButtonText={this.props.translate('common.save')}
                     enabledWhenOffline
-                    includeSafeAreaPaddingBottom
                 >
                     <Text style={[styles.mb6]}>
                         {this.props.translate('displayNamePage.isShownOnProfile')}
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index a14706fe7d80..2871f76e4a35 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -75,7 +75,6 @@ class CloseAccountPage extends Component {
                     submitButtonText={this.props.translate('closeAccountPage.closeAccount')}
                     style={[styles.flexGrow1, styles.mh5]}
                     isDangerousAction
-                    includeSafeAreaPaddingBottom
                 >
                     <View style={[styles.flexGrow1]}>
                         <Text>{this.props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index d4e394273db7..34d40d2000ec 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -123,7 +123,7 @@ class WorkspaceNewRoomPage extends React.Component {
         }));
 
         return (
-            <ScreenWrapper>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('newRoomPage.newRoom')}
                     onCloseButtonPress={() => Navigation.dismissModal()}
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index 4e34596df4d5..d890a3996dd2 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -84,7 +84,6 @@ class WorkspaceSettingsPage extends React.Component {
                         validate={this.validate}
                         onSubmit={this.submit}
                         enabledWhenOffline
-                        includeSafeAreaPaddingBottom
                     >
                         <OfflineWithFeedback
                             pendingAction={lodashGet(this.props.policy, 'pendingFields.avatar', null)}

From 04f9b17c342da0a272691e99406c552d07530b76 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 27 Dec 2022 12:24:05 -1000
Subject: [PATCH 10/14] Fix request call page

---
 src/pages/RequestCallPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 78e7635e80a4..4bcd38d97410 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -245,7 +245,7 @@ class RequestCallPage extends Component {
         const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={this.props.requestCallForm.didRequestCallSucceed}>
                 <HeaderWithCloseButton
                     title={this.props.translate('requestCallPage.title')}
                     shouldShowBackButton

From abdd6d74f583a175685c2f7deadded8f4214e727 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 27 Dec 2022 12:32:30 -1000
Subject: [PATCH 11/14] Fix web

---
 src/components/SafeAreaConsumer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SafeAreaConsumer.js b/src/components/SafeAreaConsumer.js
index 607f33b8bdef..011cf7774f23 100644
--- a/src/components/SafeAreaConsumer.js
+++ b/src/components/SafeAreaConsumer.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import * as StyleUtils from '../styles/StyleUtils';

From 59637968eecc478c927dfa44b6f18c74adbbca55 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 28 Dec 2022 08:09:48 -1000
Subject: [PATCH 12/14] remove merge artifacts

---
 src/components/Form.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 867ee7c15bc3..3f625425df4c 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -10,11 +10,8 @@ import * as FormActions from '../libs/actions/FormActions';
 import * as ErrorUtils from '../libs/ErrorUtils';
 import styles from '../styles/styles';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
-<<<<<<< HEAD
 import SafeAreaConsumer from './SafeAreaConsumer';
-=======
 import ScrollViewWithContext from './ScrollViewWithContext';
->>>>>>> origin
 
 const propTypes = {
     /** A unique Onyx key identifying the form */

From 6983064ea1c9aff9016256b7f7e2d0b4d3da6639 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 4 Jan 2023 11:43:27 -0800
Subject: [PATCH 13/14] Update FORMS.md doc with description of SafeAreaPadding
 gotcha. Add doc to SafeAreaConsumer

---
 contributingGuides/FORMS.md        | 12 ++++++++++++
 src/components/SafeAreaConsumer.js |  7 +++++++
 2 files changed, 19 insertions(+)

diff --git a/contributingGuides/FORMS.md b/contributingGuides/FORMS.md
index a6562e237c9a..25bcda81e617 100644
--- a/contributingGuides/FORMS.md
+++ b/contributingGuides/FORMS.md
@@ -247,3 +247,15 @@ Form.js will automatically provide the following props to any input with the inp
 - errorText: The translated error text that is returned by validate for that specific input.
 - onBlur: An onBlur handler that calls validate.
 - onInputChange: An onChange handler that saves draft values and calls validate for that input (inputA). Passing an inputID as a second param allows inputA to manipulate the input value of the provided inputID (inputB).
+
+### Safe Area Padding
+
+Any `Form.js` that has a button will also add safe area padding by default. If the `<Form/>` is inside a `<ScreenWrapper>` we will want to disable the default safe area padding applied there e.g.
+
+```js
+<ScreenWrapper includeSafeAreaPaddingBottom={false}>
+    <Form>
+        {...}
+    </Form>
+</ScreenWrapper>
+```
diff --git a/src/components/SafeAreaConsumer.js b/src/components/SafeAreaConsumer.js
index 011cf7774f23..a9daf6fe6752 100644
--- a/src/components/SafeAreaConsumer.js
+++ b/src/components/SafeAreaConsumer.js
@@ -11,6 +11,13 @@ const propTypes = {
     ]).isRequired,
 };
 
+/**
+ * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we
+ * may need not just the insets, but the computed styles so we save a few lines of code with this.
+ *
+ * @param {Object} props
+ * @returns {React.Component}
+ */
 const SafeAreaConsumer = props => (
     <SafeAreaInsetsContext.Consumer>
         {(insets) => {

From e42eb8563c1b8ce1decd129b0065a565a3b49367 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 4 Jan 2023 11:54:11 -0800
Subject: [PATCH 14/14] Fix Pronouns and Timezone page

---
 src/pages/settings/Profile/PronounsPage.js       | 2 +-
 src/pages/settings/Profile/TimezoneSelectPage.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 7a35a8dd62ec..86651877898d 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -52,7 +52,7 @@ const PronounsPage = (props) => {
     };
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <HeaderWithCloseButton
                 title={props.translate('pronounsPage.pronouns')}
                 shouldShowBackButton
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
index 020b865013d0..7a89ac8ce73d 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.js
+++ b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -75,7 +75,7 @@ class TimezoneSelectPage extends Component {
 
     render() {
         return (
-            <ScreenWrapper>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('timezonePage.timezone')}
                     shouldShowBackButton