From 85b78edc1d05eb4d2a90fdf94cd3f53d9753aaba Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Mon, 12 Jul 2021 14:12:46 -0700
Subject: [PATCH] Make button visible in WorkspaceInvitePage

---
 src/pages/workspace/WorkspaceInvitePage.js | 96 +++++++++++-----------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 0fbf26c490fa..8a6e47a66203 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {TextInput, View} from 'react-native';
+import {ScrollView, TextInput, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -17,6 +17,8 @@ import TextLink from '../../components/TextLink';
 import getEmailKeyboardType from '../../libs/getEmailKeyboardType';
 import themeColors from '../../styles/themes/default';
 import Growl from '../../libs/Growl';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
+import FixedFooter from '../../components/FixedFooter';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -83,51 +85,53 @@ class WorkspaceInvitePage extends React.Component {
     render() {
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('workspace.invite.invitePeople')}
-                    onCloseButtonPress={Navigation.dismissModal}
-                />
-                <View style={[styles.p5, styles.flex1, styles.overflowAuto]}>
-                    <View style={styles.flexGrow1}>
-                        <Text style={[styles.mb6]}>
-                            {this.props.translate('workspace.invite.invitePeoplePrompt')}
-                        </Text>
-                        <View style={styles.mb6}>
-                            <Text style={[styles.mb2]}>
-                                {this.props.translate('workspace.invite.enterEmailOrPhone')}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('workspace.invite.invitePeople')}
+                        onCloseButtonPress={Navigation.dismissModal}
+                    />
+                    <ScrollView style={[styles.p5, styles.flex1, styles.overflowAuto]}>
+                        <View style={styles.flexGrow1}>
+                            <Text style={[styles.mb6]}>
+                                {this.props.translate('workspace.invite.invitePeoplePrompt')}
                             </Text>
-                            <TextInput
-                                autoCompleteType="email"
-                                autoCorrect={false}
-                                autoCapitalize="none"
-                                style={[styles.textInput]}
-                                value={this.state.emailOrPhone}
-                                keyboardType={getEmailKeyboardType()}
-                                onChangeText={text => this.setState({emailOrPhone: text})}
-                            />
+                            <View style={styles.mb6}>
+                                <Text style={[styles.mb2]}>
+                                    {this.props.translate('workspace.invite.enterEmailOrPhone')}
+                                </Text>
+                                <TextInput
+                                    autoCompleteType="email"
+                                    autoCorrect={false}
+                                    autoCapitalize="none"
+                                    style={[styles.textInput]}
+                                    value={this.state.emailOrPhone}
+                                    keyboardType={getEmailKeyboardType()}
+                                    onChangeText={text => this.setState({emailOrPhone: text})}
+                                />
+                            </View>
+                            <View style={styles.mb6}>
+                                <Text style={[styles.mb2]}>
+                                    {this.props.translate('workspace.invite.personalMessagePrompt')}
+                                </Text>
+                                <TextInput
+                                    autoCompleteType="off"
+                                    autoCorrect={false}
+                                    style={[styles.textInput, styles.workspaceInviteWelcome, styles.mb6]}
+                                    numberOfLines={10}
+                                    textAlignVertical="top"
+                                    multiline
+                                    value={this.state.welcomeNote}
+                                    placeholder={this.getWelcomeNotePlaceholder()}
+                                    placeholderTextColor={themeColors.placeholderText}
+                                    onChangeText={text => this.setState({welcomeNote: text})}
+                                />
+                                <TextLink href="https://use.expensify.com/privacy">
+                                    {this.props.translate('common.privacy')}
+                                </TextLink>
+                            </View>
                         </View>
-                        <View style={styles.mb6}>
-                            <Text style={[styles.mb2]}>
-                                {this.props.translate('workspace.invite.personalMessagePrompt')}
-                            </Text>
-                            <TextInput
-                                autoCompleteType="off"
-                                autoCorrect={false}
-                                style={[styles.textInput, styles.workspaceInviteWelcome, styles.mb6]}
-                                numberOfLines={10}
-                                textAlignVertical="top"
-                                multiline
-                                value={this.state.welcomeNote}
-                                placeholder={this.getWelcomeNotePlaceholder()}
-                                placeholderTextColor={themeColors.placeholderText}
-                                onChangeText={text => this.setState({welcomeNote: text})}
-                            />
-                            <TextLink href="https://use.expensify.com/privacy">
-                                {this.props.translate('common.privacy')}
-                            </TextLink>
-                        </View>
-                    </View>
-                    <View style={styles.flexGrow0}>
+                    </ScrollView>
+                    <FixedFooter style={[styles.flexGrow0]}>
                         <Button
                             success
                             style={[styles.mb2]}
@@ -135,8 +139,8 @@ class WorkspaceInvitePage extends React.Component {
                             text={this.props.translate('common.invite')}
                             onPress={this.inviteUser}
                         />
-                    </View>
-                </View>
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }