From 4cdb89aac30315d37a2e29e516f63cbae7a0018c Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 13 Jul 2021 02:18:00 +0530
Subject: [PATCH 1/2] fix: scrolling and layout

---
 src/pages/RequestCallPage.js               | 99 +++++++++++-----------
 src/pages/workspace/WorkspaceInvitePage.js | 97 +++++++++++----------
 2 files changed, 101 insertions(+), 95 deletions(-)

diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 3b491d6f4821..5a1ea5eb0e55 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {View, TextInput} from 'react-native';
+import {ScrollView, TextInput} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -20,6 +20,7 @@ import {requestConciergeDMCall} from '../libs/actions/Inbox';
 import {fetchOrCreateChatReport} from '../libs/actions/Report';
 import personalDetailsPropType from './personalDetailsPropType';
 import Text from '../components/Text';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -143,54 +144,56 @@ class RequestCallPage extends Component {
         const isButtonDisabled = false;
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('requestCallPage.requestACall')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => fetchOrCreateChatReport([
-                        this.props.session.email,
-                        CONST.EMAIL.CONCIERGE,
-                    ], true)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <View style={[styles.flex1, styles.p5]}>
-                    <Text style={[styles.mb4]}>
-                        {this.props.translate('requestCallPage.description')}
-                    </Text>
-                    <Text style={[styles.mt4, styles.mb4]}>
-                        {this.props.translate('requestCallPage.instructions')}
-                    </Text>
-                    <FullNameInputRow
-                        firstName={this.state.firstName}
-                        lastName={this.state.lastName}
-                        onChangeFirstName={firstName => this.setState({firstName})}
-                        onChangeLastName={lastName => this.setState({lastName})}
-                        style={[styles.mt4, styles.mb4]}
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('requestCallPage.requestACall')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => fetchOrCreateChatReport([
+                            this.props.session.email,
+                            CONST.EMAIL.CONCIERGE,
+                        ], true)}
+                        onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
-                    <Text style={[styles.mt4, styles.formLabel]} numberOfLines={1}>
-                        {this.props.translate('common.phoneNumber')}
-                    </Text>
-                    <TextInput
-                        autoCompleteType="off"
-                        autoCorrect={false}
-                        style={[styles.textInput]}
-                        value={this.state.phoneNumber}
-                        placeholder="+14158675309"
-                        onChangeText={phoneNumber => this.setState({phoneNumber})}
-                    />
-                    <Text style={[styles.mt4, styles.textLabel, styles.colorMuted, styles.mb6]}>
-                        {this.props.translate('requestCallPage.availabilityText')}
-                    </Text>
-                </View>
-                <FixedFooter>
-                    <Button
-                        success
-                        isDisabled={isButtonDisabled}
-                        onPress={this.onSubmit}
-                        style={[styles.w100]}
-                        text={this.props.translate('requestCallPage.callMe')}
-                        isLoading={this.state.isLoading}
-                    />
-                </FixedFooter>
+                    <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                        <Text style={[styles.mb4]}>
+                            {this.props.translate('requestCallPage.description')}
+                        </Text>
+                        <Text style={[styles.mt4, styles.mb4]}>
+                            {this.props.translate('requestCallPage.instructions')}
+                        </Text>
+                        <FullNameInputRow
+                            firstName={this.state.firstName}
+                            lastName={this.state.lastName}
+                            onChangeFirstName={firstName => this.setState({firstName})}
+                            onChangeLastName={lastName => this.setState({lastName})}
+                            style={[styles.mt4, styles.mb4]}
+                        />
+                        <Text style={[styles.mt4, styles.formLabel]} numberOfLines={1}>
+                            {this.props.translate('common.phoneNumber')}
+                        </Text>
+                        <TextInput
+                            autoCompleteType="off"
+                            autoCorrect={false}
+                            style={[styles.textInput]}
+                            value={this.state.phoneNumber}
+                            placeholder="+14158675309"
+                            onChangeText={phoneNumber => this.setState({phoneNumber})}
+                        />
+                        <Text style={[styles.mt4, styles.textLabel, styles.colorMuted, styles.mb6]}>
+                            {this.props.translate('requestCallPage.availabilityText')}
+                        </Text>
+                    </ScrollView>
+                    <FixedFooter>
+                        <Button
+                            success
+                            isDisabled={isButtonDisabled}
+                            onPress={this.onSubmit}
+                            style={[styles.w100]}
+                            text={this.props.translate('requestCallPage.callMe')}
+                            isLoading={this.state.isLoading}
+                        />
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 0fbf26c490fa..4ebc6a21a2b8 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 {TextInput, View, ScrollView} 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 FixedFooter from '../../components/FixedFooter';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -83,60 +85,61 @@ 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.flex1} contentContainerStyle={styles.p5}>
+                        <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>
         );
     }

From f3e07850787b416b026c38e5231f0e407c639e4a Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 13 Jul 2021 21:39:15 +0530
Subject: [PATCH 2/2] fix: scrolling issues

---
 src/pages/workspace/WorkspaceInvitePage.js | 72 +++++++++++-----------
 src/styles/styles.js                       |  2 +-
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 4ebc6a21a2b8..4952d37ba472 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -91,44 +91,42 @@ class WorkspaceInvitePage extends React.Component {
                         onCloseButtonPress={Navigation.dismissModal}
                     />
                     <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                        <View style={styles.flexGrow1}>
-                            <Text style={[styles.mb6]}>
-                                {this.props.translate('workspace.invite.invitePeoplePrompt')}
+                        <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')}
                             </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>
+                            <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>
                     </ScrollView>
                     <FixedFooter style={[styles.flexGrow0]}>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 7ee0e9873cd3..18473790e625 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1716,7 +1716,7 @@ const styles = {
     },
 
     workspaceInviteWelcome: {
-        minHeight: 150,
+        height: 150,
     },
 
     peopleRow: {