Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Single-line TextInput sized as multiline on Fabric ShadowNode #46583

Open
oblador opened this issue Sep 20, 2024 · 0 comments · May be fixed by #47507
Open

Single-line TextInput sized as multiline on Fabric ShadowNode #46583

oblador opened this issue Sep 20, 2024 · 0 comments · May be fixed by #47507
Labels
Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Resolution: PR Submitted A pull request with a fix has been provided. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)

Comments

@oblador
Copy link
Contributor

oblador commented Sep 20, 2024

Description

Having a non-multiline TextInput component on new arch will be sized by the layout engine/shadow node as if it were multiline unless one explicitly sets numberOfLines={1}.

Steps to reproduce

  1. With new architecture enabled on Android
  2. Type text into a non-multiline TextInput
  3. Observe the height keep increasing as you type longer and longer without text breaking lines

React Native Version

0.75.3

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 15.0
  CPU: (10) arm64 Apple M1 Pro
  Memory: 91.72 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.0
    path: ~/.asdf/installs/nodejs/20.11.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.asdf/installs/nodejs/20.11.0/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2023.03.27.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/joel/.asdf/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK:
    API Levels:
      - "28"
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
    Build Tools:
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 32.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-32 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12071903
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/javac
  Ruby:
    version: 3.0.3
    path: /Users/joel/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.3
    wanted: 0.75.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

See screenshots.

Reproducer

https://github.com/oblador/react-native-textinput-height-issue

Screenshots and Videos

Fabric Paper
Screenshot_1726823427 Screenshot_1726823447
@oblador oblador added Needs: Triage 🔍 Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Sep 20, 2024
@react-native-bot react-native-bot added the Component: TextInput Related to the TextInput component. label Sep 20, 2024
@migueldaipre migueldaipre added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Resolution: PR Submitted A pull request with a fix has been provided. and removed Needs: Triage 🔍 labels Nov 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Resolution: PR Submitted A pull request with a fix has been provided. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)
Projects
None yet
4 participants
@oblador @migueldaipre @react-native-bot and others