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

.eslintignore

@@ -1,9 +1,6 @@
 **/main.js
 **/staticBundle.js
 docs/generatedComponentApiDocs.js
-packages/react-native/flow/
-packages/react-native/Libraries/Renderer/*
-packages/react-native/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

@@ -355,12 +355,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
@@ -671,11 +665,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.
+ */
+ maxNumberOfLines?: 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

@@ -353,26 +353,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`.
@@ -642,6 +628,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.
+ */
+ maxNumberOfLines?: ?number,
+
  /**
  * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
  * Possible values:
@@ -663,6 +655,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.
  */
@@ -824,6 +822,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

@@ -400,7 +400,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,
 
@@ -413,10 +412,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.
+ */
+ maxNumberOfLines?: ?number,
+
  /**
  * When `false`, it will prevent the soft keyboard from showing when the field is focused.
  * Defaults to `true`.
@@ -1079,6 +1082,9 @@ function InternalTextInput(props: Props): React.Node {
  accessibilityState,
  id,
  tabIndex,
+ rows,
+ numberOfLines,
+ maxNumberOfLines,
  selection: propsSelection,
  ...otherProps
  } = props;
@@ -1435,6 +1441,8 @@ function InternalTextInput(props: Props): React.Node {
  focusable={tabIndex !== undefined ? !tabIndex : focusable}
  mostRecentEventCount={mostRecentEventCount}
  nativeID={id ?? props.nativeID}
+ numberOfLines={props.rows ?? props.numberOfLines}
+ maximumNumberOfLines={maxNumberOfLines}
  onBlur={_onBlur}
  onKeyPressSync={props.unstable_onKeyPressSync}
  onChange={_onChange}
@@ -1490,6 +1498,7 @@ function InternalTextInput(props: Props): React.Node {
  mostRecentEventCount={mostRecentEventCount}
  nativeID={id ?? props.nativeID}
  numberOfLines={props.rows ?? props.numberOfLines}
+ maximumNumberOfLines={maxNumberOfLines}
  onBlur={_onBlur}
  onChange={_onChange}
  onFocus={_onFocus}

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

@@ -18,7 +18,7 @@ import processColor from '../StyleSheet/processColor';
 import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
-import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import {NativeText, NativeVirtualText, CONTAINS_MAX_NUMBER_OF_LINES_RENAME} from './TextNativeComponent';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
@@ -59,6 +59,7 @@ const Text: React.AbstractComponent<
  pressRetentionOffset,
  role,
  suppressHighlighting,
+ numberOfLines,
  ...restProps
  } = props;
 
@@ -192,14 +193,22 @@ 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 numberOfLinesProps = useMemo(() => {
+ return {
+ [CONTAINS_MAX_NUMBER_OF_LINES_RENAME
+ ? 'maximumNumberOfLines'
+ : 'numberOfLines']: numberOfLinesValue,
+ };
+ }, [numberOfLinesValue]);
+
  const hasTextAncestor = useContext(TextAncestor);
 
  const _accessible = Platform.select({
@@ -241,7 +250,6 @@ const Text: React.AbstractComponent<
  isHighlighted={isHighlighted}
  isPressable={isPressable}
  nativeID={id ?? nativeID}
- numberOfLines={numberOfLines}
  ref={forwardedRef}
  selectable={_selectable}
  selectionColor={selectionColor}
@@ -252,6 +260,7 @@ const Text: React.AbstractComponent<
  <NativeText
  {...restProps}
  {...eventHandlersForText}
+ {...numberOfLinesProps}
  accessibilityLabel={ariaLabel ?? accessibilityLabel}
  accessibilityRole={
  role ? getAccessibilityRoleFromRole(role) : accessibilityRole
@@ -267,7 +276,6 @@ const Text: React.AbstractComponent<
  ellipsizeMode={ellipsizeMode ?? 'tail'}
  isHighlighted={isHighlighted}
  nativeID={id ?? nativeID}
- numberOfLines={numberOfLines}
  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

@@ -15,9 +15,11 @@ import {type HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import {type ProcessedColorValue} from '../StyleSheet/processColor';
 import {type PressEvent} from '../Types/CoreEventTypes';
 import {type TextProps} from './TextProps';
+import getNativeComponentAttributes from '../ReactNative/getNativeComponentAttributes';
 
 type NativeTextProps = $ReadOnly<{
  ...TextProps,
+ maximumNumberOfLines?: ?number,
  isHighlighted?: ?boolean,
  selectionColor?: ?ProcessedColorValue,
  onClick?: ?(event: PressEvent) => mixed,
@@ -31,7 +33,7 @@ const textViewConfig = {
  validAttributes: {
  isHighlighted: true,
  isPressable: true,
-numberOfLines: true,
+maximumNumberOfLines: true,
  ellipsizeMode: true,
  allowFontScaling: true,
  dynamicTypeRamp: true,
@@ -73,6 +75,10 @@ export const NativeText: HostComponent<NativeTextProps> =
  createViewConfig(textViewConfig),
  ): any);
 
+export const CONTAINS_MAX_NUMBER_OF_LINES_RENAME =
+ getNativeComponentAttributes('RCTText')?.NativeProps?.maximumNumberOfLines ===
+ 'number';
+
 export const NativeVirtualText: HostComponent<NativeTextProps> =
  !global.RN$Bridgeless && !UIManager.hasViewManagerConfig('RCTVirtualText')
  ? NativeText

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";