[TextInput] Add numberOfLines and maximumNumberOfLines props on iOS and fix Android implementation

.eslintignore

@@ -1,9 +1,9 @@
 **/main.js
 **/staticBundle.js
 docs/generatedComponentApiDocs.js
-packages/react-native/flow/
-packages/react-native/Libraries/Renderer/*
-packages/react-native/Libraries/vendor/**/*
+flow/
+Libraries/Renderer/*
+Libraries/vendor/**/*
 node_modules/
 packages/*/node_modules
 packages/react-native-codegen/lib

packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -179,6 +179,13 @@ export type NativeProps = $ReadOnly<{|
    */
   numberOfLines?: ?Int32,
 
+  /**
+   * Sets the maximum number of lines for a `TextInput`. Use it with multiline set to
+   * `true` to be able to fill the lines.
+   * @platform android
+   */
+  maximumNumberOfLines?: ?Int32,
+
   /**
    * When `false`, if there is a small amount of space available around a text input
    * (e.g. landscape orientation on a phone), the OS may choose to have the user edit

packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -144,6 +144,8 @@ const RCTTextInputViewConfig = {
     placeholder: true,
     autoCorrect: true,
     multiline: true,
+    numberOfLines: true,
+    maximumNumberOfLines: true,
     textContentType: true,
     maxLength: true,
     autoCapitalize: true,

packages/react-native/Libraries/Components/TextInput/TextInput.d.ts

@@ -338,12 +338,6 @@ export interface TextInputAndroidProps {
    */
   inlineImagePadding?: number | undefined;
 
-  /**
-   * Sets the number of lines for a TextInput.
-   * Use it with multiline set to true to be able to fill the lines.
-   */
-  numberOfLines?: number | undefined;
-
   /**
    * Sets the return key to the label. Use it instead of `returnKeyType`.
    * @platform android
@@ -654,11 +648,29 @@ export interface TextInputProps
    */
   maxLength?: number | undefined;
 
+  /**
+   * Sets the maximum number of lines for a TextInput.
+   * Use it with multiline set to true to be able to fill the lines.
+   */
+  maximumNumberOfLines?: number | undefined;
+
   /**
    * If true, the text input can be multiple lines. The default value is false.
    */
   multiline?: boolean | undefined;
 
+  /**
+   * Sets the number of lines for a TextInput.
+   * Use it with multiline set to true to be able to fill the lines.
+   */
+  numberOfLines?: number | undefined;
+
+  /**
+   * Sets the number of rows for a TextInput.
+   * Use it with multiline set to true to be able to fill the lines.
+   */
+  rows?: number | undefined;
+
   /**
    * Callback that is called when the text input is blurred
    */

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -343,26 +343,12 @@ type AndroidProps = $ReadOnly<{|
    */
   inlineImagePadding?: ?number,
 
-  /**
-   * Sets the number of lines for a `TextInput`. Use it with multiline set to
-   * `true` to be able to fill the lines.
-   * @platform android
-   */
-  numberOfLines?: ?number,
-
   /**
    * Sets the return key to the label. Use it instead of `returnKeyType`.
    * @platform android
    */
   returnKeyLabel?: ?string,
 
-  /**
-   * Sets the number of rows for a `TextInput`. Use it with multiline set to
-   * `true` to be able to fill the lines.
-   * @platform android
-   */
-  rows?: ?number,
-
   /**
    * When `false`, it will prevent the soft keyboard from showing when the field is focused.
    * Defaults to `true`.
@@ -632,6 +618,12 @@ export type Props = $ReadOnly<{|
    */
   keyboardType?: ?KeyboardType,
 
+  /**
+   * Sets the maximum number of lines for a `TextInput`. Use it with multiline set to
+   * `true` to be able to fill the lines.
+   */
+  maximumNumberOfLines?: ?number,
+
   /**
    * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
    * Possible values:
@@ -653,6 +645,12 @@ export type Props = $ReadOnly<{|
    */
   multiline?: ?boolean,
 
+  /**
+   * Sets the number of lines for a `TextInput`. Use it with multiline set to
+   * `true` to be able to fill the lines.
+   */
+  numberOfLines?: ?number,
+
   /**
    * Callback that is called when the text input is blurred.
    */
@@ -814,6 +812,12 @@ export type Props = $ReadOnly<{|
    */
   returnKeyType?: ?ReturnKeyType,
 
+  /**
+   * Sets the number of rows for a `TextInput`. Use it with multiline set to
+   * `true` to be able to fill the lines.
+   */
+  rows?: ?number,
+
   /**
    * If `true`, the text input obscures the text entered so that sensitive text
    * like passwords stay secure. The default value is `false`. Does not work with 'multiline={true}'.

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -387,7 +387,6 @@ type AndroidProps = $ReadOnly<{|
   /**
    * Sets the number of lines for a `TextInput`. Use it with multiline set to
    * `true` to be able to fill the lines.
-   * @platform android
    */
   numberOfLines?: ?number,
 
@@ -400,10 +399,14 @@ type AndroidProps = $ReadOnly<{|
   /**
    * Sets the number of rows for a `TextInput`. Use it with multiline set to
    * `true` to be able to fill the lines.
-   * @platform android
    */
   rows?: ?number,
 
+  /**
+   * Sets the maximum number of lines the TextInput can have.
+   */
+  maximumNumberOfLines?: ?number,
+
   /**
    * When `false`, it will prevent the soft keyboard from showing when the field is focused.
    * Defaults to `true`.
@@ -1066,6 +1069,8 @@ function InternalTextInput(props: Props): React.Node {
     accessibilityState,
     id,
     tabIndex,
+    rows,
+    numberOfLines,
     ...otherProps
   } = props;
 
@@ -1436,6 +1441,7 @@ function InternalTextInput(props: Props): React.Node {
         focusable={tabIndex !== undefined ? !tabIndex : focusable}
         mostRecentEventCount={mostRecentEventCount}
         nativeID={id ?? props.nativeID}
+        numberOfLines={props.rows ?? props.numberOfLines}
         onBlur={_onBlur}
         onKeyPressSync={props.unstable_onKeyPressSync}
         onChange={_onChange}

packages/react-native/Libraries/Text/Text.js

@@ -59,6 +59,7 @@ const Text: React.AbstractComponent<
     pressRetentionOffset,
     role,
     suppressHighlighting,
+    numberOfLines,
     ...restProps
   } = props;
 
@@ -192,12 +193,12 @@ const Text: React.AbstractComponent<
     }
   }
 
-  let numberOfLines = restProps.numberOfLines;
+  let numberOfLinesValue = numberOfLines;
   if (numberOfLines != null && !(numberOfLines >= 0)) {
     console.error(
       `'numberOfLines' in <Text> must be a non-negative number, received: ${numberOfLines}. The value will be set to 0.`,
     );
-    numberOfLines = 0;
+    numberOfLinesValue = 0;
   }
 
   const hasTextAncestor = useContext(TextAncestor);
@@ -241,7 +242,7 @@ const Text: React.AbstractComponent<
       isHighlighted={isHighlighted}
       isPressable={isPressable}
       nativeID={id ?? nativeID}
-      numberOfLines={numberOfLines}
+      maximumNumberOfLines={numberOfLinesValue}
       ref={forwardedRef}
       selectable={_selectable}
       selectionColor={selectionColor}
@@ -267,7 +268,7 @@ const Text: React.AbstractComponent<
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
         nativeID={id ?? nativeID}
-        numberOfLines={numberOfLines}
+        maximumNumberOfLines={numberOfLinesValue}
         ref={forwardedRef}
         selectable={_selectable}
         selectionColor={selectionColor}

packages/react-native/Libraries/Text/Text/RCTTextViewManager.m

@@ -26,7 +26,7 @@ @implementation RCTTextViewManager {
 
 RCT_EXPORT_MODULE(RCTText)
 
-RCT_REMAP_SHADOW_PROPERTY(numberOfLines, maximumNumberOfLines, NSInteger)
+RCT_EXPORT_SHADOW_PROPERTY(maximumNumberOfLines, NSInteger)
 RCT_REMAP_SHADOW_PROPERTY(ellipsizeMode, lineBreakMode, NSLineBreakMode)
 RCT_REMAP_SHADOW_PROPERTY(adjustsFontSizeToFit, adjustsFontSizeToFit, BOOL)
 RCT_REMAP_SHADOW_PROPERTY(minimumFontScale, minimumFontScale, CGFloat)

packages/react-native/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputViewManager.m

@@ -7,6 +7,8 @@
 
 #import <React/RCTMultilineTextInputView.h>
 #import <React/RCTMultilineTextInputViewManager.h>
+#import <React/RCTUITextView.h>
+#import <React/RCTBaseTextInputShadowView.h>
 
 @implementation RCTMultilineTextInputViewManager
 
@@ -17,8 +19,21 @@ - (UIView *)view
   return [[RCTMultilineTextInputView alloc] initWithBridge:self.bridge];
 }
 
+- (RCTShadowView *)shadowView
+{
+  RCTBaseTextInputShadowView *shadowView = (RCTBaseTextInputShadowView *)[super shadowView];
+
+  shadowView.maximumNumberOfLines = 0;
+  shadowView.exactNumberOfLines = 0;
+
+  return shadowView;
+}
+
 #pragma mark - Multiline <TextInput> (aka TextView) specific properties
 
 RCT_REMAP_VIEW_PROPERTY(dataDetectorTypes, backedTextInputView.dataDetectorTypes, UIDataDetectorTypes)
 
+RCT_EXPORT_SHADOW_PROPERTY(maximumNumberOfLines, NSInteger)
+RCT_REMAP_SHADOW_PROPERTY(numberOfLines, exactNumberOfLines, NSInteger)
+
 @end

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.h

@@ -16,6 +16,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, copy, nullable) NSString *text;
 @property (nonatomic, copy, nullable) NSString *placeholder;
 @property (nonatomic, assign) NSInteger maximumNumberOfLines;
+@property (nonatomic, assign) NSInteger exactNumberOfLines;
 @property (nonatomic, copy, nullable) RCTDirectEventBlock onContentSizeChange;
 
 - (void)uiManagerWillPerformMounting;

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m

@@ -218,7 +218,22 @@ - (NSAttributedString *)measurableAttributedText
 
 - (CGSize)sizeThatFitsMinimumSize:(CGSize)minimumSize maximumSize:(CGSize)maximumSize
 {
-  NSAttributedString *attributedText = [self measurableAttributedText];
+  NSMutableAttributedString *attributedText = [[self measurableAttributedText] mutableCopy];
+
+  /*
+  * The block below is responsible for setting the exact height of the view in lines
+  * Unfortunatelly, iOS doesn't export any easy way to do it. So we set maximumNumberOfLines
+  * prop and then add random lines at the front. However, they are only used for layout
+  * so they are not visible on the screen.
+  */
+  if (self.exactNumberOfLines) {
+    NSMutableString *newLines = [NSMutableString stringWithCapacity:self.exactNumberOfLines];
+    for (NSUInteger i = 0UL; i < self.exactNumberOfLines; ++i) {
+      [newLines appendString:@"\n"];
+    }
+    [attributedText insertAttributedString:[[NSAttributedString alloc] initWithString:newLines attributes:self.textAttributes.effectiveTextAttributes] atIndex:0];
+    _maximumNumberOfLines = self.exactNumberOfLines;
+  }
 
   if (!_textStorage) {
     _textContainer = [NSTextContainer new];

packages/react-native/Libraries/Text/TextInput/Singleline/RCTSinglelineTextInputViewManager.m

@@ -19,6 +19,7 @@ - (RCTShadowView *)shadowView
   RCTBaseTextInputShadowView *shadowView = (RCTBaseTextInputShadowView *)[super shadowView];
 
   shadowView.maximumNumberOfLines = 1;
+  shadowView.exactNumberOfLines = 0;
 
   return shadowView;
 }

packages/react-native/Libraries/Text/TextNativeComponent.js

@@ -18,6 +18,7 @@ import {type TextProps} from './TextProps';
 
 type NativeTextProps = $ReadOnly<{
   ...TextProps,
+  maximumNumberOfLines?: ?number,
   isHighlighted?: ?boolean,
   selectionColor?: ?ProcessedColorValue,
   onClick?: ?(event: PressEvent) => mixed,
@@ -31,7 +32,7 @@ const textViewConfig = {
   validAttributes: {
     isHighlighted: true,
     isPressable: true,
-    numberOfLines: true,
+    maximumNumberOfLines: true,
     ellipsizeMode: true,
     allowFontScaling: true,
     dynamicTypeRamp: true,

packages/react-native/ReactAndroid/build.gradle

@@ -709,6 +709,9 @@ dependencies {
     androidTestImplementation("androidx.test:rules:${ANDROIDX_TEST_VERSION}")
     androidTestImplementation("org.mockito:mockito-core:${MOCKITO_CORE_VERSION}")
 
+    api('com.parse.bolts:bolts-tasks:1.4.0')
+    api('com.parse.bolts:bolts-applinks:1.4.0')
+
     // This compileOnly dependency is needed to be able to update the offline
     // mirror from a non-linux machine, while still executing inside a Linux CI
     // as we declare a dependency on aap2 @linux so we're sure the linux artifact

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewDefaults.java

@@ -12,5 +12,6 @@ public class ViewDefaults {
 
   public static final float FONT_SIZE_SP = 14.0f;
   public static final int LINE_HEIGHT = 0;
-  public static final int NUMBER_OF_LINES = Integer.MAX_VALUE;
+  public static final int NUMBER_OF_LINES = -1;
+  public static final int MAXIMUM_NUMBER_OF_LINES = Integer.MAX_VALUE;
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -96,6 +96,7 @@ public class ViewProps {
   public static final String LETTER_SPACING = "letterSpacing";
   public static final String NEEDS_OFFSCREEN_ALPHA_COMPOSITING = "needsOffscreenAlphaCompositing";
   public static final String NUMBER_OF_LINES = "numberOfLines";
+  public static final String MAXIMUM_NUMBER_OF_LINES = "maximumNumberOfLines";
   public static final String ELLIPSIZE_MODE = "ellipsizeMode";
   public static final String ADJUSTS_FONT_SIZE_TO_FIT = "adjustsFontSizeToFit";
   public static final String MINIMUM_FONT_SCALE = "minimumFontScale";

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java

@@ -328,6 +328,7 @@ protected Spannable spannedFromShadowNode(
   protected boolean mIsAccessibilityLink = false;
 
   protected int mNumberOfLines = UNSET;
+  protected int mMaxNumberOfLines = UNSET;
   protected int mTextAlign = Gravity.NO_GRAVITY;
   protected int mTextBreakStrategy =
       (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) ? 0 : Layout.BREAK_STRATEGY_HIGH_QUALITY;
@@ -412,6 +413,12 @@ public void setNumberOfLines(int numberOfLines) {
     markUpdated();
   }
 
+  @ReactProp(name = ViewProps.MAXIMUM_NUMBER_OF_LINES, defaultInt = UNSET)
+  public void setMaxNumberOfLines(int numberOfLines) {
+    mMaxNumberOfLines = numberOfLines == 0 ? UNSET : numberOfLines;
+    markUpdated();
+  }
+
   @ReactProp(name = ViewProps.LINE_HEIGHT, defaultFloat = Float.NaN)
   public void setLineHeight(float lineHeight) {
     mTextAttributes.setLineHeight(lineHeight);

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java

@@ -49,8 +49,8 @@ public void setAccessible(ReactTextView view, boolean accessible) {
   }
 
   // maxLines can only be set in master view (block), doesn't really make sense to set in a span
-  @ReactProp(name = ViewProps.NUMBER_OF_LINES, defaultInt = ViewDefaults.NUMBER_OF_LINES)
-  public void setNumberOfLines(ReactTextView view, int numberOfLines) {
+  @ReactProp(name = ViewProps.MAXIMUM_NUMBER_OF_LINES, defaultInt = ViewDefaults.MAXIMUM_NUMBER_OF_LINES)
+  public void setMaxNumberOfLines(ReactTextView view, int numberOfLines) {
     view.setNumberOfLines(numberOfLines);
   }