Merge pull request #4649 from studio-504/expensitextinput-multiline

Multiline for ExpensiTextInput

Author: AndrewGable

src/components/ExpensiTextInput/BaseExpensiTextInput.js

@@ -120,13 +120,19 @@ class BaseExpensiTextInput extends Component {
             ignoreLabelTranslateX,
             innerRef,
             autoFocus,
+            multiline,
             ...inputProps
         } = this.props;
 
         const hasLabel = Boolean(label.length);
         return (
             <View>
-                <View style={[styles.componentHeightLarge, ...containerStyles]}>
+                <View
+                    style={[
+                        !multiline && styles.componentHeightLarge,
+                        ...containerStyles,
+                    ]}
+                >
                     <TouchableWithoutFeedback onPress={() => this.input.focus()} focusable={false}>
                         <View
                             style={[
@@ -160,6 +166,7 @@ class BaseExpensiTextInput extends Component {
                                 placeholderTextColor={themeColors.placeholderText}
                                 underlineColorAndroid="transparent"
                                 style={[...inputStyle, errorText ? styles.errorOutline : undefined]}
+                                multiline={multiline}
                                 onFocus={this.onFocus}
                                 onBlur={this.onBlur}
                                 onChangeText={this.setValue}

src/pages/workspace/WorkspaceInvitePage.js

@@ -52,7 +52,7 @@ class WorkspaceInvitePage extends React.Component {
 
         this.state = {
             userLogins: '',
-            welcomeNote: '',
+            welcomeNote: this.getWelcomeNotePlaceholder(),
         };
 
         this.focusEmailOrPhoneInput = this.focusEmailOrPhoneInput.bind(this);
@@ -128,7 +128,7 @@ class WorkspaceInvitePage extends React.Component {
                                 label={this.props.translate('workspace.invite.personalMessagePrompt')}
                                 autoCompleteType="off"
                                 autoCorrect={false}
-                                numberOfLines={10}
+                                numberOfLines={5}
                                 textAlignVertical="top"
                                 multiline
                                 value={this.state.welcomeNote}

src/styles/styles.js

@@ -542,6 +542,8 @@ const styles = {
     expensiTextInput: {
         fontFamily: fontFamily.GTA,
         fontSize: variables.fontSizeNormal,
+        color: themeColors.text,
+        ...spacing.pv0,
     },
     expensiTextInputDesktop: addOutlineWidth({}, 0),
     expensiTextInputAndroid: left => ({