diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 78afe0f379b2..f7f94f990e38 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -271,6 +271,7 @@ class BaseOptionsSelector extends Component {
                 isDisabled={this.props.isDisabled}
                 shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator}
                 onLayout={this.props.onLayout}
+                contentContainerStyles={shouldShowFooter ? [] : [this.props.safeAreaPaddingBottomStyle]}
             />
         ) : <FullScreenLoadingIndicator />;
         return (
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 1c0294881360..1ede56c65ca7 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -260,6 +260,7 @@ class NewChatPage extends Component {
                                     confirmButtonText={this.props.translate('newChatPage.createGroup')}
                                     onConfirmSelection={this.createGroup}
                                     placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+                                    safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                                 />
                             ) : (
                                 <FullScreenLoadingIndicator />
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index e91667d4e908..e46e4e025eb3 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -72,38 +72,40 @@ const ReportParticipantsPage = (props) => {
     const participants = getAllParticipants(props.report, props.personalDetails);
 
     return (
-        <ScreenWrapper>
-            <HeaderWithCloseButton
-                title={props.translate((ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)) ? 'common.members' : 'common.details')}
-                onCloseButtonPress={Navigation.dismissModal}
-                onBackButtonPress={Navigation.goBack}
-                shouldShowBackButton={ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)}
-            />
-            <View
-                pointerEvents="box-none"
-                style={[
-                    styles.containerWithSpaceBetween,
-                ]}
-            >
-                {Boolean(participants.length)
-                    && (
-                    <OptionsList
-                        sections={[{
-                            title: '', data: participants, shouldShow: true, indexOffset: 0,
-                        }]}
-                        onSelectRow={(option) => {
-                            Navigation.navigate(ROUTES.getReportParticipantRoute(
-                                props.route.params.reportID, option.login,
-                            ));
-                        }}
-                        hideSectionHeaders
-                        showTitleTooltip
-                        disableFocusOptions
-                        boldStyle
-                        optionHoveredStyle={styles.hoveredComponentBG}
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            {({safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithCloseButton
+                        title={props.translate((ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)) ? 'common.members' : 'common.details')}
+                        onCloseButtonPress={Navigation.dismissModal}
+                        onBackButtonPress={Navigation.goBack}
+                        shouldShowBackButton={ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)}
                     />
-                    )}
-            </View>
+                    <View
+                        pointerEvents="box-none"
+                        style={[styles.containerWithSpaceBetween]}
+                    >
+                        {Boolean(participants.length) && (
+                            <OptionsList
+                                sections={[{
+                                    title: '', data: participants, shouldShow: true, indexOffset: 0,
+                                }]}
+                                onSelectRow={(option) => {
+                                    Navigation.navigate(ROUTES.getReportParticipantRoute(
+                                        props.route.params.reportID, option.login,
+                                    ));
+                                }}
+                                hideSectionHeaders
+                                showTitleTooltip
+                                disableFocusOptions
+                                boldStyle
+                                optionHoveredStyle={styles.hoveredComponentBG}
+                                contentContainerStyles={[safeAreaPaddingBottomStyle]}
+                            />
+                        )}
+                    </View>
+                </>
+            )}
         </ScreenWrapper>
     );
 };
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 3cefc6a98c3d..2e29a9395750 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -170,7 +170,7 @@ class SearchPage extends Component {
         );
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                {({didScreenTransitionEnd}) => (
+                {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
                         <HeaderWithCloseButton
                             title={this.props.translate('common.search')}
@@ -188,6 +188,7 @@ class SearchPage extends Component {
                                 shouldShowOptions={didScreenTransitionEnd}
                                 placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                                 onLayout={this.searchRendered}
+                                safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                             />
                         </View>
                     </>
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index e78cbd48e16f..1d4524be7d66 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -113,18 +113,23 @@ class IOUCurrencySelection extends Component {
         const headerMessage = this.state.searchValue.trim() && !this.state.currencyData.length ? this.props.translate('common.noResultsFound') : '';
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
-                    title={this.props.translate('iOUCurrencySelection.selectCurrency')}
-                    onCloseButtonPress={Navigation.goBack}
-                />
-                <OptionsSelector
-                    sections={this.getSections()}
-                    onSelectRow={this.confirmCurrencySelection}
-                    value={this.state.searchValue}
-                    onChangeText={this.changeSearchValue}
-                    placeholderText={this.props.translate('common.search')}
-                    headerMessage={headerMessage}
-                />
+                {({safeAreaPaddingBottomStyle}) => (
+                    <>
+                        <HeaderWithCloseButton
+                            title={this.props.translate('iOUCurrencySelection.selectCurrency')}
+                            onCloseButtonPress={Navigation.goBack}
+                        />
+                        <OptionsSelector
+                            sections={this.getSections()}
+                            onSelectRow={this.confirmCurrencySelection}
+                            value={this.state.searchValue}
+                            onChangeText={this.changeSearchValue}
+                            placeholderText={this.props.translate('common.search')}
+                            headerMessage={headerMessage}
+                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                        />
+                    </>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/iou/IOUDetailsModal.js b/src/pages/iou/IOUDetailsModal.js
index 4da6d6792f47..e3380122db7a 100644
--- a/src/pages/iou/IOUDetailsModal.js
+++ b/src/pages/iou/IOUDetailsModal.js
@@ -154,49 +154,52 @@ class IOUDetailsModal extends Component {
         const pendingAction = this.findPendingAction();
         const iouReportStateNum = lodashGet(this.props.iouReport, 'stateNum');
         const hasOutstandingIOU = lodashGet(this.props.iouReport, 'hasOutstandingIOU');
+        const hasFixedFooter = hasOutstandingIOU && this.props.iouReport.managerEmail === sessionEmail;
         return (
-            <ScreenWrapper>
-                <FullPageNotFoundView
-                    shouldShow={_.isEmpty(this.props.iouReport)}
-                    subtitleKey="notFound.iouReportNotFound"
-                    onBackButtonPress={Navigation.dismissModal}
-                >
-                    <HeaderWithCloseButton
-                        title={this.props.translate('common.details')}
-                        onCloseButtonPress={Navigation.dismissModal}
-                    />
-                    {this.props.iou.loading ? <View style={styles.flex1}><FullScreenLoadingIndicator /></View> : (
-                        <View style={[styles.flex1, styles.justifyContentBetween]}>
-                            <ScrollView contentContainerStyle={styles.iouDetailsContainer}>
-                                <IOUPreview
-                                    chatReportID={this.props.route.params.chatReportID}
-                                    iouReportID={this.props.route.params.iouReportID}
-                                    pendingAction={pendingAction}
-                                    shouldHidePayButton
-                                />
-                                <IOUTransactions
-                                    chatReportID={this.props.route.params.chatReportID}
-                                    iouReportID={this.props.route.params.iouReportID}
-                                    isIOUSettled={iouReportStateNum === CONST.REPORT.STATE_NUM.SUBMITTED}
-                                    userEmail={sessionEmail}
-                                />
-                            </ScrollView>
-                            {(hasOutstandingIOU && this.props.iouReport.managerEmail === sessionEmail && (
-                                <FixedFooter>
-                                    <SettlementButton
-                                        onPress={paymentMethodType => this.payMoneyRequest(paymentMethodType)}
-                                        shouldShowPaypal={Boolean(lodashGet(this.props, 'iouReport.submitterPayPalMeAddress'))}
-                                        currency={lodashGet(this.props, 'iouReport.currency')}
-                                        enablePaymentsRoute={ROUTES.IOU_DETAILS_ENABLE_PAYMENTS}
-                                        addBankAccountRoute={ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT}
-                                        addDebitCardRoute={ROUTES.IOU_DETAILS_ADD_DEBIT_CARD}
+            <ScreenWrapper includeSafeAreaPaddingBottom={hasFixedFooter}>
+                {({safeAreaPaddingBottomStyle}) => (
+                    <FullPageNotFoundView
+                        shouldShow={_.isEmpty(this.props.iouReport)}
+                        subtitleKey="notFound.iouReportNotFound"
+                        onBackButtonPress={Navigation.dismissModal}
+                    >
+                        <HeaderWithCloseButton
+                            title={this.props.translate('common.details')}
+                            onCloseButtonPress={Navigation.dismissModal}
+                        />
+                        {this.props.iou.loading ? <View style={styles.flex1}><FullScreenLoadingIndicator /></View> : (
+                            <View style={[styles.flex1, styles.justifyContentBetween]}>
+                                <ScrollView contentContainerStyle={[styles.iouDetailsContainer, hasFixedFooter ? {} : safeAreaPaddingBottomStyle]}>
+                                    <IOUPreview
                                         chatReportID={this.props.route.params.chatReportID}
+                                        iouReportID={this.props.route.params.iouReportID}
+                                        pendingAction={pendingAction}
+                                        shouldHidePayButton
                                     />
-                                </FixedFooter>
-                            ))}
-                        </View>
-                    )}
-                </FullPageNotFoundView>
+                                    <IOUTransactions
+                                        chatReportID={this.props.route.params.chatReportID}
+                                        iouReportID={this.props.route.params.iouReportID}
+                                        isIOUSettled={iouReportStateNum === CONST.REPORT.STATE_NUM.SUBMITTED}
+                                        userEmail={sessionEmail}
+                                    />
+                                </ScrollView>
+                                {(hasOutstandingIOU && this.props.iouReport.managerEmail === sessionEmail && (
+                                    <FixedFooter>
+                                        <SettlementButton
+                                            onPress={paymentMethodType => this.payMoneyRequest(paymentMethodType)}
+                                            shouldShowPaypal={Boolean(lodashGet(this.props, 'iouReport.submitterPayPalMeAddress'))}
+                                            currency={lodashGet(this.props, 'iouReport.currency')}
+                                            enablePaymentsRoute={ROUTES.IOU_DETAILS_ENABLE_PAYMENTS}
+                                            addBankAccountRoute={ROUTES.IOU_DETAILS_ADD_BANK_ACCOUNT}
+                                            addDebitCardRoute={ROUTES.IOU_DETAILS_ADD_DEBIT_CARD}
+                                            chatReportID={this.props.route.params.chatReportID}
+                                        />
+                                    </FixedFooter>
+                                ))}
+                            </View>
+                        )}
+                    </FullPageNotFoundView>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index c733ce6f8989..6acc2fb35330 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -453,6 +453,7 @@ class IOUModal extends Component {
                                                 hasMultipleParticipants={this.props.hasMultipleParticipants}
                                                 onAddParticipants={this.addParticipants}
                                                 onStepComplete={this.navigateToNextStep}
+                                                safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                                             />
                                         </AnimatedStep>
                                     )}
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
index ac719cda4c31..38d5c7a9d46d 100644
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsPage.js
@@ -41,11 +41,18 @@ const propTypes = {
         /** Whether or not the IOU step is loading (retrieving participants) */
         loading: PropTypes.bool,
     }),
+
+    /** padding bottom style of safe area */
+    safeAreaPaddingBottomStyle: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.object,
+    ]),
 };
 
 const defaultProps = {
     iou: {},
     participants: [],
+    safeAreaPaddingBottomStyle: {},
 };
 
 const IOUParticipantsPage = (props) => {
@@ -63,12 +70,14 @@ const IOUParticipantsPage = (props) => {
                 onStepComplete={props.onStepComplete}
                 participants={props.participants}
                 onAddParticipants={props.onAddParticipants}
+                safeAreaPaddingBottomStyle={props.safeAreaPaddingBottomStyle}
             />
         )
         : (
             <IOUParticipantsRequest
                 onStepComplete={props.onStepComplete}
                 onAddParticipants={props.onAddParticipants}
+                safeAreaPaddingBottomStyle={props.safeAreaPaddingBottomStyle}
             />
         )
     );
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js
index 0b29c1df14dd..dae9161da5fb 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsRequest.js
@@ -141,6 +141,7 @@ class IOUParticipantsRequest extends Component {
                 headerMessage={headerMessage}
                 placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                 boldStyle
+                safeAreaPaddingBottomStyle={this.props.safeAreaPaddingBottomStyle}
             />
         );
     }
diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
index 7da28e971cdc..5e71168fd693 100755
--- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
+++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js
@@ -13,7 +13,6 @@ import compose from '../../../../libs/compose';
 import Text from '../../../../components/Text';
 import personalDetailsPropType from '../../../personalDetailsPropType';
 import reportPropTypes from '../../../reportPropTypes';
-import SafeAreaConsumer from '../../../../components/SafeAreaConsumer';
 
 const propTypes = {
     /** Beta features list */
@@ -210,29 +209,26 @@ class IOUParticipantsSplit extends Component {
             maxParticipantsReached,
         );
         return (
-            <SafeAreaConsumer>
-                {({safeAreaPaddingBottomStyle}) => (
-                    <View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? safeAreaPaddingBottomStyle : {})]}>
-                        <Text style={[styles.textLabelSupporting, styles.pt3, styles.ph5]}>
-                            {this.props.translate('common.to')}
-                        </Text>
-                        <OptionsSelector
-                            canSelectMultipleOptions
-                            sections={sections}
-                            selectedOptions={this.props.participants}
-                            value={this.state.searchTerm}
-                            onSelectRow={this.toggleOption}
-                            onChangeText={this.updateOptionsWithSearchTerm}
-                            headerMessage={headerMessage}
-                            boldStyle
-                            shouldShowConfirmButton
-                            confirmButtonText={this.props.translate('common.next')}
-                            onConfirmSelection={this.finalizeParticipants}
-                            placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
-                        />
-                    </View>
-                )}
-            </SafeAreaConsumer>
+            <View style={[styles.flex1, styles.w100, (this.props.participants.length > 0 ? this.props.safeAreaPaddingBottomStyle : {})]}>
+                <Text style={[styles.textLabelSupporting, styles.pt3, styles.ph5]}>
+                    {this.props.translate('common.to')}
+                </Text>
+                <OptionsSelector
+                    canSelectMultipleOptions
+                    sections={sections}
+                    selectedOptions={this.props.participants}
+                    value={this.state.searchTerm}
+                    onSelectRow={this.toggleOption}
+                    onChangeText={this.updateOptionsWithSearchTerm}
+                    headerMessage={headerMessage}
+                    boldStyle
+                    shouldShowConfirmButton
+                    confirmButtonText={this.props.translate('common.next')}
+                    onConfirmSelection={this.finalizeParticipants}
+                    placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+                    safeAreaPaddingBottomStyle={this.props.safeAreaPaddingBottomStyle}
+                />
+            </View>
         );
     }
 }
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index a9a809c6d0a2..7c7840fdbbdb 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -62,80 +62,85 @@ const AboutPage = (props) => {
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            <HeaderWithCloseButton
-                title={props.translate('initialSettingsPage.about')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
-            />
-            <ScrollView
-                contentContainerStyle={[
-                    styles.flexGrow1,
-                    styles.flexColumn,
-                    styles.justifyContentBetween,
-                ]}
-            >
-                <View style={[styles.flex1]}>
-                    <View style={styles.pageWrapper}>
-                        <View style={[styles.settingsPageBody, styles.mb6, styles.alignItemsCenter]}>
-                            <Logo height={80} width={80} />
+            {({safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithCloseButton
+                        title={props.translate('initialSettingsPage.about')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    />
+                    <ScrollView
+                        contentContainerStyle={[
+                            styles.flexGrow1,
+                            styles.flexColumn,
+                            styles.justifyContentBetween,
+                            safeAreaPaddingBottomStyle,
+                        ]}
+                    >
+                        <View style={[styles.flex1]}>
+                            <View style={styles.pageWrapper}>
+                                <View style={[styles.settingsPageBody, styles.mb6, styles.alignItemsCenter]}>
+                                    <Logo height={80} width={80} />
+                                    <Text
+                                        selectable
+                                        style={[
+                                            styles.textLabel,
+                                            styles.alignSelfCenter,
+                                            styles.mt6,
+                                            styles.mb2,
+                                            styles.colorMuted,
+                                        ]}
+                                    >
+                                        v
+                                        {pkg.version}
+                                    </Text>
+                                    <Text style={[styles.baseFontStyle, styles.mv5]}>
+                                        {props.translate('initialSettingsPage.aboutPage.description')}
+                                    </Text>
+                                </View>
+                            </View>
+                            {_.map(menuItems, item => (
+                                <MenuItem
+                                    key={item.translationKey}
+                                    title={props.translate(item.translationKey)}
+                                    icon={item.icon}
+                                    iconRight={item.iconRight}
+                                    onPress={() => item.action()}
+                                    shouldShowRightIcon
+                                />
+                            ))}
+                        </View>
+                        <View style={[styles.sidebarFooter]}>
                             <Text
-                                selectable
-                                style={[
-                                    styles.textLabel,
-                                    styles.alignSelfCenter,
-                                    styles.mt6,
-                                    styles.mb2,
-                                    styles.colorMuted,
-                                ]}
+                                style={[styles.chatItemMessageHeaderTimestamp]}
+                                numberOfLines={1}
                             >
-                                v
-                                {pkg.version}
-                            </Text>
-                            <Text style={[styles.baseFontStyle, styles.mv5]}>
-                                {props.translate('initialSettingsPage.aboutPage.description')}
+                                {props.translate(
+                                    'initialSettingsPage.readTheTermsAndPrivacy.phrase1',
+                                )}
+                                {' '}
+                                <TextLink style={[styles.textMicroSupporting, styles.link]} href={CONST.TERMS_URL}>
+                                    {props.translate(
+                                        'initialSettingsPage.readTheTermsAndPrivacy.phrase2',
+                                    )}
+                                </TextLink>
+                                {' '}
+                                {props.translate(
+                                    'initialSettingsPage.readTheTermsAndPrivacy.phrase3',
+                                )}
+                                {' '}
+                                <TextLink style={[styles.textMicroSupporting, styles.link]} href={CONST.PRIVACY_URL}>
+                                    {props.translate(
+                                        'initialSettingsPage.readTheTermsAndPrivacy.phrase4',
+                                    )}
+                                </TextLink>
+                                .
                             </Text>
                         </View>
-                    </View>
-                    {_.map(menuItems, item => (
-                        <MenuItem
-                            key={item.translationKey}
-                            title={props.translate(item.translationKey)}
-                            icon={item.icon}
-                            iconRight={item.iconRight}
-                            onPress={() => item.action()}
-                            shouldShowRightIcon
-                        />
-                    ))}
-                </View>
-                <View style={[styles.sidebarFooter]}>
-                    <Text
-                        style={[styles.chatItemMessageHeaderTimestamp]}
-                        numberOfLines={1}
-                    >
-                        {props.translate(
-                            'initialSettingsPage.readTheTermsAndPrivacy.phrase1',
-                        )}
-                        {' '}
-                        <TextLink style={[styles.textMicroSupporting, styles.link]} href={CONST.TERMS_URL}>
-                            {props.translate(
-                                'initialSettingsPage.readTheTermsAndPrivacy.phrase2',
-                            )}
-                        </TextLink>
-                        {' '}
-                        {props.translate(
-                            'initialSettingsPage.readTheTermsAndPrivacy.phrase3',
-                        )}
-                        {' '}
-                        <TextLink style={[styles.textMicroSupporting, styles.link]} href={CONST.PRIVACY_URL}>
-                            {props.translate(
-                                'initialSettingsPage.readTheTermsAndPrivacy.phrase4',
-                            )}
-                        </TextLink>
-                        .
-                    </Text>
-                </View>
-            </ScrollView>
+                    </ScrollView>
+                </>
+            )}
         </ScreenWrapper>
     );
 };
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 0c55f189bf1a..f10bca4c6037 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -244,57 +244,61 @@ class InitialSettingsPage extends React.Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
-                    title={this.props.translate('common.settings')}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <ScrollView style={[styles.settingsPageBackground]}>
-                    <View style={styles.w100}>
-                        <View style={styles.avatarSectionWrapper}>
-                            <Pressable style={[styles.mb3]} onPress={this.openProfileSettings}>
-                                <Tooltip text={this.props.currentUserPersonalDetails.displayName}>
-                                    <OfflineWithFeedback
-                                        pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
-                                    >
-                                        <Avatar
-                                            imageStyles={[styles.avatarLarge]}
-                                            source={ReportUtils.getAvatar(this.props.currentUserPersonalDetails.avatar, this.props.session.email)}
-                                            size={CONST.AVATAR_SIZE.LARGE}
-                                        />
-                                    </OfflineWithFeedback>
-                                </Tooltip>
-                            </Pressable>
-
-                            <Pressable style={[styles.mt1, styles.mw100]} onPress={this.openProfileSettings}>
-                                <Text style={[styles.textHeadline]} numberOfLines={1}>
-                                    {this.props.currentUserPersonalDetails.displayName
-                                        ? this.props.currentUserPersonalDetails.displayName
-                                        : Str.removeSMSDomain(this.props.session.email)}
-                                </Text>
-                            </Pressable>
-                            {this.props.currentUserPersonalDetails.displayName && (
-                                <Text
-                                    style={[styles.textLabelSupporting, styles.mt1]}
-                                    numberOfLines={1}
-                                >
-                                    {Str.removeSMSDomain(this.props.session.email)}
-                                </Text>
-                            )}
-                        </View>
-                        {_.map(this.getDefaultMenuItems(), (item, index) => this.getMenuItem(item, index))}
-
-                        <ConfirmModal
-                            danger
-                            title={this.props.translate('common.areYouSure')}
-                            prompt={this.props.translate('initialSettingsPage.signOutConfirmationText')}
-                            confirmText={this.props.translate('initialSettingsPage.signOut')}
-                            cancelText={this.props.translate('common.cancel')}
-                            isVisible={this.state.shouldShowSignoutConfirmModal}
-                            onConfirm={() => this.signOut(true)}
-                            onCancel={() => this.toggleSignoutConfirmModal(false)}
+                {({safeAreaPaddingBottomStyle}) => (
+                    <>
+                        <HeaderWithCloseButton
+                            title={this.props.translate('common.settings')}
+                            onCloseButtonPress={() => Navigation.dismissModal(true)}
                         />
-                    </View>
-                </ScrollView>
+                        <ScrollView contentContainerStyle={safeAreaPaddingBottomStyle} style={[styles.settingsPageBackground]}>
+                            <View style={styles.w100}>
+                                <View style={styles.avatarSectionWrapper}>
+                                    <Pressable style={[styles.mb3]} onPress={this.openProfileSettings}>
+                                        <Tooltip text={this.props.currentUserPersonalDetails.displayName}>
+                                            <OfflineWithFeedback
+                                                pendingAction={lodashGet(this.props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
+                                            >
+                                                <Avatar
+                                                    imageStyles={[styles.avatarLarge]}
+                                                    source={ReportUtils.getAvatar(this.props.currentUserPersonalDetails.avatar, this.props.session.email)}
+                                                    size={CONST.AVATAR_SIZE.LARGE}
+                                                />
+                                            </OfflineWithFeedback>
+                                        </Tooltip>
+                                    </Pressable>
+
+                                    <Pressable style={[styles.mt1, styles.mw100]} onPress={this.openProfileSettings}>
+                                        <Text style={[styles.textHeadline]} numberOfLines={1}>
+                                            {this.props.currentUserPersonalDetails.displayName
+                                                ? this.props.currentUserPersonalDetails.displayName
+                                                : Str.removeSMSDomain(this.props.session.email)}
+                                        </Text>
+                                    </Pressable>
+                                    {this.props.currentUserPersonalDetails.displayName && (
+                                        <Text
+                                            style={[styles.textLabelSupporting, styles.mt1]}
+                                            numberOfLines={1}
+                                        >
+                                            {Str.removeSMSDomain(this.props.session.email)}
+                                        </Text>
+                                    )}
+                                </View>
+                                {_.map(this.getDefaultMenuItems(), (item, index) => this.getMenuItem(item, index))}
+
+                                <ConfirmModal
+                                    danger
+                                    title={this.props.translate('common.areYouSure')}
+                                    prompt={this.props.translate('initialSettingsPage.signOutConfirmationText')}
+                                    confirmText={this.props.translate('initialSettingsPage.signOut')}
+                                    cancelText={this.props.translate('common.cancel')}
+                                    isVisible={this.state.shouldShowSignoutConfirmModal}
+                                    onConfirm={() => this.signOut(true)}
+                                    onCancel={() => this.toggleSignoutConfirmModal(false)}
+                                />
+                            </View>
+                        </ScrollView>
+                    </>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 7057bf514190..e321aef312dd 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -133,7 +133,7 @@ class ProfilePage extends Component {
             },
         ];
         return (
-            <ScreenWrapper includeSafeAreaPadding={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={this.props.translate('common.profile')}
                     shouldShowBackButton
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 86651877898d..e6692a107b1f 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -53,23 +53,27 @@ const PronounsPage = (props) => {
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            <HeaderWithCloseButton
-                title={props.translate('pronounsPage.pronouns')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
-            />
-            <Text style={[styles.ph5, styles.mb6]}>
-                {props.translate('pronounsPage.isShownOnProfile')}
-            </Text>
-            <OptionsList
-                sections={[{data: pronounsList}]}
-                onSelectRow={option => updatePronouns(option.value)}
-                hideSectionHeaders
-                optionHoveredStyle={styles.hoveredComponentBG}
-                shouldHaveOptionSeparator
-                contentContainerStyles={[styles.ph5]}
-            />
+            {({safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithCloseButton
+                        title={props.translate('pronounsPage.pronouns')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    />
+                    <Text style={[styles.ph5, styles.mb6]}>
+                        {props.translate('pronounsPage.isShownOnProfile')}
+                    </Text>
+                    <OptionsList
+                        sections={[{data: pronounsList}]}
+                        onSelectRow={option => updatePronouns(option.value)}
+                        hideSectionHeaders
+                        optionHoveredStyle={styles.hoveredComponentBG}
+                        shouldHaveOptionSeparator
+                        contentContainerStyles={[styles.ph5, safeAreaPaddingBottomStyle]}
+                    />
+                </>
+            )}
         </ScreenWrapper>
     );
 };
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
index 7a89ac8ce73d..fd91f9a2e91f 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.js
+++ b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -76,21 +76,26 @@ class TimezoneSelectPage extends Component {
     render() {
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
-                    title={this.props.translate('timezonePage.timezone')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <OptionsSelector
-                    textInputLabel={this.props.translate('timezonePage.timezone')}
-                    value={this.state.timezoneInputText}
-                    onChangeText={this.filterShownTimezones}
-                    onSelectRow={this.saveSelectedTimezone}
-                    optionHoveredStyle={styles.hoveredComponentBG}
-                    sections={[{data: this.state.timezoneOptions}]}
-                    shouldHaveOptionSeparator
-                />
+                {({safeAreaPaddingBottomStyle}) => (
+                    <>
+                        <HeaderWithCloseButton
+                            title={this.props.translate('timezonePage.timezone')}
+                            shouldShowBackButton
+                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE)}
+                            onCloseButtonPress={() => Navigation.dismissModal(true)}
+                        />
+                        <OptionsSelector
+                            textInputLabel={this.props.translate('timezonePage.timezone')}
+                            value={this.state.timezoneInputText}
+                            onChangeText={this.filterShownTimezones}
+                            onSelectRow={this.saveSelectedTimezone}
+                            optionHoveredStyle={styles.hoveredComponentBG}
+                            sections={[{data: this.state.timezoneOptions}]}
+                            shouldHaveOptionSeparator
+                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                        />
+                    </>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index fd57e35f3257..0d25f4bffcb3 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -148,119 +148,122 @@ class WorkspaceInitialPage extends React.Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <FullPageNotFoundView
-                    shouldShow={_.isEmpty(this.props.policy)}
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
-                >
-                    <HeaderWithCloseButton
-                        title={this.props.translate('workspace.common.workspace')}
-                        shouldShowBackButton
+                {({safeAreaPaddingBottomStyle}) => (
+                    <FullPageNotFoundView
+                        shouldShow={_.isEmpty(this.props.policy)}
                         onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                        shouldShowThreeDotsButton
-                        shouldShowGetAssistanceButton
-                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INITIAL}
-                        threeDotsMenuItems={[
-                            {
-                                icon: Expensicons.Trashcan,
-                                text: this.props.translate('workspace.common.delete'),
-                                onSelected: () => this.setState({isDeleteModalOpen: true}),
-                            },
-                        ]}
-                        threeDotsAnchorPosition={styles.threeDotsPopoverOffset}
-                    />
-                    <ScrollView
-                        contentContainerStyle={[
-                            styles.flexGrow1,
-                            styles.flexColumn,
-                            styles.justifyContentBetween,
-                        ]}
                     >
-                        <OfflineWithFeedback
-                            pendingAction={this.props.policy.pendingAction}
-                            onClose={this.dismissError}
-                            errors={this.props.policy.errors}
-                            errorRowStyles={[styles.ph6, styles.pv2]}
+                        <HeaderWithCloseButton
+                            title={this.props.translate('workspace.common.workspace')}
+                            shouldShowBackButton
+                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                            onCloseButtonPress={() => Navigation.dismissModal()}
+                            shouldShowThreeDotsButton
+                            shouldShowGetAssistanceButton
+                            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INITIAL}
+                            threeDotsMenuItems={[
+                                {
+                                    icon: Expensicons.Trashcan,
+                                    text: this.props.translate('workspace.common.delete'),
+                                    onSelected: () => this.setState({isDeleteModalOpen: true}),
+                                },
+                            ]}
+                            threeDotsAnchorPosition={styles.threeDotsPopoverOffset}
+                        />
+                        <ScrollView
+                            contentContainerStyle={[
+                                styles.flexGrow1,
+                                styles.flexColumn,
+                                styles.justifyContentBetween,
+                                safeAreaPaddingBottomStyle,
+                            ]}
                         >
-                            <View style={[styles.flex1]}>
-                                <View style={styles.avatarSectionWrapper}>
-                                    <View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
-                                        <Pressable
-                                            disabled={this.hasPolicyCreationError()}
-                                            style={[styles.pRelative, styles.avatarLarge]}
-                                            onPress={this.openEditor}
-                                        >
-                                            {this.props.policy.avatar
-                                                ? (
-                                                    <Avatar
-                                                        containerStyles={styles.avatarLarge}
-                                                        imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
-                                                        source={this.props.policy.avatar}
-                                                        fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                                                        size={CONST.AVATAR_SIZE.LARGE}
-                                                    />
-                                                )
-                                                : (
-                                                    <Icon
-                                                        src={Expensicons.Workspace}
-                                                        height={80}
-                                                        width={80}
-                                                        fill={themedefault.iconSuccessFill}
-                                                    />
-                                                )}
-                                        </Pressable>
-                                        {!_.isEmpty(this.props.policy.name) && (
+                            <OfflineWithFeedback
+                                pendingAction={this.props.policy.pendingAction}
+                                onClose={this.dismissError}
+                                errors={this.props.policy.errors}
+                                errorRowStyles={[styles.ph6, styles.pv2]}
+                            >
+                                <View style={[styles.flex1]}>
+                                    <View style={styles.avatarSectionWrapper}>
+                                        <View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
                                             <Pressable
                                                 disabled={this.hasPolicyCreationError()}
-                                                style={[
-                                                    styles.alignSelfCenter,
-                                                    styles.mt4,
-                                                    styles.w100,
-                                                ]}
+                                                style={[styles.pRelative, styles.avatarLarge]}
                                                 onPress={this.openEditor}
                                             >
-                                                <Tooltip text={this.props.policy.name}>
-                                                    <Text
-                                                        numberOfLines={1}
-                                                        style={[
-                                                            styles.textHeadline,
-                                                            styles.alignSelfCenter,
-                                                        ]}
-                                                    >
-                                                        {this.props.policy.name}
-                                                    </Text>
-                                                </Tooltip>
+                                                {this.props.policy.avatar
+                                                    ? (
+                                                        <Avatar
+                                                            containerStyles={styles.avatarLarge}
+                                                            imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
+                                                            source={this.props.policy.avatar}
+                                                            fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
+                                                            size={CONST.AVATAR_SIZE.LARGE}
+                                                        />
+                                                    )
+                                                    : (
+                                                        <Icon
+                                                            src={Expensicons.Workspace}
+                                                            height={80}
+                                                            width={80}
+                                                            fill={themedefault.iconSuccessFill}
+                                                        />
+                                                    )}
                                             </Pressable>
-                                        )}
+                                            {!_.isEmpty(this.props.policy.name) && (
+                                                <Pressable
+                                                    disabled={this.hasPolicyCreationError()}
+                                                    style={[
+                                                        styles.alignSelfCenter,
+                                                        styles.mt4,
+                                                        styles.w100,
+                                                    ]}
+                                                    onPress={this.openEditor}
+                                                >
+                                                    <Tooltip text={this.props.policy.name}>
+                                                        <Text
+                                                            numberOfLines={1}
+                                                            style={[
+                                                                styles.textHeadline,
+                                                                styles.alignSelfCenter,
+                                                            ]}
+                                                        >
+                                                            {this.props.policy.name}
+                                                        </Text>
+                                                    </Tooltip>
+                                                </Pressable>
+                                            )}
+                                        </View>
                                     </View>
+                                    {_.map(menuItems, item => (
+                                        <MenuItem
+                                            key={item.translationKey}
+                                            disabled={this.hasPolicyCreationError()}
+                                            interactive={!this.hasPolicyCreationError()}
+                                            title={this.props.translate(item.translationKey)}
+                                            icon={item.icon}
+                                            iconRight={item.iconRight}
+                                            onPress={() => item.action()}
+                                            shouldShowRightIcon
+                                            brickRoadIndicator={item.brickRoadIndicator}
+                                        />
+                                    ))}
                                 </View>
-                                {_.map(menuItems, item => (
-                                    <MenuItem
-                                        key={item.translationKey}
-                                        disabled={this.hasPolicyCreationError()}
-                                        interactive={!this.hasPolicyCreationError()}
-                                        title={this.props.translate(item.translationKey)}
-                                        icon={item.icon}
-                                        iconRight={item.iconRight}
-                                        onPress={() => item.action()}
-                                        shouldShowRightIcon
-                                        brickRoadIndicator={item.brickRoadIndicator}
-                                    />
-                                ))}
-                            </View>
-                        </OfflineWithFeedback>
-                    </ScrollView>
-                    <ConfirmModal
-                        title={this.props.translate('workspace.common.delete')}
-                        isVisible={this.state.isDeleteModalOpen}
-                        onConfirm={this.confirmDeleteAndHideModal}
-                        onCancel={() => this.toggleDeleteModal(false)}
-                        prompt={this.props.translate('workspace.common.deleteConfirmation')}
-                        confirmText={this.props.translate('common.delete')}
-                        cancelText={this.props.translate('common.cancel')}
-                        danger
-                    />
-                </FullPageNotFoundView>
+                            </OfflineWithFeedback>
+                        </ScrollView>
+                        <ConfirmModal
+                            title={this.props.translate('workspace.common.delete')}
+                            isVisible={this.state.isDeleteModalOpen}
+                            onConfirm={this.confirmDeleteAndHideModal}
+                            onCancel={() => this.toggleDeleteModal(false)}
+                            prompt={this.props.translate('workspace.common.deleteConfirmation')}
+                            confirmText={this.props.translate('common.delete')}
+                            cancelText={this.props.translate('common.cancel')}
+                            danger
+                        />
+                    </FullPageNotFoundView>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 71aaf2aa4195..6b4c50edf7fd 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -307,70 +307,73 @@ class WorkspaceMembersPage extends React.Component {
                 includeSafeAreaPaddingBottom={false}
                 style={[styles.defaultModalContainer]}
             >
-                <FullPageNotFoundView
-                    shouldShow={_.isEmpty(this.props.policy)}
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
-                >
-                    <HeaderWithCloseButton
-                        title={this.props.translate('workspace.common.members')}
-                        subtitle={policyName}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
-                        shouldShowGetAssistanceButton
-                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-                        shouldShowBackButton
-                    />
-                    <ConfirmModal
-                        danger
-                        title={this.props.translate('workspace.people.removeMembersTitle')}
-                        isVisible={this.state.isRemoveMembersConfirmModalVisible}
-                        onConfirm={() => this.removeUsers()}
-                        onCancel={this.hideConfirmModal}
-                        prompt={this.props.translate('workspace.people.removeMembersPrompt')}
-                        confirmText={this.props.translate('common.remove')}
-                        cancelText={this.props.translate('common.cancel')}
-                    />
-                    <View style={[styles.w100, styles.alignItemsCenter, styles.flex1]}>
-                        <View style={[styles.w100, styles.flexRow, styles.pt5, styles.ph5]}>
-                            <Button
-                                medium
-                                success
-                                text={this.props.translate('common.invite')}
-                                onPress={this.inviteUser}
-                            />
-                            <Button
-                                medium
-                                danger
-                                style={[styles.ml2]}
-                                isDisabled={this.state.selectedEmployees.length === 0}
-                                text={this.props.translate('common.remove')}
-                                onPress={this.askForConfirmationToRemove}
-                            />
-                        </View>
-                        <View style={[styles.w100, styles.mt4, styles.flex1]}>
-                            <View style={[styles.peopleRow, styles.ph5, styles.pb3]}>
-                                <View style={[styles.peopleRowCell]}>
-                                    <Checkbox
-                                        isChecked={removableMembers.length !== 0 && _.every(removableMembers, member => _.contains(this.state.selectedEmployees, member))}
-                                        onPress={() => this.toggleAllUsers()}
-                                    />
-                                </View>
-                                <View style={[styles.peopleRowCell, styles.flex1]}>
-                                    <Text style={[styles.textStrong, styles.ph5]}>
-                                        {this.props.translate('workspace.people.selectAll')}
-                                    </Text>
+                {({safeAreaPaddingBottomStyle}) => (
+                    <FullPageNotFoundView
+                        shouldShow={_.isEmpty(this.props.policy)}
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                    >
+                        <HeaderWithCloseButton
+                            title={this.props.translate('workspace.common.members')}
+                            subtitle={policyName}
+                            onCloseButtonPress={() => Navigation.dismissModal()}
+                            onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
+                            shouldShowGetAssistanceButton
+                            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
+                            shouldShowBackButton
+                        />
+                        <ConfirmModal
+                            danger
+                            title={this.props.translate('workspace.people.removeMembersTitle')}
+                            isVisible={this.state.isRemoveMembersConfirmModalVisible}
+                            onConfirm={() => this.removeUsers()}
+                            onCancel={this.hideConfirmModal}
+                            prompt={this.props.translate('workspace.people.removeMembersPrompt')}
+                            confirmText={this.props.translate('common.remove')}
+                            cancelText={this.props.translate('common.cancel')}
+                        />
+                        <View style={[styles.w100, styles.alignItemsCenter, styles.flex1]}>
+                            <View style={[styles.w100, styles.flexRow, styles.pt5, styles.ph5]}>
+                                <Button
+                                    medium
+                                    success
+                                    text={this.props.translate('common.invite')}
+                                    onPress={this.inviteUser}
+                                />
+                                <Button
+                                    medium
+                                    danger
+                                    style={[styles.ml2]}
+                                    isDisabled={this.state.selectedEmployees.length === 0}
+                                    text={this.props.translate('common.remove')}
+                                    onPress={this.askForConfirmationToRemove}
+                                />
+                            </View>
+                            <View style={[styles.w100, styles.mt4, styles.flex1]}>
+                                <View style={[styles.peopleRow, styles.ph5, styles.pb3]}>
+                                    <View style={[styles.peopleRowCell]}>
+                                        <Checkbox
+                                            isChecked={removableMembers.length !== 0 && _.every(removableMembers, member => _.contains(this.state.selectedEmployees, member))}
+                                            onPress={() => this.toggleAllUsers()}
+                                        />
+                                    </View>
+                                    <View style={[styles.peopleRowCell, styles.flex1]}>
+                                        <Text style={[styles.textStrong, styles.ph5]}>
+                                            {this.props.translate('workspace.people.selectAll')}
+                                        </Text>
+                                    </View>
                                 </View>
+                                <FlatList
+                                    renderItem={this.renderItem}
+                                    data={data}
+                                    keyExtractor={item => item.login}
+                                    showsVerticalScrollIndicator
+                                    style={[styles.ph5, styles.pb5]}
+                                    contentContainerStyle={safeAreaPaddingBottomStyle}
+                                />
                             </View>
-                            <FlatList
-                                renderItem={this.renderItem}
-                                data={data}
-                                keyExtractor={item => item.login}
-                                showsVerticalScrollIndicator
-                                style={[styles.ph5, styles.pb5]}
-                            />
                         </View>
-                    </View>
-                </FullPageNotFoundView>
+                    </FullPageNotFoundView>
+                )}
             </ScreenWrapper>
         );
     }