Skip to content

Conversation

@harshaldhawale
Copy link

@harshaldhawale harshaldhawale commented Nov 18, 2025

Problem

When using , the component does not respect the specified number of lines. The height remains fixed, causing layout issues and requiring manual intervention from the developer.

Motivation

The internal height calculation logic runs after layout instead of before render. Because of this, the initial height is not correctly set based on numberOfLines. The native height is applied later, leading to a mismatch.

Solution

  • Added logic to correctly derive the initial height from numberOfLines before render.
  • Ensure multiline height updates run during initialization instead of post‐layout.
  • Prevent overrides when the user provides a custom height.

Related issue

#4784 – TextInput with multiline and numberOfLines does not correctly adjust height

Test plan

  • Render → height should match 4 lines.
  • Change numberOfLines dynamically → height should update correctly.
  • Custom style={{ height: ... }} should override default behavior.
  • Snapshot tests updated accordingly.

Screenshot_2025-11-18-14-17-38-83_616845549e330d80b057239097a8ecbc~2
Screenshot_2025-11-18-14-19-57-20_616845549e330d80b057239097a8ecbc~2


Note

Ensure multiline TextInput respects numberOfLines by precomputing minHeight from themed lineHeight and applying it via contentStyle.

  • TextInput:
    • Compute lineHeight from theme (bodyLargeregular fallback → default 24).
    • Derive autoHeight for multiline with numberOfLines and apply as minHeight via contentStyle array in both TextInputFlat and TextInputOutlined.
  • Tests:
    • Update snapshots to reflect contentStyle arrays and resulting minHeight/layout changes.

Written by Cursor Bugbot for commit 4e2543e. This will update automatically on new commits. Configure here.

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on December 2

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

contentStyle={[
contentStyle,
autoHeight ? { minHeight: autoHeight } : undefined,
].filter(Boolean)}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Prop Structure: Unnecessary Array Nesting

The contentStyle prop is always wrapped in an array via .filter(Boolean), creating unnecessary nesting. When a user provides contentStyle as an object and autoHeight is undefined, the result is [contentStyle] instead of contentStyle, causing the child components to receive a nested array structure. While React Native flattens nested arrays, this changes the prop structure and could cause issues with type checking or other tooling. The same issue occurs at lines 582-585 for the flat variant.

Fix in Cursor Fix in Web

const autoHeight =
multiline && rest.numberOfLines
? rest.numberOfLines * lineHeight + 8 // + padding
: undefined;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Style Precedence: minHeight vs. numberOfLines

When a user provides minHeight in contentStyle and numberOfLines is also specified, the auto-calculated minHeight from numberOfLines overrides the user's explicit minHeight value. This happens because both values are placed in an array where the auto-calculated value comes last, causing it to take precedence in React Native's style merging. The auto-height should only apply when the user hasn't specified their own minHeight or height.

Fix in Cursor Fix in Web

@callstack-bot
Copy link

Hey @harshaldhawale, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants