From fd3513c5666396c450f5c4f18490391377e6d939 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasperhuangg@gmail.com>
Date: Tue, 26 Jul 2022 09:51:21 -0700
Subject: [PATCH 1/5] revert merge

---
 src/components/OfflineIndicator.js            |   1 +
 src/components/ScreenWrapper.js               |  60 +---
 src/pages/AddPersonalBankAccountPage.js       | 117 ++++---
 .../EnablePayments/AdditionalDetailsStep.js   | 250 ++++++-------
 .../EnablePayments/EnablePaymentsPage.js      |  15 +-
 src/pages/GetAssistancePage.js                |  59 ++--
 src/pages/NewChatPage.js                      |   5 +-
 .../ReimbursementAccountPage.js               |  55 +--
 src/pages/RequestCallPage.js                  | 157 ++++-----
 src/pages/home/ReportScreen.js                |  83 ++---
 src/pages/home/report/ReportActionCompose.js  |   2 +-
 src/pages/iou/IOUCurrencySelection.js         |  29 +-
 src/pages/iou/IOUModal.js                     |   5 +-
 src/pages/settings/AddSecondaryLoginPage.js   | 109 +++---
 src/pages/settings/PasswordPage.js            | 155 +++++----
 .../settings/Payments/AddDebitCardPage.js     | 159 ++++-----
 .../settings/Payments/AddPayPalMePage.js      |  73 ++--
 .../Payments/ChooseTransferAccountPage.js     |  45 +--
 .../Payments/PaymentsPage/BasePaymentsPage.js | 327 +++++++++---------
 .../settings/Payments/TransferBalancePage.js  | 187 +++++-----
 src/pages/settings/Profile/ProfilePage.js     | 179 +++++-----
 .../settings/Security/CloseAccountPage.js     | 145 ++++----
 src/pages/workspace/WorkspaceInvitePage.js    |   5 +-
 src/pages/workspace/WorkspaceNewRoomPage.js   |  89 ++---
 .../workspace/WorkspacePageWithSections.js    |  57 +--
 src/styles/styles.js                          |   8 -
 26 files changed, 1213 insertions(+), 1163 deletions(-)

diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index 94c0cb44f1fd..aafda94fdf0a 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -44,6 +44,7 @@ const OfflineIndicator = (props) => {
 
     return (
         <View style={[
+            styles.chatItemComposeSecondaryRowOffset,
             setStyles(props.containerStyles, props.isSmallScreenWidth),
             styles.flexRow,
             styles.alignItemsCenter,
diff --git a/src/components/ScreenWrapper.js b/src/components/ScreenWrapper.js
index 9167c7cc2dd7..bc6a416dbd01 100644
--- a/src/components/ScreenWrapper.js
+++ b/src/components/ScreenWrapper.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, KeyboardAvoidingView} from 'react-native';
+import {View} from 'react-native';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../styles/styles';
@@ -15,10 +15,6 @@ import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
 import withNavigation from './withNavigation';
-import withWindowDimensions from './withWindowDimensions';
-import OfflineIndicator from './OfflineIndicator';
-import {withNetwork} from './OnyxProvider';
-import networkPropTypes from './networkPropTypes';
 
 const propTypes = {
     /** Array of additional styles to add */
@@ -39,13 +35,6 @@ const propTypes = {
     // Called when navigated Screen's transition is finished.
     onTransitionEnd: PropTypes.func,
 
-    /** Is the window width narrow, like on a mobile device */
-    isSmallScreenWidth: PropTypes.bool.isRequired,
-
-    /** The behavior to pass to the KeyboardAvoidingView, requires some trial and error depending on the layout/devices used.
-     *  Search 'switch(behavior)' in ./node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js for more context */
-    keyboardAvoidingViewBehavior: PropTypes.oneOf(['padding', 'height', 'position']),
-
     // react-navigation navigation object available to screen components
     navigation: PropTypes.shape({
         // Method to attach listener to Navigation state.
@@ -58,9 +47,6 @@ const propTypes = {
         willAlertModalBecomeVisible: PropTypes.bool,
     }),
 
-    /** Information about the network */
-    network: networkPropTypes.isRequired,
-
 };
 
 const defaultProps = {
@@ -72,7 +58,6 @@ const defaultProps = {
         addListener: () => {},
     },
     modal: {},
-    keyboardAvoidingViewBehavior: 'padding',
 };
 
 class ScreenWrapper extends React.Component {
@@ -120,36 +105,27 @@ class ScreenWrapper extends React.Component {
                         paddingStyle.paddingTop = paddingTop;
                     }
 
-                    // 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.includePaddingBottom) {
                         paddingStyle.paddingBottom = paddingBottom;
                     }
 
                     return (
-                        <View
-                            style={[
-                                ...this.props.style,
-                                styles.flex1,
-                                paddingStyle,
-                            ]}
+                        <View style={[
+                            ...this.props.style,
+                            styles.flex1,
+                            paddingStyle,
+                        ]}
                         >
-                            <KeyboardAvoidingView style={[styles.w100, styles.h100]} behavior={this.props.keyboardAvoidingViewBehavior}>
-                                <HeaderGap />
-                                {// If props.children is a function, call it to provide the insets to the children.
-                                    _.isFunction(this.props.children)
-                                        ? this.props.children({
-                                            insets,
-                                            didScreenTransitionEnd: this.state.didScreenTransitionEnd,
-                                        })
-                                        : this.props.children
-                                }
-                                <KeyboardShortcutsModal />
-                                {this.props.isSmallScreenWidth && this.props.network.isOffline && (
-                                    <View style={styles.chatItemComposeSecondaryRow}>
-                                        <OfflineIndicator />
-                                    </View>
-                                )}
-                            </KeyboardAvoidingView>
+                            <HeaderGap />
+                            {// If props.children is a function, call it to provide the insets to the children.
+                                _.isFunction(this.props.children)
+                                    ? this.props.children({
+                                        insets,
+                                        didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                    })
+                                    : this.props.children
+                            }
+                            <KeyboardShortcutsModal />
                         </View>
                     );
                 }}
@@ -163,11 +139,9 @@ ScreenWrapper.defaultProps = defaultProps;
 
 export default compose(
     withNavigation,
-    withWindowDimensions,
     withOnyx({
         modal: {
             key: ONYXKEYS.MODAL,
         },
     }),
-    withNetwork(),
 )(ScreenWrapper);
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 6d6586fa1f0e..5a14ed6f7f45 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -13,6 +13,7 @@ import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
 import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI';
 import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import Text from '../components/Text';
 import styles from '../styles/styles';
 import Button from '../components/Button';
@@ -124,65 +125,67 @@ class AddPersonalBankAccountPage extends React.Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('bankAccount.addBankAccount')}
-                    onCloseButtonPress={Navigation.goBack}
-                    shouldShowBackButton
-                    onBackButtonPress={Navigation.goBack}
-                />
-                {success ? (
-                    <>
-                        <Text style={[styles.formSuccess, styles.mh5]}>
-                            {success}
-                        </Text>
-                        <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd]}>
-                            <Button
-                                success
-                                text={this.props.translate('common.continue')}
-                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
-                            />
-                        </View>
-                    </>
-                ) : (
-                    <FormScrollView>
-                        <View style={[styles.mh5, styles.mb5]}>
-                            <AddPlaidBankAccount
-                                onSelect={(params) => {
-                                    this.setState({
-                                        selectedPlaidBankAccount: params.selectedPlaidBankAccount,
-                                    });
-                                }}
-                                onExitPlaid={Navigation.goBack}
-                                receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
-                            />
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('bankAccount.addBankAccount')}
+                        onCloseButtonPress={Navigation.goBack}
+                        shouldShowBackButton
+                        onBackButtonPress={Navigation.goBack}
+                    />
+                    {success ? (
+                        <>
+                            <Text style={[styles.formSuccess, styles.mh5]}>
+                                {success}
+                            </Text>
+                            <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd]}>
+                                <Button
+                                    success
+                                    text={this.props.translate('common.continue')}
+                                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
+                                />
+                            </View>
+                        </>
+                    ) : (
+                        <FormScrollView>
+                            <View style={[styles.mh5, styles.mb5]}>
+                                <AddPlaidBankAccount
+                                    onSelect={(params) => {
+                                        this.setState({
+                                            selectedPlaidBankAccount: params.selectedPlaidBankAccount,
+                                        });
+                                    }}
+                                    onExitPlaid={Navigation.goBack}
+                                    receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+                                />
+                                {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
+                                    <View style={[styles.mb5]}>
+                                        <TextInput
+                                            label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
+                                            secureTextEntry
+                                            value={this.state.password}
+                                            autoCompleteType="password"
+                                            textContentType="password"
+                                            autoCapitalize="none"
+                                            autoFocus={canFocusInputOnScreenFocus()}
+                                            onChangeText={text => this.setState({password: text})}
+                                            errorText={this.getErrorText('password')}
+                                            hasError={this.getErrors().password}
+                                        />
+                                    </View>
+                                )}
+                            </View>
                             {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
-                                <View style={[styles.mb5]}>
-                                    <TextInput
-                                        label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
-                                        secureTextEntry
-                                        value={this.state.password}
-                                        autoCompleteType="password"
-                                        textContentType="password"
-                                        autoCapitalize="none"
-                                        autoFocus={canFocusInputOnScreenFocus()}
-                                        onChangeText={text => this.setState({password: text})}
-                                        errorText={this.getErrorText('password')}
-                                        hasError={this.getErrors().password}
-                                    />
-                                </View>
+                                <FormAlertWithSubmitButton
+                                    isAlertVisible={Boolean(error)}
+                                    buttonText={this.props.translate('common.saveAndContinue')}
+                                    onSubmit={this.submit}
+                                    message={error}
+                                    isLoading={loading}
+                                />
                             )}
-                        </View>
-                        {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
-                            <FormAlertWithSubmitButton
-                                isAlertVisible={Boolean(error)}
-                                buttonText={this.props.translate('common.saveAndContinue')}
-                                onSubmit={this.submit}
-                                message={error}
-                                isLoading={loading}
-                            />
-                        )}
-                    </FormScrollView>
-                )}
+                        </FormScrollView>
+                    )}
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index d2ab86fccc9e..71daa5f13f72 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -3,7 +3,9 @@ import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
-import {View} from 'react-native';
+import {
+    View, KeyboardAvoidingView,
+} from 'react-native';
 import IdologyQuestions from './IdologyQuestions';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -252,17 +254,19 @@ class AdditionalDetailsStep extends React.Component {
     render() {
         if (!_.isEmpty(this.props.walletAdditionalDetails.questions)) {
             return (
-                <ScreenWrapper style={[styles.flex1]} keyboardAvoidingViewBehavior="height">
-                    <HeaderWithCloseButton
-                        title={this.props.translate('additionalDetailsStep.headerTitle')}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                        shouldShowBackButton
-                        onBackButtonPress={() => Wallet.setAdditionalDetailsQuestions(null)}
-                    />
-                    <IdologyQuestions
-                        questions={this.props.walletAdditionalDetails.questions}
-                        idNumber={this.props.walletAdditionalDetails.idNumber}
-                    />
+                <ScreenWrapper>
+                    <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
+                        <HeaderWithCloseButton
+                            title={this.props.translate('additionalDetailsStep.headerTitle')}
+                            onCloseButtonPress={() => Navigation.dismissModal()}
+                            shouldShowBackButton
+                            onBackButtonPress={() => Wallet.setAdditionalDetailsQuestions(null)}
+                        />
+                        <IdologyQuestions
+                            questions={this.props.walletAdditionalDetails.questions}
+                            idNumber={this.props.walletAdditionalDetails.idNumber}
+                        />
+                    </KeyboardAvoidingView>
                 </ScreenWrapper>
             );
         }
@@ -273,125 +277,127 @@ class AdditionalDetailsStep extends React.Component {
         const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
 
         return (
-            <ScreenWrapper style={[styles.flex1]} keyboardAvoidingViewBehavior="height">
-                <HeaderWithCloseButton
-                    title={this.props.translate('additionalDetailsStep.headerTitle')}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
-                <View style={[styles.flex1]}>
-                    <View style={[styles.ph5]}>
-                        <Text style={styles.mb3}>{this.props.translate('additionalDetailsStep.helpText')}</Text>
-                        <TextLink
-                            style={styles.mb3}
-                            href="https://use.expensify.com/usa-patriot-act"
-                        >
-                            {this.props.translate('additionalDetailsStep.helpLink')}
-                        </TextLink>
-                    </View>
-                    <FormScrollView ref={el => this.form = el}>
-                        <View style={[styles.mh5, styles.mb5]}>
-                            <View style={styles.mt4}>
+            <ScreenWrapper>
+                <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
+                    <HeaderWithCloseButton
+                        title={this.props.translate('additionalDetailsStep.headerTitle')}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
+                    />
+                    <View style={[styles.flex1]}>
+                        <View style={[styles.ph5]}>
+                            <Text style={styles.mb3}>{this.props.translate('additionalDetailsStep.helpText')}</Text>
+                            <TextLink
+                                style={styles.mb3}
+                                href="https://use.expensify.com/usa-patriot-act"
+                            >
+                                {this.props.translate('additionalDetailsStep.helpLink')}
+                            </TextLink>
+                        </View>
+                        <FormScrollView ref={el => this.form = el}>
+                            <View style={[styles.mh5, styles.mb5]}>
+                                <View style={styles.mt4}>
+                                    <TextInput
+                                        containerStyles={[styles.mt4]}
+                                        label={this.props.translate(this.fieldNameTranslationKeys.legalFirstName)}
+                                        onChangeText={val => this.clearErrorAndSetValue('legalFirstName', val)}
+                                        value={this.props.walletAdditionalDetailsDraft.legalFirstName || firstName}
+                                        errorText={this.getErrorText('legalFirstName')}
+                                    />
+                                    <TextInput
+                                        containerStyles={[styles.mt4]}
+                                        label={this.props.translate(this.fieldNameTranslationKeys.legalLastName)}
+                                        onChangeText={val => this.clearErrorAndSetValue('legalLastName', val)}
+                                        value={this.props.walletAdditionalDetailsDraft.legalLastName || lastName}
+                                        errorText={this.getErrorText('legalLastName')}
+                                    />
+                                    <AddressSearch
+                                        label={this.props.translate(this.fieldNameTranslationKeys.addressStreet)}
+                                        value={this.props.walletAdditionalDetailsDraft.addressStreet || ''}
+                                        containerStyles={[styles.mt4]}
+                                        onInputChange={(values) => {
+                                            const renamedFields = {
+                                                street: 'addressStreet',
+                                                state: 'addressState',
+                                                zipCode: 'addressZip',
+                                                city: 'addressCity',
+                                            };
+                                            _.each(values, (value, inputKey) => {
+                                                const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
+                                                this.clearErrorAndSetValue(renamedInputKey, value);
+                                            });
+                                        }}
+                                        errorText={this.getErrorText('addressStreet')}
+                                        hint={this.props.translate('common.noPO')}
+                                    />
+                                    {this.props.walletAdditionalDetailsDraft.addressStreet ? (
+                                        <>
+                                            {/** Once the user has started entering his address, show the other address fields (city, state, zip) */}
+                                            {/** We'll autofill them when the user selects a full address from the google autocomplete */}
+                                            <TextInput
+                                                containerStyles={[styles.mt4]}
+                                                label={this.props.translate(this.fieldNameTranslationKeys.addressCity)}
+                                                onChangeText={val => this.clearErrorAndSetValue('addressCity', val)}
+                                                value={this.props.walletAdditionalDetailsDraft.addressCity || ''}
+                                                errorText={this.getErrorText('addressCity')}
+                                            />
+                                            <TextInput
+                                                containerStyles={[styles.mt4]}
+                                                label={this.props.translate(this.fieldNameTranslationKeys.addressState)}
+                                                onChangeText={val => this.clearErrorAndSetValue('addressState', val)}
+                                                value={this.props.walletAdditionalDetailsDraft.addressState || ''}
+                                                errorText={this.getErrorText('addressState')}
+                                            />
+                                            <TextInput
+                                                containerStyles={[styles.mt4]}
+                                                label={this.props.translate(this.fieldNameTranslationKeys.addressZip)}
+                                                onChangeText={val => this.clearErrorAndSetValue('addressZip', val)}
+                                                value={this.props.walletAdditionalDetailsDraft.addressZip || ''}
+                                                errorText={this.getErrorText('addressZip')}
+                                            />
+                                        </>
+                                    ) : null}
+                                </View>
                                 <TextInput
                                     containerStyles={[styles.mt4]}
-                                    label={this.props.translate(this.fieldNameTranslationKeys.legalFirstName)}
-                                    onChangeText={val => this.clearErrorAndSetValue('legalFirstName', val)}
-                                    value={this.props.walletAdditionalDetailsDraft.legalFirstName || firstName}
-                                    errorText={this.getErrorText('legalFirstName')}
+                                    keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                                    label={this.props.translate(this.fieldNameTranslationKeys.phoneNumber)}
+                                    onChangeText={val => this.clearErrorAndSetValue('phoneNumber', val)}
+                                    value={this.props.walletAdditionalDetailsDraft.phoneNumber || ''}
+                                    placeholder={this.props.translate('common.phoneNumberPlaceholder')}
+                                    errorText={this.getErrorText('phoneNumber')}
                                 />
-                                <TextInput
+                                <DatePicker
                                     containerStyles={[styles.mt4]}
-                                    label={this.props.translate(this.fieldNameTranslationKeys.legalLastName)}
-                                    onChangeText={val => this.clearErrorAndSetValue('legalLastName', val)}
-                                    value={this.props.walletAdditionalDetailsDraft.legalLastName || lastName}
-                                    errorText={this.getErrorText('legalLastName')}
+                                    label={this.props.translate(this.fieldNameTranslationKeys.dob)}
+                                    onInputChange={val => this.clearDateErrorsAndSetValue(val)}
+                                    defaultValue={this.props.walletAdditionalDetailsDraft.dob || ''}
+                                    placeholder={this.props.translate('common.dob')}
+                                    errorText={this.getErrorText('dob') || this.getErrorText('age')}
+                                    maximumDate={new Date()}
                                 />
-                                <AddressSearch
-                                    label={this.props.translate(this.fieldNameTranslationKeys.addressStreet)}
-                                    value={this.props.walletAdditionalDetailsDraft.addressStreet || ''}
+                                <TextInput
                                     containerStyles={[styles.mt4]}
-                                    onInputChange={(values) => {
-                                        const renamedFields = {
-                                            street: 'addressStreet',
-                                            state: 'addressState',
-                                            zipCode: 'addressZip',
-                                            city: 'addressCity',
-                                        };
-                                        _.each(values, (value, inputKey) => {
-                                            const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
-                                            this.clearErrorAndSetValue(renamedInputKey, value);
-                                        });
-                                    }}
-                                    errorText={this.getErrorText('addressStreet')}
-                                    hint={this.props.translate('common.noPO')}
+                                    label={this.props.translate(this.fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
+                                    onChangeText={val => this.clearSSNErrorAndSetValue(val)}
+                                    value={this.props.walletAdditionalDetailsDraft.ssn || ''}
+                                    errorText={this.getErrorText('ssnFull9') || this.getErrorText('ssn')}
+                                    maxLength={shouldAskForFullSSN ? 9 : 4}
+                                    keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                                 />
-                                {this.props.walletAdditionalDetailsDraft.addressStreet ? (
-                                    <>
-                                        {/** Once the user has started entering his address, show the other address fields (city, state, zip) */}
-                                        {/** We'll autofill them when the user selects a full address from the google autocomplete */}
-                                        <TextInput
-                                            containerStyles={[styles.mt4]}
-                                            label={this.props.translate(this.fieldNameTranslationKeys.addressCity)}
-                                            onChangeText={val => this.clearErrorAndSetValue('addressCity', val)}
-                                            value={this.props.walletAdditionalDetailsDraft.addressCity || ''}
-                                            errorText={this.getErrorText('addressCity')}
-                                        />
-                                        <TextInput
-                                            containerStyles={[styles.mt4]}
-                                            label={this.props.translate(this.fieldNameTranslationKeys.addressState)}
-                                            onChangeText={val => this.clearErrorAndSetValue('addressState', val)}
-                                            value={this.props.walletAdditionalDetailsDraft.addressState || ''}
-                                            errorText={this.getErrorText('addressState')}
-                                        />
-                                        <TextInput
-                                            containerStyles={[styles.mt4]}
-                                            label={this.props.translate(this.fieldNameTranslationKeys.addressZip)}
-                                            onChangeText={val => this.clearErrorAndSetValue('addressZip', val)}
-                                            value={this.props.walletAdditionalDetailsDraft.addressZip || ''}
-                                            errorText={this.getErrorText('addressZip')}
-                                        />
-                                    </>
-                                ) : null}
                             </View>
-                            <TextInput
-                                containerStyles={[styles.mt4]}
-                                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                                label={this.props.translate(this.fieldNameTranslationKeys.phoneNumber)}
-                                onChangeText={val => this.clearErrorAndSetValue('phoneNumber', val)}
-                                value={this.props.walletAdditionalDetailsDraft.phoneNumber || ''}
-                                placeholder={this.props.translate('common.phoneNumberPlaceholder')}
-                                errorText={this.getErrorText('phoneNumber')}
+                            <FormAlertWithSubmitButton
+                                isAlertVisible={isErrorVisible}
+                                onSubmit={this.activateWallet}
+                                onFixTheErrorsLinkPressed={() => {
+                                    this.form.scrollTo({y: 0, animated: true});
+                                }}
+                                message={this.props.walletAdditionalDetails.additionalErrorMessage}
+                                isLoading={this.props.walletAdditionalDetails.loading}
+                                buttonText={this.props.translate('common.saveAndContinue')}
                             />
-                            <DatePicker
-                                containerStyles={[styles.mt4]}
-                                label={this.props.translate(this.fieldNameTranslationKeys.dob)}
-                                onInputChange={val => this.clearDateErrorsAndSetValue(val)}
-                                defaultValue={this.props.walletAdditionalDetailsDraft.dob || ''}
-                                placeholder={this.props.translate('common.dob')}
-                                errorText={this.getErrorText('dob') || this.getErrorText('age')}
-                                maximumDate={new Date()}
-                            />
-                            <TextInput
-                                containerStyles={[styles.mt4]}
-                                label={this.props.translate(this.fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
-                                onChangeText={val => this.clearSSNErrorAndSetValue(val)}
-                                value={this.props.walletAdditionalDetailsDraft.ssn || ''}
-                                errorText={this.getErrorText('ssnFull9') || this.getErrorText('ssn')}
-                                maxLength={shouldAskForFullSSN ? 9 : 4}
-                                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                            />
-                        </View>
-                        <FormAlertWithSubmitButton
-                            isAlertVisible={isErrorVisible}
-                            onSubmit={this.activateWallet}
-                            onFixTheErrorsLinkPressed={() => {
-                                this.form.scrollTo({y: 0, animated: true});
-                            }}
-                            message={this.props.walletAdditionalDetails.additionalErrorMessage}
-                            isLoading={this.props.walletAdditionalDetails.loading}
-                            buttonText={this.props.translate('common.saveAndContinue')}
-                        />
-                    </FormScrollView>
-                </View>
+                        </FormScrollView>
+                    </View>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
index 53f25dfeffd7..f1ac80846a05 100644
--- a/src/pages/EnablePayments/EnablePaymentsPage.js
+++ b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
+import {KeyboardAvoidingView} from 'react-native';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -58,12 +59,14 @@ class EnablePaymentsPage extends React.Component {
 
         if (this.props.userWallet.shouldShowFailedKYC) {
             return (
-                <ScreenWrapper style={[styles.flex1]} keyboardAvoidingViewBehavior="height">
-                    <HeaderWithCloseButton
-                        title={this.props.translate('additionalDetailsStep.headerTitle')}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                    />
-                    <FailedKYC />
+                <ScreenWrapper>
+                    <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
+                        <HeaderWithCloseButton
+                            title={this.props.translate('additionalDetailsStep.headerTitle')}
+                            onCloseButtonPress={() => Navigation.dismissModal()}
+                        />
+                        <FailedKYC />
+                    </KeyboardAvoidingView>
                 </ScreenWrapper>
             );
         }
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index 4a07075b0d3f..030ea26bac8a 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ScreenWrapper from '../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import Section from '../components/Section';
 import Navigation from '../libs/Navigation/Navigation';
@@ -27,34 +28,36 @@ const propTypes = {
 
 const GetAssistancePage = props => (
     <ScreenWrapper>
-        <HeaderWithCloseButton
-            title={props.translate('getAssistancePage.title')}
-            onCloseButtonPress={() => Navigation.dismissModal(true)}
-            shouldShowBackButton
-            onBackButtonPress={() => Navigation.goBack()}
-        />
-        <Section
-            title={props.translate('getAssistancePage.subtitle')}
-            icon={Illustrations.ConciergeExclamation}
-            menuItems={[
-                {
-                    title: props.translate('getAssistancePage.chatWithConcierge'),
-                    onPress: () => Report.navigateToConciergeChat(),
-                    icon: Expensicons.ChatBubble,
-                    shouldShowRightIcon: true,
-                },
-                {
-                    title: props.translate('getAssistancePage.requestSetupCall'),
-                    onPress: () => Navigation.navigate(ROUTES.getRequestCallRoute(props.route.params.taskID)),
-                    icon: Expensicons.Phone,
-                    shouldShowRightIcon: true,
-                },
-            ]}
-        >
-            <View style={styles.mv4}>
-                <Text>{props.translate('getAssistancePage.description')}</Text>
-            </View>
-        </Section>
+        <KeyboardAvoidingView>
+            <HeaderWithCloseButton
+                title={props.translate('getAssistancePage.title')}
+                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                shouldShowBackButton
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <Section
+                title={props.translate('getAssistancePage.subtitle')}
+                icon={Illustrations.ConciergeExclamation}
+                menuItems={[
+                    {
+                        title: props.translate('getAssistancePage.chatWithConcierge'),
+                        onPress: () => Report.navigateToConciergeChat(),
+                        icon: Expensicons.ChatBubble,
+                        shouldShowRightIcon: true,
+                    },
+                    {
+                        title: props.translate('getAssistancePage.requestSetupCall'),
+                        onPress: () => Navigation.navigate(ROUTES.getRequestCallRoute(props.route.params.taskID)),
+                        icon: Expensicons.Phone,
+                        shouldShowRightIcon: true,
+                    },
+                ]}
+            >
+                <View style={styles.mv4}>
+                    <Text>{props.translate('getAssistancePage.description')}</Text>
+                </View>
+            </Section>
+        </KeyboardAvoidingView>
     </ScreenWrapper>
 );
 
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index d8bb8fe7fa4e..0e55bdbccfbc 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -16,6 +16,7 @@ import ScreenWrapper from '../components/ScreenWrapper';
 import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import personalDetailsPropType from './personalDetailsPropType';
 
 const propTypes = {
@@ -212,7 +213,7 @@ class NewChatPage extends Component {
         return (
             <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
-                    <>
+                    <KeyboardAvoidingView>
                         <HeaderWithCloseButton
                             title={this.props.isGroupChat
                                 ? this.props.translate('sidebarScreen.newGroup')
@@ -259,7 +260,7 @@ class NewChatPage extends Component {
                                 />
                             )}
                         </View>
-                    </>
+                    </KeyboardAvoidingView>
                 )}
             </ScreenWrapper>
         );
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 9f022bd00bc4..21a15777b738 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -14,6 +14,7 @@ import CONST from '../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import getPlaidOAuthReceivedRedirectURI from '../../libs/getPlaidOAuthReceivedRedirectURI';
 import Text from '../../components/Text';
 import {withNetwork} from '../../components/OnyxProvider';
@@ -218,32 +219,34 @@ class ReimbursementAccountPage extends React.Component {
         }
         return (
             <ScreenWrapper>
-                {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
-                    <BankAccountStep
-                        achData={achData}
-                        isPlaidDisabled={this.props.plaidData.isPlaidDisabled}
-                        receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
-                        plaidLinkOAuthToken={this.props.plaidLinkToken}
-                    />
-                )}
-                {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && (
-                    <CompanyStep achData={achData} />
-                )}
-                {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
-                    <RequestorStep achData={achData} />
-                )}
-                {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
-                        achData={this.props.reimbursementAccount.achData}
-                    />
-                )}
-                <WorkspaceResetBankAccountModal />
+                <KeyboardAvoidingView>
+                    {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
+                        <BankAccountStep
+                            achData={achData}
+                            isPlaidDisabled={this.props.plaidData.isPlaidDisabled}
+                            receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+                            plaidLinkOAuthToken={this.props.plaidLinkToken}
+                        />
+                    )}
+                    {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && (
+                        <CompanyStep achData={achData} />
+                    )}
+                    {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
+                        <RequestorStep achData={achData} />
+                    )}
+                    {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
+                            achData={this.props.reimbursementAccount.achData}
+                        />
+                    )}
+                    <WorkspaceResetBankAccountModal />
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index d2b8fa817e8c..cbfd52a4390c 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -23,6 +23,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes,
 import TextInput from '../components/TextInput';
 import Text from '../components/Text';
 import Section from '../components/Section';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import * as Illustrations from '../components/Icon/Illustrations';
 import * as Expensicons from '../components/Icon/Expensicons';
 import * as LoginUtils from '../libs/LoginUtils';
@@ -284,84 +285,86 @@ class RequestCallPage extends Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('requestCallPage.title')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                {this.props.requestCallForm.didRequestCallSucceed
-                    ? (
-                        <RequestCallConfirmationScreen />
-                    ) : (
-                        <>
-                            <ScrollView style={styles.flex1}>
-                                <FormElement>
-                                    <Section
-                                        title={this.props.translate('requestCallPage.subtitle')}
-                                        icon={Illustrations.ConciergeExclamation}
-                                    >
-                                        <Text style={styles.mb4}>
-                                            {this.props.translate('requestCallPage.description')}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('requestCallPage.title')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.goBack()}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    />
+                    {this.props.requestCallForm.didRequestCallSucceed
+                        ? (
+                            <RequestCallConfirmationScreen />
+                        ) : (
+                            <>
+                                <ScrollView style={styles.flex1}>
+                                    <FormElement>
+                                        <Section
+                                            title={this.props.translate('requestCallPage.subtitle')}
+                                            icon={Illustrations.ConciergeExclamation}
+                                        >
+                                            <Text style={styles.mb4}>
+                                                {this.props.translate('requestCallPage.description')}
+                                            </Text>
+                                            <FullNameInputRow
+                                                firstName={this.state.firstName}
+                                                firstNameError={PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError)}
+                                                lastName={this.state.lastName}
+                                                lastNameError={PersonalDetails.getMaxCharacterError(this.state.hasLastNameError)}
+                                                onChangeFirstName={firstName => this.setState({firstName})}
+                                                onChangeLastName={lastName => this.setState({lastName})}
+                                                style={[styles.mv4]}
+                                            />
+                                            <TextInput
+                                                label={this.props.translate('common.phoneNumber')}
+                                                name="phone"
+                                                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                                                autoCorrect={false}
+                                                value={this.state.phoneNumber}
+                                                placeholder="2109400803"
+                                                errorText={this.state.phoneNumberError}
+                                                onBlur={this.validatePhoneInput}
+                                                onChangeText={phoneNumber => this.setState({phoneNumber})}
+                                            />
+                                            <TextInput
+                                                label={this.props.translate('requestCallPage.extension')}
+                                                keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                                                autoCompleteType="off"
+                                                autoCorrect={false}
+                                                value={this.state.phoneExtension}
+                                                placeholder="100"
+                                                errorText={this.state.phoneExtensionError}
+                                                onBlur={this.validatePhoneExtensionInput}
+                                                onChangeText={phoneExtension => this.setState({phoneExtension})}
+                                                containerStyles={[styles.mt4]}
+                                            />
+                                            <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>
+                                        </Section>
+                                    </FormElement>
+                                </ScrollView>
+                                <FixedFooter>
+                                    {isBlockedFromConcierge && (
+                                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                                            <Icon src={Expensicons.Exclamation} fill={colors.yellow} />
+                                            <Text style={[styles.mutedTextLabel, styles.ml2, styles.flex1]}>{this.props.translate('requestCallPage.blockedFromConcierge')}</Text>
+                                        </View>
+                                    )}
+                                    {!_.isEmpty(this.props.requestCallForm.error) && (
+                                        <Text style={styles.formError}>
+                                            {this.props.requestCallForm.error}
                                         </Text>
-                                        <FullNameInputRow
-                                            firstName={this.state.firstName}
-                                            firstNameError={PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError)}
-                                            lastName={this.state.lastName}
-                                            lastNameError={PersonalDetails.getMaxCharacterError(this.state.hasLastNameError)}
-                                            onChangeFirstName={firstName => this.setState({firstName})}
-                                            onChangeLastName={lastName => this.setState({lastName})}
-                                            style={[styles.mv4]}
-                                        />
-                                        <TextInput
-                                            label={this.props.translate('common.phoneNumber')}
-                                            name="phone"
-                                            keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                                            autoCorrect={false}
-                                            value={this.state.phoneNumber}
-                                            placeholder="2109400803"
-                                            errorText={this.state.phoneNumberError}
-                                            onBlur={this.validatePhoneInput}
-                                            onChangeText={phoneNumber => this.setState({phoneNumber})}
-                                        />
-                                        <TextInput
-                                            label={this.props.translate('requestCallPage.extension')}
-                                            keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                                            autoCompleteType="off"
-                                            autoCorrect={false}
-                                            value={this.state.phoneExtension}
-                                            placeholder="100"
-                                            errorText={this.state.phoneExtensionError}
-                                            onBlur={this.validatePhoneExtensionInput}
-                                            onChangeText={phoneExtension => this.setState({phoneExtension})}
-                                            containerStyles={[styles.mt4]}
-                                        />
-                                        <Text style={[styles.textMicroSupporting, styles.mt4]}>{this.getWaitTimeMessage()}</Text>
-                                    </Section>
-                                </FormElement>
-                            </ScrollView>
-                            <FixedFooter>
-                                {isBlockedFromConcierge && (
-                                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
-                                        <Icon src={Expensicons.Exclamation} fill={colors.yellow} />
-                                        <Text style={[styles.mutedTextLabel, styles.ml2, styles.flex1]}>{this.props.translate('requestCallPage.blockedFromConcierge')}</Text>
-                                    </View>
-                                )}
-                                {!_.isEmpty(this.props.requestCallForm.error) && (
-                                    <Text style={styles.formError}>
-                                        {this.props.requestCallForm.error}
-                                    </Text>
-                                )}
-                                <FormAlertWithSubmitButton
-                                    buttonText={this.props.translate('requestCallPage.callMe')}
-                                    onSubmit={this.onSubmit}
-                                    containerStyles={[styles.w100, styles.mb2, styles.mh0, styles.flexReset]}
-                                    isLoading={this.props.requestCallForm.loading}
-                                    isDisabled={isBlockedFromConcierge}
-                                />
-                            </FixedFooter>
-                        </>
-                    )}
+                                    )}
+                                    <FormAlertWithSubmitButton
+                                        buttonText={this.props.translate('requestCallPage.callMe')}
+                                        onSubmit={this.onSubmit}
+                                        containerStyles={[styles.w100, styles.mb2, styles.mh0, styles.flexReset]}
+                                        isLoading={this.props.requestCallForm.loading}
+                                        isDisabled={isBlockedFromConcierge}
+                                    />
+                                </FixedFooter>
+                            </>
+                        )}
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 4cc4589ec04d..6410b34dcf3f 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -16,6 +16,7 @@ import Permissions from '../../libs/Permissions';
 import * as ReportUtils from '../../libs/ReportUtils';
 import ReportActionsView from './report/ReportActionsView';
 import ReportActionCompose from './report/ReportActionCompose';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import SwipeableView from '../../components/SwipeableView';
 import CONST from '../../CONST';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
@@ -214,49 +215,51 @@ class ReportScreen extends React.Component {
 
         return (
             <ScreenWrapper style={[styles.appContent, styles.flex1, {marginTop: this.state.viewportOffsetTop}]}>
-                <HeaderView
-                    reportID={reportID}
-                    onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
-                />
-
-                <View
-                    nativeID={CONST.REPORT.DROP_NATIVE_ID}
-                    style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
-                >
-                    {this.shouldShowLoader() && <FullScreenLoadingIndicator />}
-                    {!this.shouldShowLoader() && (
-                        <ReportActionsView
-                            reportID={reportID}
-                            reportActions={this.props.reportActions}
-                            report={this.props.report}
-                            session={this.props.session}
-                            isComposerFullSize={this.props.isComposerFullSize}
-                        />
-                    )}
-                    {(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
-                    <View style={[styles.chatFooter, this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
-                        {
-                            isArchivedRoom
-                                ? (
-                                    <ArchivedReportFooter
-                                        reportClosedAction={reportClosedAction}
-                                        report={this.props.report}
-                                    />
-                                ) : (
-                                    <SwipeableView onSwipeDown={Keyboard.dismiss}>
-                                        <ReportActionCompose
-                                            onSubmit={this.onSubmitComment}
-                                            reportID={reportID}
-                                            reportActions={this.props.reportActions}
+                <KeyboardAvoidingView>
+                    <HeaderView
+                        reportID={reportID}
+                        onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
+                    />
+
+                    <View
+                        nativeID={CONST.REPORT.DROP_NATIVE_ID}
+                        style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
+                    >
+                        {this.shouldShowLoader() && <FullScreenLoadingIndicator />}
+                        {!this.shouldShowLoader() && (
+                            <ReportActionsView
+                                reportID={reportID}
+                                reportActions={this.props.reportActions}
+                                report={this.props.report}
+                                session={this.props.session}
+                                isComposerFullSize={this.props.isComposerFullSize}
+                            />
+                        )}
+                        {(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
+                        <View style={[styles.chatFooter, this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
+                            {
+                                isArchivedRoom
+                                    ? (
+                                        <ArchivedReportFooter
+                                            reportClosedAction={reportClosedAction}
                                             report={this.props.report}
-                                            isComposerFullSize={this.props.isComposerFullSize}
                                         />
-                                    </SwipeableView>
-                                )
-                        }
+                                    ) : (
+                                        <SwipeableView onSwipeDown={Keyboard.dismiss}>
+                                            <ReportActionCompose
+                                                onSubmit={this.onSubmitComment}
+                                                reportID={reportID}
+                                                reportActions={this.props.reportActions}
+                                                report={this.props.report}
+                                                isComposerFullSize={this.props.isComposerFullSize}
+                                            />
+                                        </SwipeableView>
+                                    )
+                            }
+                        </View>
+                        )}
                     </View>
-                    )}
-                </View>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index c2cf3b9262b3..fd45bd61626b 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -669,7 +669,7 @@ class ReportActionCompose extends React.Component {
                     </View>
                 </View>
                 <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                    {!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRowOffset]} />}
+                    <OfflineIndicator />
                     <ReportTypingIndicator reportID={this.props.reportID} />
                     <ExceededCommentLength commentLength={this.comment.length} />
                 </View>
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index d0f9861ee819..b8b408b4c815 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -10,6 +10,7 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import * as IOU from '../../libs/actions/IOU';
 import * as CurrencySymbolUtils from '../../libs/CurrencySymbolUtils';
 import {withNetwork} from '../../components/OnyxProvider';
@@ -116,19 +117,21 @@ class IOUCurrencySelection extends Component {
         const headerMessage = this.state.searchValue.trim() && !this.state.currencyData.length ? this.props.translate('common.noResultsFound') : '';
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('iOUCurrencySelection.selectCurrency')}
-                    onCloseButtonPress={Navigation.goBack}
-                />
-                <OptionsSelector
-                    sections={this.getSections()}
-                    onSelectRow={this.confirmCurrencySelection}
-                    value={this.state.searchValue}
-                    onChangeText={this.changeSearchValue}
-                    shouldDelayFocus
-                    placeholderText={this.props.translate('common.search')}
-                    headerMessage={headerMessage}
-                />
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('iOUCurrencySelection.selectCurrency')}
+                        onCloseButtonPress={Navigation.goBack}
+                    />
+                    <OptionsSelector
+                        sections={this.getSections()}
+                        onSelectRow={this.confirmCurrencySelection}
+                        value={this.state.searchValue}
+                        onChangeText={this.changeSearchValue}
+                        shouldDelayFocus
+                        placeholderText={this.props.translate('common.search')}
+                        headerMessage={headerMessage}
+                    />
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index 508456ebe9a4..98988f7a5ba3 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -23,6 +23,7 @@ import AnimatedStep from '../../components/AnimatedStep';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import Tooltip from '../../components/Tooltip';
 import CONST from '../../CONST';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import * as PersonalDetails from '../../libs/actions/PersonalDetails';
 import withCurrentUserPersonalDetails from '../../components/withCurrentUserPersonalDetails';
 import ROUTES from '../../ROUTES';
@@ -357,7 +358,7 @@ class IOUModal extends Component {
         return (
             <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
-                    <>
+                    <KeyboardAvoidingView>
                         <View style={[styles.headerBar]}>
                             <View style={[
                                 styles.dFlex,
@@ -450,7 +451,7 @@ class IOUModal extends Component {
                                 </>
                             )}
                         </View>
-                    </>
+                    </KeyboardAvoidingView>
                 )}
             </ScreenWrapper>
         );
diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
index afffdb7cfdbd..7a15526de572 100755
--- a/src/pages/settings/AddSecondaryLoginPage.js
+++ b/src/pages/settings/AddSecondaryLoginPage.js
@@ -14,6 +14,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import Button from '../../components/Button';
 import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import FixedFooter from '../../components/FixedFooter';
@@ -100,60 +101,62 @@ class AddSecondaryLoginPage extends Component {
                 this.phoneNumberInputRef.focus();
             }}
             >
-                <HeaderWithCloseButton
-                    title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                        ? 'addSecondaryLoginPage.addPhoneNumber'
-                        : 'addSecondaryLoginPage.addEmailAddress')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
-                <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                    <Text style={[styles.mb6]}>
-                        {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                            ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
-                            : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
-                    </Text>
-                    <View style={styles.mb6}>
-                        <TextInput
-                            label={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
-                                ? 'common.phoneNumber'
-                                : 'profilePage.emailAddress')}
-                            ref={el => this.phoneNumberInputRef = el}
-                            value={this.state.login}
-                            onChangeText={this.onSecondaryLoginChange}
-                            keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
-                                ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
-                            returnKeyType="done"
-                        />
-                    </View>
-                    <View style={styles.mb6}>
-                        <TextInput
-                            label={this.props.translate('common.password')}
-                            value={this.state.password}
-                            onChangeText={password => this.setState({password})}
-                            secureTextEntry
-                            autoCompleteType="password"
-                            textContentType="password"
-                            onSubmitEditing={this.submitForm}
-                        />
-                    </View>
-                    {!_.isEmpty(this.props.user.error) && (
-                        <Text style={styles.formError}>
-                            {this.props.user.error}
-                        </Text>
-                    )}
-                </ScrollView>
-                <FixedFooter style={[styles.flexGrow0]}>
-                    <Button
-                        success
-                        isDisabled={this.validateForm()}
-                        isLoading={this.props.user.loading}
-                        text={this.props.translate('addSecondaryLoginPage.sendValidation')}
-                        onPress={this.submitForm}
-                        pressOnEnter
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                            ? 'addSecondaryLoginPage.addPhoneNumber'
+                            : 'addSecondaryLoginPage.addEmailAddress')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
                     />
-                </FixedFooter>
+                    <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                        <Text style={[styles.mb6]}>
+                            {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                                ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
+                                : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
+                        </Text>
+                        <View style={styles.mb6}>
+                            <TextInput
+                                label={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+                                    ? 'common.phoneNumber'
+                                    : 'profilePage.emailAddress')}
+                                ref={el => this.phoneNumberInputRef = el}
+                                value={this.state.login}
+                                onChangeText={this.onSecondaryLoginChange}
+                                keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
+                                    ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
+                                returnKeyType="done"
+                            />
+                        </View>
+                        <View style={styles.mb6}>
+                            <TextInput
+                                label={this.props.translate('common.password')}
+                                value={this.state.password}
+                                onChangeText={password => this.setState({password})}
+                                secureTextEntry
+                                autoCompleteType="password"
+                                textContentType="password"
+                                onSubmitEditing={this.submitForm}
+                            />
+                        </View>
+                        {!_.isEmpty(this.props.user.error) && (
+                            <Text style={styles.formError}>
+                                {this.props.user.error}
+                            </Text>
+                        )}
+                    </ScrollView>
+                    <FixedFooter style={[styles.flexGrow0]}>
+                        <Button
+                            success
+                            isDisabled={this.validateForm()}
+                            isLoading={this.props.user.loading}
+                            text={this.props.translate('addSecondaryLoginPage.sendValidation')}
+                            onPress={this.submitForm}
+                            pressOnEnter
+                        />
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index 69270c2bacaf..2e5aeb84189d 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -14,6 +14,7 @@ import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as User from '../../libs/actions/User';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import FixedFooter from '../../components/FixedFooter';
 import TextInput from '../../components/TextInput';
 import * as Session from '../../libs/actions/Session';
@@ -146,84 +147,86 @@ class PasswordPage extends Component {
                 this.currentPasswordInputRef.focus();
             }}
             >
-                <HeaderWithCloseButton
-                    title={this.props.translate('passwordPage.changePassword')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                {!_.isEmpty(this.props.account.success)
-                    ? (
-                        <PasswordConfirmationScreen />
-                    ) : (
-                        <>
-                            <ScrollView
-                                style={styles.flex1}
-                                contentContainerStyle={styles.p5}
-
-                                // Allow the user to click show password while password input is focused.
-                                // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                                keyboardShouldPersistTaps="always"
-                            >
-                                <Text style={[styles.mb6]}>
-                                    {this.props.translate('passwordPage.changingYourPasswordPrompt')}
-                                </Text>
-                                <View style={styles.mb6}>
-                                    <TextInput
-                                        label={`${this.props.translate('passwordPage.currentPassword')}*`}
-                                        ref={el => this.currentPasswordInputRef = el}
-                                        secureTextEntry
-                                        autoCompleteType="password"
-                                        textContentType="password"
-                                        value={this.state.currentPassword}
-                                        onChangeText={text => this.clearErrorAndSetValue('currentPassword', text)}
-                                        returnKeyType="done"
-                                        hasError={this.state.errors.currentPassword}
-                                        errorText={this.getErrorText('currentPassword')}
-                                        onSubmitEditing={this.submit}
-                                    />
-                                </View>
-                                <View style={styles.mb6}>
-                                    <TextInput
-                                        label={`${this.props.translate('passwordPage.newPassword')}*`}
-                                        secureTextEntry
-                                        autoCompleteType="password"
-                                        textContentType="password"
-                                        value={this.state.newPassword}
-                                        hasError={this.state.errors.newPassword || this.state.errors.newPasswordSameAsOld}
-                                        errorText={this.state.errors.newPasswordSameAsOld
-                                            ? this.getErrorText('newPasswordSameAsOld')
-                                            : this.getErrorText('newPassword')}
-                                        onChangeText={text => this.clearErrorAndSetValue('newPassword', text, ['newPasswordSameAsOld'])}
-                                        onSubmitEditing={this.submit}
-                                    />
-                                    {shouldShowNewPasswordPrompt && (
-                                    <Text
-                                        style={[
-                                            styles.textLabelSupporting,
-                                            styles.mt1,
-                                        ]}
-                                    >
-                                        {this.props.translate('passwordPage.newPasswordPrompt')}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('passwordPage.changePassword')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.goBack()}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    />
+                    {!_.isEmpty(this.props.account.success)
+                        ? (
+                            <PasswordConfirmationScreen />
+                        ) : (
+                            <>
+                                <ScrollView
+                                    style={styles.flex1}
+                                    contentContainerStyle={styles.p5}
+
+                                    // Allow the user to click show password while password input is focused.
+                                    // eslint-disable-next-line react/jsx-props-no-multi-spaces
+                                    keyboardShouldPersistTaps="always"
+                                >
+                                    <Text style={[styles.mb6]}>
+                                        {this.props.translate('passwordPage.changingYourPasswordPrompt')}
+                                    </Text>
+                                    <View style={styles.mb6}>
+                                        <TextInput
+                                            label={`${this.props.translate('passwordPage.currentPassword')}*`}
+                                            ref={el => this.currentPasswordInputRef = el}
+                                            secureTextEntry
+                                            autoCompleteType="password"
+                                            textContentType="password"
+                                            value={this.state.currentPassword}
+                                            onChangeText={text => this.clearErrorAndSetValue('currentPassword', text)}
+                                            returnKeyType="done"
+                                            hasError={this.state.errors.currentPassword}
+                                            errorText={this.getErrorText('currentPassword')}
+                                            onSubmitEditing={this.submit}
+                                        />
+                                    </View>
+                                    <View style={styles.mb6}>
+                                        <TextInput
+                                            label={`${this.props.translate('passwordPage.newPassword')}*`}
+                                            secureTextEntry
+                                            autoCompleteType="password"
+                                            textContentType="password"
+                                            value={this.state.newPassword}
+                                            hasError={this.state.errors.newPassword || this.state.errors.newPasswordSameAsOld}
+                                            errorText={this.state.errors.newPasswordSameAsOld
+                                                ? this.getErrorText('newPasswordSameAsOld')
+                                                : this.getErrorText('newPassword')}
+                                            onChangeText={text => this.clearErrorAndSetValue('newPassword', text, ['newPasswordSameAsOld'])}
+                                            onSubmitEditing={this.submit}
+                                        />
+                                        {shouldShowNewPasswordPrompt && (
+                                        <Text
+                                            style={[
+                                                styles.textLabelSupporting,
+                                                styles.mt1,
+                                            ]}
+                                        >
+                                            {this.props.translate('passwordPage.newPasswordPrompt')}
+                                        </Text>
+                                        )}
+                                    </View>
+                                    {_.every(this.state.errors, error => !error) && !_.isEmpty(this.props.account.error) && (
+                                    <Text style={styles.formError}>
+                                        {this.props.account.error}
                                     </Text>
                                     )}
-                                </View>
-                                {_.every(this.state.errors, error => !error) && !_.isEmpty(this.props.account.error) && (
-                                <Text style={styles.formError}>
-                                    {this.props.account.error}
-                                </Text>
-                                )}
-                            </ScrollView>
-                            <FixedFooter style={[styles.flexGrow0]}>
-                                <Button
-                                    success
-                                    isLoading={this.props.account.loading}
-                                    text={this.props.translate('common.save')}
-                                    onPress={this.submit}
-                                />
-                            </FixedFooter>
-                        </>
-                    )}
+                                </ScrollView>
+                                <FixedFooter style={[styles.flexGrow0]}>
+                                    <Button
+                                        success
+                                        isLoading={this.props.account.loading}
+                                        text={this.props.translate('common.save')}
+                                        onPress={this.submit}
+                                    />
+                                </FixedFooter>
+                            </>
+                        )}
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js
index b59619f8e052..9e1ccee29c72 100644
--- a/src/pages/settings/Payments/AddDebitCardPage.js
+++ b/src/pages/settings/Payments/AddDebitCardPage.js
@@ -9,6 +9,7 @@ import Text from '../../../components/Text';
 import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import * as ValidationUtils from '../../../libs/ValidationUtils';
 import CheckboxWithLabel from '../../../components/CheckboxWithLabel';
 import StatePicker from '../../../components/StatePicker';
@@ -87,92 +88,94 @@ class DebitCardPage extends Component {
     render() {
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('addDebitCardPage.addADebitCard')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <Form
-                    formID={ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM}
-                    validate={this.validate}
-                    onSubmit={PaymentMethods.addBillingCard}
-                    submitButtonText={this.props.translate('common.save')}
-                    style={[styles.mh5, styles.flexGrow1]}
-                >
-                    <TextInput
-                        inputID="nameOnCard"
-                        label={this.props.translate('addDebitCardPage.nameOnCard')}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('addDebitCardPage.addADebitCard')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.goBack()}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
-                    <TextInput
-                        inputID="cardNumber"
-                        label={this.props.translate('addDebitCardPage.debitCardNumber')}
-                        containerStyles={[styles.mt4]}
-                        keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                    />
-                    <View style={[styles.flexRow, styles.mt4]}>
-                        <View style={[styles.flex1, styles.mr2]}>
-                            <TextInput
-                                inputID="expirationDate"
-                                label={this.props.translate('addDebitCardPage.expiration')}
-                                placeholder={this.props.translate('addDebitCardPage.expirationDate')}
-                                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                            />
-                        </View>
-                        <View style={[styles.flex1]}>
-                            <TextInput
-                                inputID="securityCode"
-                                label={this.props.translate('addDebitCardPage.cvv')}
-                                maxLength={4}
-                                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                            />
-                        </View>
-                    </View>
-                    <View>
-                        <AddressSearch
-                            inputID="addressStreet"
-                            label={this.props.translate('addDebitCardPage.billingAddress')}
+                    <Form
+                        formID={ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM}
+                        validate={this.validate}
+                        onSubmit={PaymentMethods.addBillingCard}
+                        submitButtonText={this.props.translate('common.save')}
+                        style={[styles.mh5, styles.flexGrow1]}
+                    >
+                        <TextInput
+                            inputID="nameOnCard"
+                            label={this.props.translate('addDebitCardPage.nameOnCard')}
+                        />
+                        <TextInput
+                            inputID="cardNumber"
+                            label={this.props.translate('addDebitCardPage.debitCardNumber')}
                             containerStyles={[styles.mt4]}
+                            keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                         />
-                    </View>
-                    <View style={[styles.flexRow, styles.mt4]}>
-                        <View style={[styles.flex2, styles.mr2]}>
-                            <TextInput
-                                inputID="addressZipCode"
-                                label={this.props.translate('common.zip')}
-                                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
+                        <View style={[styles.flexRow, styles.mt4]}>
+                            <View style={[styles.flex1, styles.mr2]}>
+                                <TextInput
+                                    inputID="expirationDate"
+                                    label={this.props.translate('addDebitCardPage.expiration')}
+                                    placeholder={this.props.translate('addDebitCardPage.expirationDate')}
+                                    keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                                />
+                            </View>
+                            <View style={[styles.flex1]}>
+                                <TextInput
+                                    inputID="securityCode"
+                                    label={this.props.translate('addDebitCardPage.cvv')}
+                                    maxLength={4}
+                                    keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                                />
+                            </View>
+                        </View>
+                        <View>
+                            <AddressSearch
+                                inputID="addressStreet"
+                                label={this.props.translate('addDebitCardPage.billingAddress')}
+                                containerStyles={[styles.mt4]}
                             />
                         </View>
-                        <View style={[styles.flex1]}>
-                            <StatePicker
-                                inputID="addressState"
+                        <View style={[styles.flexRow, styles.mt4]}>
+                            <View style={[styles.flex2, styles.mr2]}>
+                                <TextInput
+                                    inputID="addressZipCode"
+                                    label={this.props.translate('common.zip')}
+                                    keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                                    maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
+                                />
+                            </View>
+                            <View style={[styles.flex1]}>
+                                <StatePicker
+                                    inputID="addressState"
+                                />
+                            </View>
+                        </View>
+                        <View style={[styles.mt4]}>
+                            <TextInput
+                                inputID="password"
+                                label={this.props.translate('addDebitCardPage.expensifyPassword')}
+                                textContentType="password"
+                                autoCompleteType={ComponentUtils.PASSWORD_AUTOCOMPLETE_TYPE}
+                                secureTextEntry
                             />
                         </View>
-                    </View>
-                    <View style={[styles.mt4]}>
-                        <TextInput
-                            inputID="password"
-                            label={this.props.translate('addDebitCardPage.expensifyPassword')}
-                            textContentType="password"
-                            autoCompleteType={ComponentUtils.PASSWORD_AUTOCOMPLETE_TYPE}
-                            secureTextEntry
+                        <CheckboxWithLabel
+                            inputID="acceptedTerms"
+                            LabelComponent={() => (
+                                <>
+                                    <Text>{`${this.props.translate('common.iAcceptThe')}`}</Text>
+                                    <TextLink href="https://use.expensify.com/terms">
+                                        {`${this.props.translate('addDebitCardPage.expensifyTermsOfService')}`}
+                                    </TextLink>
+                                </>
+                            )}
+                            style={[styles.mt4]}
+                            shouldSaveDraft
                         />
-                    </View>
-                    <CheckboxWithLabel
-                        inputID="acceptedTerms"
-                        LabelComponent={() => (
-                            <>
-                                <Text>{`${this.props.translate('common.iAcceptThe')}`}</Text>
-                                <TextLink href="https://use.expensify.com/terms">
-                                    {`${this.props.translate('addDebitCardPage.expensifyTermsOfService')}`}
-                                </TextLink>
-                            </>
-                        )}
-                        style={[styles.mt4]}
-                        shouldSaveDraft
-                    />
-                </Form>
+                    </Form>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index 2e8bdff1d8e7..fde6b501547a 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -13,6 +13,7 @@ import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
 import Button from '../../../components/Button';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import FixedFooter from '../../../components/FixedFooter';
 import Growl from '../../../libs/Growl';
 import TextInput from '../../../components/TextInput';
@@ -60,42 +61,44 @@ class AddPayPalMePage extends React.Component {
     render() {
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('common.payPalMe')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <View style={[styles.flex1, styles.p5]}>
-                    <View style={[styles.flex1]}>
-                        <Text style={[styles.mb4]}>
-                            {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
-                        </Text>
-                        <TextInput
-                            label={this.props.translate('addPayPalMePage.payPalMe')}
-                            autoCompleteType="off"
-                            autoCorrect={false}
-                            value={this.state.payPalMeUsername}
-                            placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
-                            onChangeText={text => this.setState({payPalMeUsername: text, payPalMeUsernameError: false})}
-                            returnKeyType="done"
-                            hasError={this.state.payPalMeUsernameError}
-                            errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
-                        />
-                    </View>
-                </View>
-                <FixedFooter>
-                    <Button
-                        success
-                        onPress={this.setPayPalMeUsername}
-                        pressOnEnter
-                        style={[styles.mt3]}
-                        isDisabled={this.state.payPalMeUsername === this.props.payPalMeUsername}
-                        text={this.props.payPalMeUsername
-                            ? this.props.translate('addPayPalMePage.editPayPalAccount')
-                            : this.props.translate('addPayPalMePage.addPayPalAccount')}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('common.payPalMe')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
-                </FixedFooter>
+                    <View style={[styles.flex1, styles.p5]}>
+                        <View style={[styles.flex1]}>
+                            <Text style={[styles.mb4]}>
+                                {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
+                            </Text>
+                            <TextInput
+                                label={this.props.translate('addPayPalMePage.payPalMe')}
+                                autoCompleteType="off"
+                                autoCorrect={false}
+                                value={this.state.payPalMeUsername}
+                                placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
+                                onChangeText={text => this.setState({payPalMeUsername: text, payPalMeUsernameError: false})}
+                                returnKeyType="done"
+                                hasError={this.state.payPalMeUsernameError}
+                                errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
+                            />
+                        </View>
+                    </View>
+                    <FixedFooter>
+                        <Button
+                            success
+                            onPress={this.setPayPalMeUsername}
+                            pressOnEnter
+                            style={[styles.mt3]}
+                            isDisabled={this.state.payPalMeUsername === this.props.payPalMeUsername}
+                            text={this.props.payPalMeUsername
+                                ? this.props.translate('addPayPalMePage.editPayPalAccount')
+                                : this.props.translate('addPayPalMePage.addPayPalAccount')}
+                        />
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js
index 99d0b1fe2623..b1d878340048 100644
--- a/src/pages/settings/Payments/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js
@@ -5,6 +5,7 @@ import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import Navigation from '../../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import CONST from '../../../CONST';
 import PaymentMethodList from './PaymentMethodList';
 import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
@@ -57,28 +58,30 @@ const ChooseTransferAccountPage = (props) => {
 
     return (
         <ScreenWrapper>
-            <HeaderWithCloseButton
-                title={props.translate('chooseTransferAccountPage.chooseAccount')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack()}
-                onCloseButtonPress={() => Navigation.dismissModal()}
-            />
-            <View style={[styles.mt6, styles.flexShrink1, styles.flexBasisAuto]}>
-                <PaymentMethodList
-                    onPress={selectAccountAndNavigateBack}
-                    shouldShowSelectedState
-                    filterType={props.walletTransfer.filterPaymentMethodType}
-                    selectedMethodID={props.walletTransfer.selectedAccountID}
-                    shouldShowAddPaymentMethodButton={false}
+            <KeyboardAvoidingView>
+                <HeaderWithCloseButton
+                    title={props.translate('chooseTransferAccountPage.chooseAccount')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.goBack()}
+                    onCloseButtonPress={() => Navigation.dismissModal()}
                 />
-            </View>
-            <MenuItem
-                onPress={navigateToAddPaymentMethodPage}
-                title={props.walletTransfer.filterPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
-                    ? props.translate('paymentMethodList.addNewBankAccount')
-                    : props.translate('paymentMethodList.addNewDebitCard')}
-                icon={Expensicons.Plus}
-            />
+                <View style={[styles.mt6, styles.flexShrink1, styles.flexBasisAuto]}>
+                    <PaymentMethodList
+                        onPress={selectAccountAndNavigateBack}
+                        shouldShowSelectedState
+                        filterType={props.walletTransfer.filterPaymentMethodType}
+                        selectedMethodID={props.walletTransfer.selectedAccountID}
+                        shouldShowAddPaymentMethodButton={false}
+                    />
+                </View>
+                <MenuItem
+                    onPress={navigateToAddPaymentMethodPage}
+                    title={props.walletTransfer.filterPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
+                        ? props.translate('paymentMethodList.addNewBankAccount')
+                        : props.translate('paymentMethodList.addNewDebitCard')}
+                    icon={Expensicons.Plus}
+                />
+            </KeyboardAvoidingView>
         </ScreenWrapper>
     );
 };
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index c8b5b803add4..37cb282937b1 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -14,6 +14,7 @@ import Navigation from '../../../../libs/Navigation/Navigation';
 import styles from '../../../../styles/styles';
 import withLocalize from '../../../../components/withLocalize';
 import compose from '../../../../libs/compose';
+import KeyboardAvoidingView from '../../../../components/KeyboardAvoidingView/index';
 import * as BankAccounts from '../../../../libs/actions/BankAccounts';
 import Popover from '../../../../components/Popover';
 import MenuItem from '../../../../components/MenuItem';
@@ -32,7 +33,7 @@ import KYCWall from '../../../../components/KYCWall';
 import {propTypes, defaultProps} from './paymentsPagePropTypes';
 import {withNetwork} from '../../../../components/OnyxProvider';
 import * as PaymentUtils from '../../../../libs/PaymentUtils';
-import OfflineIndicator from '../../../../components/OfflineIndicator';
+import ConfirmModal from '../../../../components/ConfirmModal';
 
 class BasePaymentsPage extends React.Component {
     constructor(props) {
@@ -265,176 +266,190 @@ class BasePaymentsPage extends React.Component {
         const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth;
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('common.payments')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <View style={styles.flex1}>
-                    {Permissions.canUseWallet(this.props.betas) && (
-                        <>
-                            <View style={[styles.mv5]}>
-                                <CurrentWalletBalance />
-                            </View>
-                            {this.props.userWallet.currentBalance > 0 && (
-                                <KYCWall
-                                    onSuccessfulKYC={this.navigateToTransferBalancePage}
-                                    enablePaymentsRoute={ROUTES.SETTINGS_ENABLE_PAYMENTS}
-                                    addBankAccountRoute={ROUTES.SETTINGS_ADD_BANK_ACCOUNT}
-                                    addDebitCardRoute={ROUTES.SETTINGS_ADD_DEBIT_CARD}
-                                    popoverPlacement="bottom"
-                                >
-                                    {triggerKYCFlow => (
-                                        <MenuItem
-                                            title={this.props.translate('common.transferBalance')}
-                                            icon={Expensicons.Transfer}
-                                            onPress={triggerKYCFlow}
-                                            shouldShowRightIcon
-                                            disabled={this.props.network.isOffline}
-                                        />
-                                    )}
-                                </KYCWall>
-                            )}
-                        </>
-                    )}
-                    <Text
-                        style={[styles.ph5, styles.mt6, styles.formLabel]}
-                    >
-                        {this.props.translate('paymentsPage.paymentMethodsTitle')}
-                    </Text>
-                    <PaymentMethodList
-                        onPress={this.paymentMethodPressed}
-                        style={[styles.flex4]}
-                        isAddPaymentMenuActive={this.state.shouldShowAddPaymentMenu}
-                        actionPaymentMethodType={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt || this.state.shouldShowConfirmPopover
-                            ? this.state.selectedPaymentMethodType
-                            : ''}
-                        activePaymentMethodID={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt || this.state.shouldShowConfirmPopover
-                            ? this.getSelectedPaymentMethodID()
-                            : ''}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('common.payments')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
-                </View>
-                <AddPaymentMethodMenu
-                    isVisible={this.state.shouldShowAddPaymentMenu}
-                    onClose={this.hideAddPaymentMenu}
-                    anchorPosition={{
-                        top: this.state.anchorPositionTop,
-                        left: this.state.anchorPositionLeft,
-                    }}
-                    onItemSelected={method => this.addPaymentMethodTypePressed(method)}
-                />
-                <Popover
-                    isVisible={this.state.shouldShowDefaultDeleteMenu}
-                    onClose={this.hideDefaultDeleteMenu}
-                    anchorPosition={{
-                        top: this.state.anchorPositionTop,
-                        left: this.state.anchorPositionLeft,
-                    }}
-                >
-                    <View
-                        style={[
-                            styles.m5,
-                            !this.props.isSmallScreenWidth ? styles.sidebarPopover : '',
-                        ]}
-                    >
-                        {isPopoverBottomMount && (
-                            <MenuItem
-                                title={this.state.formattedSelectedPaymentMethod.title || ''}
-                                icon={this.state.formattedSelectedPaymentMethod.icon}
-                                description={this.state.formattedSelectedPaymentMethod.description}
-                                wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
-                                disabled
-                                interactive={false}
-                            />
+                    <View style={styles.flex1}>
+                        {Permissions.canUseWallet(this.props.betas) && (
+                            <>
+                                <View style={[styles.mv5]}>
+                                    <CurrentWalletBalance />
+                                </View>
+                                {this.props.userWallet.currentBalance > 0 && (
+                                    <KYCWall
+                                        onSuccessfulKYC={this.navigateToTransferBalancePage}
+                                        enablePaymentsRoute={ROUTES.SETTINGS_ENABLE_PAYMENTS}
+                                        addBankAccountRoute={ROUTES.SETTINGS_ADD_BANK_ACCOUNT}
+                                        addDebitCardRoute={ROUTES.SETTINGS_ADD_DEBIT_CARD}
+                                        popoverPlacement="bottom"
+                                    >
+                                        {triggerKYCFlow => (
+                                            <MenuItem
+                                                title={this.props.translate('common.transferBalance')}
+                                                icon={Expensicons.Transfer}
+                                                onPress={triggerKYCFlow}
+                                                shouldShowRightIcon
+                                                disabled={this.props.network.isOffline}
+                                            />
+                                        )}
+                                    </KYCWall>
+                                )}
+                            </>
                         )}
-                        {shouldShowMakeDefaultButton && (
+                        <Text
+                            style={[styles.ph5, styles.mt6, styles.formLabel]}
+                        >
+                            {this.props.translate('paymentsPage.paymentMethodsTitle')}
+                        </Text>
+                        <PaymentMethodList
+                            onPress={this.paymentMethodPressed}
+                            style={[styles.flex4]}
+                            isAddPaymentMenuActive={this.state.shouldShowAddPaymentMenu}
+                            actionPaymentMethodType={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt || this.state.shouldShowConfirmPopover
+                                ? this.state.selectedPaymentMethodType
+                                : ''}
+                            activePaymentMethodID={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt || this.state.shouldShowConfirmPopover
+                                ? this.getSelectedPaymentMethodID()
+                                : ''}
+                        />
+                    </View>
+                    <AddPaymentMethodMenu
+                        isVisible={this.state.shouldShowAddPaymentMenu}
+                        onClose={this.hideAddPaymentMenu}
+                        anchorPosition={{
+                            top: this.state.anchorPositionTop,
+                            left: this.state.anchorPositionLeft,
+                        }}
+                        onItemSelected={method => this.addPaymentMethodTypePressed(method)}
+                    />
+                    <Popover
+                        isVisible={this.state.shouldShowDefaultDeleteMenu}
+                        onClose={this.hideDefaultDeleteMenu}
+                        anchorPosition={{
+                            top: this.state.anchorPositionTop,
+                            left: this.state.anchorPositionLeft,
+                        }}
+                    >
+                        <View
+                            style={[
+                                styles.m5,
+                                !this.props.isSmallScreenWidth ? styles.sidebarPopover : '',
+                            ]}
+                        >
+                            {isPopoverBottomMount && (
+                                <MenuItem
+                                    title={this.state.formattedSelectedPaymentMethod.title || ''}
+                                    icon={this.state.formattedSelectedPaymentMethod.icon}
+                                    description={this.state.formattedSelectedPaymentMethod.description}
+                                    wrapperStyle={[styles.pv0, styles.ph0, styles.mb4]}
+                                    disabled
+                                    interactive={false}
+                                />
+                            )}
+                            {shouldShowMakeDefaultButton && (
+                                <TouchableOpacity
+                                    onPress={() => {
+                                        this.setState({
+                                            shouldShowDefaultDeleteMenu: false,
+                                        });
+
+                                        // Wait for the previous modal to close, before opening a new one. A modal will be considered completely closed when closing animation is finished.
+                                        // InteractionManager fires after the currently running animation is completed.
+                                        // https://github.com/Expensify/App/issues/7768#issuecomment-1044879541
+                                        InteractionManager.runAfterInteractions(() => {
+                                            this.setState({
+                                                shouldShowPasswordPrompt: true,
+                                                passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
+                                            });
+                                        });
+                                    }}
+                                    style={[styles.button, styles.alignSelfCenter, styles.w100]}
+                                >
+                                    <Text style={[styles.buttonText]}>
+                                        {this.props.translate('paymentsPage.setDefaultConfirmation')}
+                                    </Text>
+                                </TouchableOpacity>
+                            )}
                             <TouchableOpacity
                                 onPress={() => {
                                     this.setState({
                                         shouldShowDefaultDeleteMenu: false,
                                     });
-
-                                    // Wait for the previous modal to close, before opening a new one. A modal will be considered completely closed when closing animation is finished.
-                                    // InteractionManager fires after the currently running animation is completed.
-                                    // https://github.com/Expensify/App/issues/7768#issuecomment-1044879541
                                     InteractionManager.runAfterInteractions(() => {
                                         this.setState({
-                                            shouldShowPasswordPrompt: true,
-                                            passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
+                                            shouldShowConfirmPopover: true,
                                         });
                                     });
                                 }}
-                                style={[styles.button, styles.alignSelfCenter, styles.w100]}
+                                style={[
+                                    styles.button,
+                                    styles.buttonDanger,
+                                    shouldShowMakeDefaultButton && styles.mt4,
+                                    styles.alignSelfCenter,
+                                    styles.w100,
+                                ]}
                             >
-                                <Text style={[styles.buttonText]}>
-                                    {this.props.translate('paymentsPage.setDefaultConfirmation')}
+                                <Text style={[styles.buttonText, styles.textWhite]}>
+                                    {this.props.translate('common.delete')}
                                 </Text>
                             </TouchableOpacity>
-                        )}
-                        <TouchableOpacity
-                            onPress={() => {
-                                this.setState({
-                                    shouldShowDefaultDeleteMenu: false,
-                                });
-                                InteractionManager.runAfterInteractions(() => {
-                                    this.setState({
-                                        shouldShowConfirmPopover: true,
-                                    });
-                                });
-                            }}
-                            style={[
-                                styles.button,
-                                styles.buttonDanger,
-                                shouldShowMakeDefaultButton && styles.mt4,
-                                styles.alignSelfCenter,
-                                styles.w100,
-                            ]}
-                        >
-                            <Text style={[styles.buttonText, styles.textWhite]}>
-                                {this.props.translate('common.delete')}
-                            </Text>
-                        </TouchableOpacity>
-                    </View>
-                </Popover>
-                <PasswordPopover
-                    isVisible={this.state.shouldShowPasswordPrompt}
-                    onClose={this.hidePasswordPrompt}
-                    anchorPosition={{
-                        top: this.state.anchorPositionTop,
-                        left: this.state.anchorPositionLeft,
-                    }}
-                    onSubmit={(password) => {
-                        this.hidePasswordPrompt();
-                        this.makeDefaultPaymentMethod(password);
-                    }}
-                    submitButtonText={this.state.passwordButtonText}
-                    isDangerousAction
-                />
-                <ConfirmPopover
-                    contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined}
-                    isVisible={this.state.shouldShowConfirmPopover}
-                    title={this.props.translate('paymentsPage.deleteAccount')}
-                    prompt={this.props.translate('paymentsPage.deleteConfirmation')}
-                    confirmText={this.props.translate('common.delete')}
-                    cancelText={this.props.translate('common.cancel')}
-                    anchorPosition={{
-                        top: this.state.anchorPositionTop,
-                        left: this.state.anchorPositionLeft,
-                    }}
-                    onConfirm={() => {
-                        this.setState({
-                            shouldShowConfirmPopover: false,
-                        });
-                        this.deletePaymentMethod();
-                    }}
-                    onCancel={() => {
-                        this.setState({shouldShowConfirmPopover: false});
-                    }}
-                    shouldShowCancelButton
-                    danger
-                />
-                <OfflineIndicator containerStyles={[styles.ml5, styles.mv3]} />
+                        </View>
+                    </Popover>
+                    <PasswordPopover
+                        isVisible={this.state.shouldShowPasswordPrompt}
+                        onClose={this.hidePasswordPrompt}
+                        anchorPosition={{
+                            top: this.state.anchorPositionTop,
+                            left: this.state.anchorPositionLeft,
+                        }}
+                        onSubmit={(password) => {
+                            this.hidePasswordPrompt();
+                            this.makeDefaultPaymentMethod(password);
+                        }}
+                        submitButtonText={this.state.passwordButtonText}
+                        isDangerousAction
+                    />
+                    <ConfirmPopover
+                        contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined}
+                        isVisible={this.state.shouldShowConfirmPopover}
+                        title={this.props.translate('paymentsPage.deleteAccount')}
+                        prompt={this.props.translate('paymentsPage.deleteConfirmation')}
+                        confirmText={this.props.translate('common.delete')}
+                        cancelText={this.props.translate('common.cancel')}
+                        anchorPosition={{
+                            top: this.state.anchorPositionTop,
+                            left: this.state.anchorPositionLeft,
+                        }}
+                        onConfirm={() => {
+                            this.setState({
+                                shouldShowConfirmPopover: false,
+                            });
+                            this.deletePaymentMethod();
+                        }}
+                        onCancel={() => {
+                            this.setState({shouldShowConfirmPopover: false});
+                        }}
+                        shouldShowCancelButton
+                        danger
+                    />
+                    <ConfirmModal
+                        title={this.props.translate('paymentsPage.allSet')}
+                        onConfirm={PaymentMethods.dismissWalletConfirmModal}
+                        isVisible={this.props.walletTransfer.shouldShowConfirmModal}
+                        prompt={this.props.translate('paymentsPage.transferConfirmText', {
+                            amount: this.props.numberFormat(
+                                this.props.walletTransfer.transferAmount / 100,
+                                {style: 'currency', currency: 'USD'},
+                            ),
+                        })}
+                        confirmText={this.props.translate('paymentsPage.gotIt')}
+                        shouldShowCancelButton={false}
+                    />
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index a6694e785556..90173758fd88 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -10,6 +10,7 @@ import Navigation from '../../../libs/Navigation/Navigation';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Icon from '../../../components/Icon';
@@ -128,6 +129,15 @@ class TransferBalancePage extends React.Component {
         return selectedAccount || defaultAccount;
     }
 
+    /**
+     * @param {Number} transferAmount
+     * @param {Object} selectedAccount
+     */
+    saveTransferAmountAndStartTransfer(transferAmount, selectedAccount) {
+        PaymentMethods.saveWalletTransferAmount(transferAmount);
+        PaymentMethods.transferWalletBalance(selectedAccount);
+    }
+
     /**
      * @param {String} filterPaymentMethodType
      */
@@ -205,100 +215,101 @@ class TransferBalancePage extends React.Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('common.transferBalance')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <View style={[styles.flex1, styles.flexBasisAuto, styles.justifyContentCenter]}>
-                    <CurrentWalletBalance balanceStyles={[styles.transferBalanceBalance]} />
-                </View>
-                <ScrollView style={styles.flexGrow0} contentContainerStyle={styles.pv5}>
-                    <View style={styles.ph5}>
-                        {_.map(this.paymentTypes, paymentType => (
-                            <MenuItem
-                                key={paymentType.key}
-                                title={paymentType.title}
-                                description={paymentType.description}
-                                iconWidth={variables.iconSizeXLarge}
-                                iconHeight={variables.iconSizeXLarge}
-                                icon={paymentType.icon}
-                                success={selectedPaymentType === paymentType.key}
-                                wrapperStyle={{
-                                    ...styles.mt3,
-                                    ...styles.pv4,
-                                    ...styles.transferBalancePayment,
-                                    ...(selectedPaymentType === paymentType.key
-                                        && styles.transferBalanceSelectedPayment),
-                                }}
-                                onPress={() => this.navigateToChooseTransferAccount(paymentType.type)}
-                            />
-                        ))}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('common.transferBalance')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.goBack()}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    />
+                    <View style={[styles.flex1, styles.flexBasisAuto, styles.justifyContentCenter]}>
+                        <CurrentWalletBalance balanceStyles={[styles.transferBalanceBalance]} />
                     </View>
-                    <Text
-                        style={[styles.p5, styles.textStrong, styles.textLabel, styles.justifyContentStart]}
-                    >
-                        {this.props.translate('transferAmountPage.whichAccount')}
-                    </Text>
-                    {Boolean(selectedAccount)
-                        && (
-                            <MenuItem
-                                title={selectedAccount.title}
-                                description={selectedAccount.description}
-                                shouldShowRightIcon
-                                iconWidth={selectedAccount.iconSize}
-                                iconHeight={selectedAccount.iconSize}
-                                icon={selectedAccount.icon}
-                                onPress={() => this.navigateToChooseTransferAccount(selectedAccount.accountType)}
-                            />
-                        )}
-                    <View style={styles.ph5}>
+                    <ScrollView style={styles.flexGrow0} contentContainerStyle={styles.pv5}>
+                        <View style={styles.ph5}>
+                            {_.map(this.paymentTypes, paymentType => (
+                                <MenuItem
+                                    key={paymentType.key}
+                                    title={paymentType.title}
+                                    description={paymentType.description}
+                                    iconWidth={variables.iconSizeXLarge}
+                                    iconHeight={variables.iconSizeXLarge}
+                                    icon={paymentType.icon}
+                                    success={selectedPaymentType === paymentType.key}
+                                    wrapperStyle={{
+                                        ...styles.mt3,
+                                        ...styles.pv4,
+                                        ...styles.transferBalancePayment,
+                                        ...(selectedPaymentType === paymentType.key
+                                            && styles.transferBalanceSelectedPayment),
+                                    }}
+                                    onPress={() => this.navigateToChooseTransferAccount(paymentType.type)}
+                                />
+                            ))}
+                        </View>
                         <Text
-                            style={[
-                                styles.mt5,
-                                styles.mb3,
-                                styles.textStrong,
-                                styles.textLabel,
-                                styles.justifyContentStart,
-                            ]}
+                            style={[styles.p5, styles.textStrong, styles.textLabel, styles.justifyContentStart]}
                         >
-                            {this.props.translate('transferAmountPage.fee')}
+                            {this.props.translate('transferAmountPage.whichAccount')}
                         </Text>
-                        <Text
-                            style={[styles.justifyContentStart]}
-                        >
-                            {this.props.numberFormat(
-                                calculatedFee / 100,
-                                {style: 'currency', currency: 'USD'},
+                        {Boolean(selectedAccount)
+                            && (
+                                <MenuItem
+                                    title={selectedAccount.title}
+                                    description={selectedAccount.description}
+                                    shouldShowRightIcon
+                                    iconWidth={selectedAccount.iconSize}
+                                    iconHeight={selectedAccount.iconSize}
+                                    icon={selectedAccount.icon}
+                                    onPress={() => this.navigateToChooseTransferAccount(selectedAccount.accountType)}
+                                />
                             )}
-                        </Text>
-                    </View>
-                </ScrollView>
-                <FixedFooter style={[styles.flexGrow0]}>
-                    <FormAlertWrapper>
-                        {isOffline => (
-                            <Button
-                                success
-                                pressOnEnter
-                                isLoading={this.props.walletTransfer.loading}
-                                isDisabled={isButtonDisabled || isOffline}
-                                onPress={() => PaymentMethods.transferWalletBalance(selectedAccount)}
-                                text={this.props.translate(
-                                    'transferAmountPage.transfer',
-                                    {
-                                        amount: isTransferable
-                                            ? this.props.numberFormat(
-                                                transferAmount / 100,
-                                                {style: 'currency', currency: 'USD'},
-                                            ) : '',
-                                    },
+                        <View style={styles.ph5}>
+                            <Text
+                                style={[
+                                    styles.mt5,
+                                    styles.mb3,
+                                    styles.textStrong,
+                                    styles.textLabel,
+                                    styles.justifyContentStart,
+                                ]}
+                            >
+                                {this.props.translate('transferAmountPage.fee')}
+                            </Text>
+                            <Text
+                                style={[styles.justifyContentStart]}
+                            >
+                                {this.props.numberFormat(
+                                    calculatedFee / 100,
+                                    {style: 'currency', currency: 'USD'},
                                 )}
-                            />
-                        )}
-                    </FormAlertWrapper>
-                </FixedFooter>
-                <OfflineIndicator containerStyles={[styles.ml5, styles.mb3]} />
+                            </Text>
+                        </View>
+                    </ScrollView>
+                    <FixedFooter style={[styles.flexGrow0]}>
+                        <FormAlertWrapper>
+                            {isOffline => (
+                                <Button
+                                    success
+                                    pressOnEnter
+                                    isLoading={this.props.walletTransfer.loading}
+                                    isDisabled={isButtonDisabled || isOffline}
+                                    onPress={() => PaymentMethods.transferWalletBalance(selectedAccount)}
+                                    text={this.props.translate(
+                                        'transferAmountPage.transfer',
+                                        {
+                                            amount: isTransferable
+                                                ? this.props.numberFormat(
+                                                    transferAmount / 100,
+                                                    {style: 'currency', currency: 'USD'},
+                                                ) : '',
+                                        },
+                                    )}
+                                />
+                            )}
+                        </FormAlertWrapper>
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 0cdde430ee2c..b2583dc7f2bd 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -19,6 +19,7 @@ import LoginField from './LoginField';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
 import Button from '../../../components/Button';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import FixedFooter from '../../../components/FixedFooter';
 import TextInput from '../../../components/TextInput';
 import Picker from '../../../components/Picker';
@@ -218,97 +219,99 @@ class ProfilePage extends Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('common.profile')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                    <AvatarWithImagePicker
-                        isUploading={this.props.currentUserPersonalDetails.avatarUploading}
-                        isUsingDefaultAvatar={this.state.avatar.uri.includes('/images/avatars/avatar')}
-                        avatarURL={this.state.avatar.uri}
-                        onImageSelected={this.updateAvatar}
-                        onImageRemoved={this.updateAvatar}
-                        anchorPosition={styles.createMenuPositionProfile}
-                        size={CONST.AVATAR_SIZE.LARGE}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('common.profile')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
-                    <Text style={[styles.mt6, styles.mb6]}>
-                        {this.props.translate('profilePage.tellUsAboutYourself')}
-                    </Text>
-                    <FullNameInputRow
-                        firstName={this.state.firstName}
-                        firstNameError={PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError)}
-                        lastName={this.state.lastName}
-                        lastNameError={PersonalDetails.getMaxCharacterError(this.state.hasLastNameError)}
-                        onChangeFirstName={firstName => this.setState({firstName})}
-                        onChangeLastName={lastName => this.setState({lastName})}
-                        style={[styles.mt4, styles.mb4]}
-                    />
-                    <View style={styles.mb6}>
-                        <Picker
-                            label={this.props.translate('profilePage.preferredPronouns')}
-                            onInputChange={(pronouns) => {
-                                const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT;
-                                this.setState({
-                                    pronouns: hasSelfSelectedPronouns ? '' : pronouns,
-                                    hasSelfSelectedPronouns,
-                                });
-                            }}
-                            items={pronounsList}
-                            placeholder={{
-                                value: '',
-                                label: this.props.translate('profilePage.selectYourPronouns'),
-                            }}
-                            value={pronounsPickerValue}
+                    <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                        <AvatarWithImagePicker
+                            isUploading={this.props.currentUserPersonalDetails.avatarUploading}
+                            isUsingDefaultAvatar={this.state.avatar.uri.includes('/images/avatars/avatar')}
+                            avatarURL={this.state.avatar.uri}
+                            onImageSelected={this.updateAvatar}
+                            onImageRemoved={this.updateAvatar}
+                            anchorPosition={styles.createMenuPositionProfile}
+                            size={CONST.AVATAR_SIZE.LARGE}
                         />
-                        {this.state.hasSelfSelectedPronouns && (
-                            <View style={styles.mt2}>
-                                <TextInput
-                                    value={this.state.pronouns}
-                                    onChangeText={pronouns => this.setState({pronouns})}
-                                    placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
-                                    errorText={PersonalDetails.getMaxCharacterError(this.state.hasPronounError)}
-                                />
-                            </View>
-                        )}
-                    </View>
-                    <LoginField
-                        label={this.props.translate('profilePage.emailAddress')}
-                        type="email"
-                        login={this.state.logins.email}
-                    />
-                    <LoginField
-                        label={this.props.translate('common.phoneNumber')}
-                        type="phone"
-                        login={this.state.logins.phone}
-                    />
-                    <View style={styles.mb3}>
-                        <Picker
-                            label={this.props.translate('profilePage.timezone')}
-                            onInputChange={selectedTimezone => this.setState({selectedTimezone})}
-                            items={timezones}
-                            isDisabled={this.state.isAutomaticTimezone}
-                            value={this.state.selectedTimezone}
+                        <Text style={[styles.mt6, styles.mb6]}>
+                            {this.props.translate('profilePage.tellUsAboutYourself')}
+                        </Text>
+                        <FullNameInputRow
+                            firstName={this.state.firstName}
+                            firstNameError={PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError)}
+                            lastName={this.state.lastName}
+                            lastNameError={PersonalDetails.getMaxCharacterError(this.state.hasLastNameError)}
+                            onChangeFirstName={firstName => this.setState({firstName})}
+                            onChangeLastName={lastName => this.setState({lastName})}
+                            style={[styles.mt4, styles.mb4]}
                         />
-                    </View>
-                    <CheckboxWithLabel
-                        label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
-                        isChecked={this.state.isAutomaticTimezone}
-                        onInputChange={this.setAutomaticTimezone}
-                    />
-                </ScrollView>
-                <FixedFooter>
-                    <Button
-                        success
-                        isDisabled={isButtonDisabled}
-                        onPress={this.updatePersonalDetails}
-                        style={[styles.w100]}
-                        text={this.props.translate('common.save')}
-                        pressOnEnter
-                    />
-                </FixedFooter>
+                        <View style={styles.mb6}>
+                            <Picker
+                                label={this.props.translate('profilePage.preferredPronouns')}
+                                onInputChange={(pronouns) => {
+                                    const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT;
+                                    this.setState({
+                                        pronouns: hasSelfSelectedPronouns ? '' : pronouns,
+                                        hasSelfSelectedPronouns,
+                                    });
+                                }}
+                                items={pronounsList}
+                                placeholder={{
+                                    value: '',
+                                    label: this.props.translate('profilePage.selectYourPronouns'),
+                                }}
+                                value={pronounsPickerValue}
+                            />
+                            {this.state.hasSelfSelectedPronouns && (
+                                <View style={styles.mt2}>
+                                    <TextInput
+                                        value={this.state.pronouns}
+                                        onChangeText={pronouns => this.setState({pronouns})}
+                                        placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
+                                        errorText={PersonalDetails.getMaxCharacterError(this.state.hasPronounError)}
+                                    />
+                                </View>
+                            )}
+                        </View>
+                        <LoginField
+                            label={this.props.translate('profilePage.emailAddress')}
+                            type="email"
+                            login={this.state.logins.email}
+                        />
+                        <LoginField
+                            label={this.props.translate('common.phoneNumber')}
+                            type="phone"
+                            login={this.state.logins.phone}
+                        />
+                        <View style={styles.mb3}>
+                            <Picker
+                                label={this.props.translate('profilePage.timezone')}
+                                onInputChange={selectedTimezone => this.setState({selectedTimezone})}
+                                items={timezones}
+                                isDisabled={this.state.isAutomaticTimezone}
+                                value={this.state.selectedTimezone}
+                            />
+                        </View>
+                        <CheckboxWithLabel
+                            label={this.props.translate('profilePage.setMyTimezoneAutomatically')}
+                            isChecked={this.state.isAutomaticTimezone}
+                            onInputChange={this.setAutomaticTimezone}
+                        />
+                    </ScrollView>
+                    <FixedFooter>
+                        <Button
+                            success
+                            isDisabled={isButtonDisabled}
+                            onPress={this.updatePersonalDetails}
+                            style={[styles.w100]}
+                            text={this.props.translate('common.save')}
+                            pressOnEnter
+                        />
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index f908faf126b9..2f9d7f5360e2 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -15,6 +15,7 @@ import Button from '../../../components/Button';
 import Text from '../../../components/Text';
 import FixedFooter from '../../../components/FixedFooter';
 import ConfirmModal from '../../../components/ConfirmModal';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import * as CloseAccountActions from '../../../libs/actions/CloseAccount';
@@ -54,82 +55,84 @@ class CloseAccountPage extends Component {
         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)}
-                />
-                <ScrollView
-                    contentContainerStyle={[
-                        styles.flexGrow1,
-                        styles.flexColumn,
-                        styles.p5,
-                    ]}
-                >
-                    <Text>{this.props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
-                    <TextInput
-                        multiline
-                        numberOfLines={6}
-                        textAlignVertical="top"
-                        value={this.state.reasonForLeaving}
-                        onChangeText={reasonForLeaving => this.setState({reasonForLeaving})}
-                        label={this.props.translate('closeAccountPage.enterMessageHere')}
-                        containerStyles={[styles.mt5, styles.closeAccountMessageInput]}
+                <KeyboardAvoidingView>
+                    <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
-                        autoCapitalize="none"
-                        value={this.state.phoneOrEmail}
-                        onChangeText={phoneOrEmail => this.setState({phoneOrEmail: phoneOrEmail.toLowerCase()})}
-                        label={this.props.translate('closeAccountPage.enterDefaultContact')}
-                        containerStyles={[styles.mt5]}
-                    />
-                </ScrollView>
-                <FixedFooter>
-                    <Button
-                        danger
-                        text={this.props.translate('closeAccountPage.closeAccount')}
-                        isLoading={this.state.loading}
-                        onPress={() => User.closeAccount(this.state.reasonForLeaving)}
-                        isDisabled={Str.removeSMSDomain(userEmailOrPhone).toLowerCase() !== this.state.phoneOrEmail.toLowerCase()}
-                    />
-                </FixedFooter>
-                <ConfirmModal
-                    title={this.props.translate('closeAccountPage.closeAccountError')}
-                    success
-                    confirmText={this.props.translate('closeAccountPage.okayGotIt')}
-                    prompt={(
-                        <Text>
-                            {this.props.translate('closeAccountPage.closeAccountActionRequired')}
+                    <ScrollView
+                        contentContainerStyle={[
+                            styles.flexGrow1,
+                            styles.flexColumn,
+                            styles.p5,
+                        ]}
+                    >
+                        <Text>{this.props.translate('closeAccountPage.reasonForLeavingPrompt')}</Text>
+                        <TextInput
+                            multiline
+                            numberOfLines={6}
+                            textAlignVertical="top"
+                            value={this.state.reasonForLeaving}
+                            onChangeText={reasonForLeaving => this.setState({reasonForLeaving})}
+                            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>
                             {' '}
-                            <Text
-                                style={styles.link}
-                                onPress={() => { Linking.openURL('https://community.expensify.com/discussion/4724/faq-why-cant-i-close-my-account'); }}
-                            >
-                                {this.props.translate('common.here')}
+                            {this.props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
+                        </Text>
+                        <Text textBreakStrategy="simple" style={[styles.mt5]}>
+                            <Text style={[styles.textStrong]}>
+                                {this.props.translate('closeAccountPage.defaultContact')}
                             </Text>
                             {' '}
-                            {this.props.translate('closeAccountPage.closeAccountTryAgainAfter')}
+                            {userEmailOrPhone}
                         </Text>
-                    )}
-                    onConfirm={CloseAccountActions.hideCloseAccountModal}
-                    isVisible={this.props.isCloseAccoutModalOpen}
-                    shouldShowCancelButton={false}
-                />
+                        <TextInput
+                            autoCapitalize="none"
+                            value={this.state.phoneOrEmail}
+                            onChangeText={phoneOrEmail => this.setState({phoneOrEmail: phoneOrEmail.toLowerCase()})}
+                            label={this.props.translate('closeAccountPage.enterDefaultContact')}
+                            containerStyles={[styles.mt5]}
+                        />
+                    </ScrollView>
+                    <FixedFooter>
+                        <Button
+                            danger
+                            text={this.props.translate('closeAccountPage.closeAccount')}
+                            isLoading={this.state.loading}
+                            onPress={() => User.closeAccount(this.state.reasonForLeaving)}
+                            isDisabled={Str.removeSMSDomain(userEmailOrPhone).toLowerCase() !== this.state.phoneOrEmail.toLowerCase()}
+                        />
+                    </FixedFooter>
+                    <ConfirmModal
+                        title={this.props.translate('closeAccountPage.closeAccountError')}
+                        success
+                        confirmText={this.props.translate('closeAccountPage.okayGotIt')}
+                        prompt={(
+                            <Text>
+                                {this.props.translate('closeAccountPage.closeAccountActionRequired')}
+                                {' '}
+                                <Text
+                                    style={styles.link}
+                                    onPress={() => { Linking.openURL('https://community.expensify.com/discussion/4724/faq-why-cant-i-close-my-account'); }}
+                                >
+                                    {this.props.translate('common.here')}
+                                </Text>
+                                {' '}
+                                {this.props.translate('closeAccountPage.closeAccountTryAgainAfter')}
+                            </Text>
+                        )}
+                        onConfirm={CloseAccountActions.hideCloseAccountModal}
+                        isVisible={this.props.isCloseAccoutModalOpen}
+                        shouldShowCancelButton={false}
+                    />
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index ec3906eed06e..0940abd51d55 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -13,6 +13,7 @@ import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as Policy from '../../libs/actions/Policy';
 import TextInput from '../../components/TextInput';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
 import OptionsSelector from '../../components/OptionsSelector';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
@@ -243,7 +244,7 @@ class WorkspaceInvitePage extends React.Component {
         return (
             <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
-                    <>
+                    <KeyboardAvoidingView>
                         <HeaderWithCloseButton
                             title={this.props.translate('workspace.invite.invitePeople')}
                             subtitle={policyName}
@@ -334,7 +335,7 @@ class WorkspaceInvitePage extends React.Component {
                                 )}
                             </Pressable>
                         </View>
-                    </>
+                    </KeyboardAvoidingView>
                 )}
             </ScreenWrapper>
         );
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 1dae4d8d5b67..5740c74ae2e4 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -20,6 +20,7 @@ import Button from '../../components/Button';
 import FixedFooter from '../../components/FixedFooter';
 import Permissions from '../../libs/Permissions';
 import Log from '../../libs/Log';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 
 const propTypes = {
@@ -150,50 +151,52 @@ class WorkspaceNewRoomPage extends React.Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('newRoomPage.newRoom')}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
-                <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                    <View style={styles.mb5}>
-                        <RoomNameInput
-                            policyID={this.state.policyID}
-                            errorText={this.state.errors.roomName}
-                            onChangeText={roomName => this.clearErrorAndSetValue('roomName', roomName)}
-                        />
-                    </View>
-                    <View style={styles.mb5}>
-                        <Picker
-                            value={this.state.policyID}
-                            label={this.props.translate('workspace.common.workspace')}
-                            placeholder={{value: '', label: this.props.translate('newRoomPage.selectAWorkspace')}}
-                            items={this.state.workspaceOptions}
-                            errorText={this.state.errors.policyID}
-                            onInputChange={policyID => this.clearErrorAndSetValue('policyID', policyID)}
-                        />
-                    </View>
-                    <View style={styles.mb2}>
-                        <Picker
-                            value={this.state.visibility}
-                            label={this.props.translate('newRoomPage.visibility')}
-                            items={visibilityOptions}
-                            onInputChange={visibility => this.setState({visibility})}
-                        />
-                    </View>
-                    <Text style={[styles.textLabel, styles.colorMuted]}>
-                        {_.find(visibilityOptions, option => option.value === this.state.visibility).description}
-                    </Text>
-                </ScrollView>
-                <FixedFooter>
-                    <Button
-                        isLoading={this.props.isLoadingCreatePolicyRoom}
-                        success
-                        pressOnEnter
-                        onPress={this.validateAndCreatePolicyRoom}
-                        style={[styles.w100]}
-                        text={this.props.translate('newRoomPage.createRoom')}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('newRoomPage.newRoom')}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
                     />
-                </FixedFooter>
+                    <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                        <View style={styles.mb5}>
+                            <RoomNameInput
+                                policyID={this.state.policyID}
+                                errorText={this.state.errors.roomName}
+                                onChangeText={roomName => this.clearErrorAndSetValue('roomName', roomName)}
+                            />
+                        </View>
+                        <View style={styles.mb5}>
+                            <Picker
+                                value={this.state.policyID}
+                                label={this.props.translate('workspace.common.workspace')}
+                                placeholder={{value: '', label: this.props.translate('newRoomPage.selectAWorkspace')}}
+                                items={this.state.workspaceOptions}
+                                errorText={this.state.errors.policyID}
+                                onInputChange={policyID => this.clearErrorAndSetValue('policyID', policyID)}
+                            />
+                        </View>
+                        <View style={styles.mb2}>
+                            <Picker
+                                value={this.state.visibility}
+                                label={this.props.translate('newRoomPage.visibility')}
+                                items={visibilityOptions}
+                                onInputChange={visibility => this.setState({visibility})}
+                            />
+                        </View>
+                        <Text style={[styles.textLabel, styles.colorMuted]}>
+                            {_.find(visibilityOptions, option => option.value === this.state.visibility).description}
+                        </Text>
+                    </ScrollView>
+                    <FixedFooter>
+                        <Button
+                            isLoading={this.props.isLoadingCreatePolicyRoom}
+                            success
+                            pressOnEnter
+                            onPress={this.validateAndCreatePolicyRoom}
+                            style={[styles.w100]}
+                            text={this.props.translate('newRoomPage.createRoom')}
+                        />
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index d1acbc2306c4..6eaf7118fca4 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -16,6 +16,7 @@ import * as BankAccounts from '../../libs/actions/BankAccounts';
 import BankAccount from '../../libs/models/BankAccount';
 import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes';
 import userPropTypes from '../settings/userPropTypes';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import withFullPolicy from './withFullPolicy';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
@@ -95,33 +96,35 @@ class WorkspacePageWithSections extends React.Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.headerText}
-                    subtitle={policyName}
-                    shouldShowGetAssistanceButton
-                    guidesCallTaskID={this.props.guidesCallTaskID}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
-                {this.props.reimbursementAccount.loading ? (
-                    <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                        <ActivityIndicator color={themeColors.spinner} size="large" />
-                    </View>
-                ) : (
-                    <>
-                        <ScrollView
-                            style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
-                        >
-                            <View style={[styles.w100, styles.flex1]}>
-
-                                {this.props.children(hasVBA, policyID, isUsingECard)}
-
-                            </View>
-                        </ScrollView>
-                        {this.props.footer}
-                    </>
-                )}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.headerText}
+                        subtitle={policyName}
+                        shouldShowGetAssistanceButton
+                        guidesCallTaskID={this.props.guidesCallTaskID}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
+                    />
+                    {this.props.reimbursementAccount.loading ? (
+                        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                            <ActivityIndicator color={themeColors.spinner} size="large" />
+                        </View>
+                    ) : (
+                        <>
+                            <ScrollView
+                                style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
+                            >
+                                <View style={[styles.w100, styles.flex1]}>
+
+                                    {this.props.children(hasVBA, policyID, isUsingECard)}
+
+                                </View>
+                            </ScrollView>
+                            {this.props.footer}
+                        </>
+                    )}
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 31efe3cb6be2..bfd91eaa4e15 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -665,14 +665,6 @@ const styles = {
         marginLeft: 48,
     },
 
-    offlineIndicator: {
-        marginLeft: 48,
-    },
-
-    offlineIndicatorMobile: {
-        marginLeft: 25,
-    },
-
     // Actions
     actionAvatar: {
         borderRadius: 20,

From 7566d20f1b7a3ef6d947e8918b35201c266115a5 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasperhuangg@gmail.com>
Date: Tue, 26 Jul 2022 09:59:35 -0700
Subject: [PATCH 2/5] fix revert

---
 src/languages/en.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/languages/en.js b/src/languages/en.js
index fa86c37a450d..806a27e4ed7f 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -387,6 +387,9 @@ export default {
         deleteBankAccountSuccess: 'Bank account successfully deleted',
         deleteDebitCardSuccess: 'Debit Card successfully deleted',
         deletePayPalSuccess: 'PayPal.me successfully deleted',
+        allSet: 'All Set!',
+        transferConfirmText: ({amount}) => `${amount} will hit your account shortly!`,
+        gotIt: 'Got it, Thanks!',
         error: {
             notOwnerOfBankAccount: 'There was an error setting this bank account as your default payment method.',
             invalidBankAccount: 'This bank account is temporarily suspended.',

From 089cdf9c4843773273666f4e525537315b814cc5 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasperhuangg@gmail.com>
Date: Tue, 26 Jul 2022 10:06:16 -0700
Subject: [PATCH 3/5] fix revert

---
 src/languages/en.js                                |  3 ---
 .../Payments/PaymentsPage/BasePaymentsPage.js      | 14 --------------
 2 files changed, 17 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 806a27e4ed7f..fa86c37a450d 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -387,9 +387,6 @@ export default {
         deleteBankAccountSuccess: 'Bank account successfully deleted',
         deleteDebitCardSuccess: 'Debit Card successfully deleted',
         deletePayPalSuccess: 'PayPal.me successfully deleted',
-        allSet: 'All Set!',
-        transferConfirmText: ({amount}) => `${amount} will hit your account shortly!`,
-        gotIt: 'Got it, Thanks!',
         error: {
             notOwnerOfBankAccount: 'There was an error setting this bank account as your default payment method.',
             invalidBankAccount: 'This bank account is temporarily suspended.',
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 37cb282937b1..779d5521732a 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -33,7 +33,6 @@ import KYCWall from '../../../../components/KYCWall';
 import {propTypes, defaultProps} from './paymentsPagePropTypes';
 import {withNetwork} from '../../../../components/OnyxProvider';
 import * as PaymentUtils from '../../../../libs/PaymentUtils';
-import ConfirmModal from '../../../../components/ConfirmModal';
 
 class BasePaymentsPage extends React.Component {
     constructor(props) {
@@ -436,19 +435,6 @@ class BasePaymentsPage extends React.Component {
                         shouldShowCancelButton
                         danger
                     />
-                    <ConfirmModal
-                        title={this.props.translate('paymentsPage.allSet')}
-                        onConfirm={PaymentMethods.dismissWalletConfirmModal}
-                        isVisible={this.props.walletTransfer.shouldShowConfirmModal}
-                        prompt={this.props.translate('paymentsPage.transferConfirmText', {
-                            amount: this.props.numberFormat(
-                                this.props.walletTransfer.transferAmount / 100,
-                                {style: 'currency', currency: 'USD'},
-                            ),
-                        })}
-                        confirmText={this.props.translate('paymentsPage.gotIt')}
-                        shouldShowCancelButton={false}
-                    />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );

From 83a9c31e41465d8f5fe4637a0288ee3acaa17e8e Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasperhuangg@gmail.com>
Date: Tue, 26 Jul 2022 10:12:52 -0700
Subject: [PATCH 4/5] fix revert

---
 src/pages/home/ReportScreen.js | 38 +++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 6410b34dcf3f..84064086fe64 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -236,27 +236,27 @@ class ReportScreen extends React.Component {
                             />
                         )}
                         {(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
-                        <View style={[styles.chatFooter, this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
-                            {
-                                isArchivedRoom
-                                    ? (
-                                        <ArchivedReportFooter
-                                            reportClosedAction={reportClosedAction}
-                                            report={this.props.report}
-                                        />
-                                    ) : (
-                                        <SwipeableView onSwipeDown={Keyboard.dismiss}>
-                                            <ReportActionCompose
-                                                onSubmit={this.onSubmitComment}
-                                                reportID={reportID}
-                                                reportActions={this.props.reportActions}
+                            <View style={[styles.chatFooter, this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
+                                {
+                                    isArchivedRoom
+                                        ? (
+                                            <ArchivedReportFooter
+                                                reportClosedAction={reportClosedAction}
                                                 report={this.props.report}
-                                                isComposerFullSize={this.props.isComposerFullSize}
                                             />
-                                        </SwipeableView>
-                                    )
-                            }
-                        </View>
+                                        ) : (
+                                            <SwipeableView onSwipeDown={Keyboard.dismiss}>
+                                                <ReportActionCompose
+                                                    onSubmit={this.onSubmitComment}
+                                                    reportID={reportID}
+                                                    reportActions={this.props.reportActions}
+                                                    report={this.props.report}
+                                                    isComposerFullSize={this.props.isComposerFullSize}
+                                                />
+                                            </SwipeableView>
+                                        )
+                                }
+                            </View>
                         )}
                     </View>
                 </KeyboardAvoidingView>

From 50fc73a7bc41c3429b679ebc4cec579a120907bf Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasperhuangg@gmail.com>
Date: Tue, 26 Jul 2022 10:25:27 -0700
Subject: [PATCH 5/5] fix revert

---
 src/pages/settings/Payments/TransferBalancePage.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 90173758fd88..7f3857b21276 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -29,7 +29,6 @@ import cardPropTypes from '../../../components/cardPropTypes';
 import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes';
 import ROUTES from '../../../ROUTES';
 import FormAlertWrapper from '../../../components/FormAlertWrapper';
-import OfflineIndicator from '../../../components/OfflineIndicator';
 
 const propTypes = {
     /** User's wallet information */
@@ -129,15 +128,6 @@ class TransferBalancePage extends React.Component {
         return selectedAccount || defaultAccount;
     }
 
-    /**
-     * @param {Number} transferAmount
-     * @param {Object} selectedAccount
-     */
-    saveTransferAmountAndStartTransfer(transferAmount, selectedAccount) {
-        PaymentMethods.saveWalletTransferAmount(transferAmount);
-        PaymentMethods.transferWalletBalance(selectedAccount);
-    }
-
     /**
      * @param {String} filterPaymentMethodType
      */