React Native 0.76+ TextInput line break is broken on Android

[Sky]

Description

Looks like TextInput line break does not work correctly on Android. Input field is growing in size but text is in one line. It is working fine with New Architecture disabled.

Steps to reproduce

1. npx @react-native-community/cli@latest init AwesomeProject --version 0.76.8ornpx @react-native-community/cli@latest init AwesomeProject --version 0.77.2
2. Add text input to default App.tsx <TextInput style={{ borderColor: 'black', borderWidth: 1, color: 'black' }} />
3. cd "AwesomeProject" && npx react-native run-android

React Native Version

0.77.2

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.3.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 496.02 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.0
    path: ~/.nvm/versions/node/v18.17.0/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.0/bin/npm
  Watchman:
    version: 4.9.0
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/arthur/.gem/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    Android NDK: 26.1.10909125
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13208083
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 3.2.5
    path: /Users/arthur/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.2
    wanted: 0.77.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/JFmCTXiVgWwi6cSF2q1SK

Screenshots and Videos

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[Sky]

Reproducer https://snack.expo.dev/JFmCTXiVgWwi6cSF2q1SK

[sarthak-d11]

Hi @Sky , Could you please try using the multiline property like this? <TextInput multiline style={{ borderColor: 'black', borderWidth: 1, color: 'black' }} />. This should allow the text to break into multiple lines. You can refer to the React Native documentation for more details.

I believe this behavior aligns with the expected functionality of React Native. I was able to reproduce this behavior on both Android (with the new and old architecture) RN version 0.77.2 and have also verified that previous RN versions exhibit the same behavior.

[Sky]

When New Arch is disabled text is breaking without multiline. And I think the main issue is not that it is not breaking lines anymore (because it also does not on iOS) but the text field is growing in size so it's calculating new size for text breaking but the text itself is not breaking which looks odd from UI perspective and it does not change size on iOS like this. With multiline text will start breaking but it's different behavior (like on keyboard return key it will add new line where is without multiline it will trigger done action).