Merge pull request #19809 from margelo/@chrispader/fix/android-crashi…

…ng-on-compose-box-open Fix: Composer crashing and not expanding to full-size on Android
Expensify · Jun 13, 2023 · 756c7aa · 756c7aa
2 parents 71da78e + 051cac4
commit 756c7aa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 23 deletions.
diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
@@ -56,8 +56,8 @@ const defaultProps = {
         start: 0,
         end: 0,
     },
+    maxLines: undefined,
     isFullComposerAvailable: false,
-    maxLines: -1,
     setIsFullComposerAvailable: () => {},
     isComposerFullSize: false,
     style: null,
@@ -102,7 +102,11 @@ class Composer extends React.Component {
                 onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines(this.props, e)}
                 rejectResponderTermination={false}
                 textAlignVertical="center"
-                maximumNumberOfLines={!this.props.isComposerFullSize ? this.props.maxLines : undefined}
+                // Setting a really high number here fixes an issue with the `maxNumberOfLines` prop on TextInput, where on Android the text input would collapse to only one line,
+                // when it should actually expand to the container (https://github.com/Expensify/App/issues/11694#issuecomment-1560520670)
+                // @Szymon20000 is working on fixing this (android-only) issue in the in the upstream PR (https://github.com/facebook/react-native/pulls?q=is%3Apr+is%3Aopen+maxNumberOfLines)
+                // TODO: remove this commend once upstream PR is merged
+                maximumNumberOfLines={this.props.isComposerFullSize ? 1000000 : this.props.maxLines}
                 style={this.state.propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...this.props}

diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
@@ -56,7 +56,7 @@ const defaultProps = {
         start: 0,
         end: 0,
     },
-    maxLines: -1,
+    maxLines: undefined,
     isFullComposerAvailable: false,
     setIsFullComposerAvailable: () => {},
     isComposerFullSize: false,
@@ -103,14 +103,13 @@ class Composer extends React.Component {
             <RNTextInput
                 autoComplete="off"
                 placeholderTextColor={themeColors.placeholderText}
-                maxHeight={this.props.isComposerFullSize ? '100%' : undefined}
                 ref={(el) => (this.textInput = el)}
                 onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines(this.props, e)}
                 rejectResponderTermination={false}
                 textAlignVertical="center"
                 smartInsertDelete={false}
+                maximumNumberOfLines={this.props.isComposerFullSize ? undefined : this.props.maxLines}
                 style={this.state.propStyles}
-                maximumNumberOfLines={!this.props.isComposerFullSize ? this.props.maxLines : undefined}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...propsToPass}
                 editable={!this.props.isDisabled}

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -214,7 +214,6 @@ class ReportActionCompose extends React.Component {
                 start: isMobileSafari && !this.shouldAutoFocus ? 0 : props.comment.length,
                 end: isMobileSafari && !this.shouldAutoFocus ? 0 : props.comment.length,
             },
-            maxLines: props.isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES,
             value: props.comment,
 
             // If we are on a small width device then don't show last 3 items from conciergePlaceholderOptions
@@ -237,7 +236,6 @@ class ReportActionCompose extends React.Component {
             this.focus(false);
         });
 
-        this.setMaxLines();
         this.updateComment(this.comment);
 
         // Shows Popover Menu on Workspace Chat at first sign-in
@@ -257,10 +255,6 @@ class ReportActionCompose extends React.Component {
             this.focus();
         }
 
-        if (this.props.isComposerFullSize !== prevProps.isComposerFullSize) {
-            this.setMaxLines();
-        }
-
         // Value state does not have the same value as comment props when the comment gets changed from another tab.
         // In this case, we should synchronize the value between tabs.
         const shouldSyncComment = prevProps.comment !== this.props.comment && this.state.value !== this.props.comment;
@@ -402,17 +396,6 @@ class ReportActionCompose extends React.Component {
         this.setState({hasExceededMaxCommentLength});
     }
 
-    /**
-     * Set the maximum number of lines for the composer
-     */
-    setMaxLines() {
-        let maxLines = this.props.isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
-        if (this.props.isComposerFullSize) {
-            maxLines = CONST.COMPOSER.MAX_LINES_FULL;
-        }
-        this.setState({maxLines});
-    }
-
     // eslint-disable-next-line rulesdir/prefer-early-return
     setShouldShowSuggestionMenuToFalse() {
         if (this.state && this.state.shouldShowEmojiSuggestionMenu) {
@@ -923,6 +906,7 @@ class ReportActionCompose extends React.Component {
         const hasExceededMaxCommentLength = this.state.hasExceededMaxCommentLength;
         const isFullComposerAvailable = this.state.isFullComposerAvailable && !_.isEmpty(this.state.value);
         const hasReportRecipient = _.isObject(reportRecipient) && !_.isEmpty(reportRecipient);
+        const maxComposerLines = this.props.isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
 
         return (
             <View
@@ -1085,7 +1069,7 @@ class ReportActionCompose extends React.Component {
                                                 onChangeText={(comment) => this.updateComment(comment, true)}
                                                 onKeyPress={this.triggerHotkeyActions}
                                                 style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
-                                                maxLines={this.state.maxLines}
+                                                maxLines={maxComposerLines}
                                                 onFocus={() => this.setIsFocused(true)}
                                                 onBlur={() => {
                                                     this.setIsFocused(false);