Merge pull request #3989 from Expensify/Rory-FixMobileInviteForm

Make button visible in WorkspaceInvitePage (cherry picked from commit bb042f5)
Expensify · Jul 12, 2021 · 4885078 · 4885078
1 parent 7365dc3
commit 4885078
Showing 1 changed file with 50 additions and 46 deletions.
diff --git 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,60 +85,62 @@ 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]}
                             isDisabled={!this.state.emailOrPhone}
                             text={this.props.translate('common.invite')}
                             onPress={this.inviteUser}
                         />
-                    </View>
-                </View>
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }