react / react/react-native

Bug: TextInput with multiline and lineHeight has height issue when controlled

Open
#46,207 6 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: TextInput Issue: Author Provided Repro Newer Patch Available
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

I'm experiencing a bug with the TextInput component when using it as a controlled component with both multiline and lineHeight properties. This issue occurs only on iOS; it does not occur on Android.

Expected Behavior:

The TextInput should adjust its height according to the content without any unexpected changes.

Actual Behavior:

On iOS, when the TextInput is controlled, the height of the TextInput increases unexpectedly as the number of lines increases.
This issue does not occur when the TextInput is uncontrolled.

Steps to reproduce
  1. Create a TextInput component with the following properties:
    • multiline={true}
    • lineHeight set to a specific value (e.g., 60)
    • Controlled by a state variable (value and onChangeText props).
  2. Type text into the TextInput to increase the number of lines.
React Native Version

0.75.2
I have confirmed that this issue does not occur in version 0.73.2.

Affected Platforms

Runtime - iOS

Output of npx react-native info
System:
  OS: macOS 14.4
  CPU: (8) arm64 Apple M1 Pro
  Memory: 236.09 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.12.2
    path: ~/.nvm/versions/node/v20.12.2/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.12.2/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v20.12.2/bin/npm
  Watchman:
    version: 2024.07.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12071903
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found
Stacktrace or Logs
-
Reproducer

https://snack.expo.dev/@holyunwoo/eager-indigo-cereal?platform=ios

Screenshots and Videos
Uncontrolled

https://github.com/user-attachments/assets/7c359007-c157-4e68-814d-45a60c97239d

Controlled

https://github.com/user-attachments/assets/1cf5a2e8-0cc7-4a81-bb6d-4b9ae0741e1b

SCR-20240825-qgyj

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Snack reproducer and the TextInput entry point, exercising multiline, lineHeight, and controlled value/onChangeText behavior on iOS. Compare the height changes in React Native 0.75.2 with 0.73.2; done means controlled and uncontrolled inputs keep the expected content-based height as lines increase without affecting Android behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.