react-native icon indicating copy to clipboard operation
react-native copied to clipboard

[Outline, Android] - editing TextInput styles with Outline destroys previously set paddings

Open Titozzz opened this issue 8 months ago • 2 comments

Description

Whenever a TextInput component style props are updated to include outline props (such as outlineWidth), it will erase previously setPadding, and set it to 3dp (checked in android studio layout inspector).

Steps to reproduce

This bug appears when you add styles after the first renders that contains outlineStyles.

Using the reproducer you can toggle the outline styleand see the bug appear

React Native Version

0.79.2

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

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

System:
  OS: macOS 15.5
  CPU: (10) arm64 Apple M2 Pro
  Memory: 143.06 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.9.0
    path: ~/.proto/shims/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.5.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2025.04.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/thibault/.rbenv/shims/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: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.25659.59.2432.13423653
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 3.1.2
    path: /Users/thibault/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2
  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

N/A

MANDATORY Reproducer

https://snack.expo.dev/@titozzz/textinput-and-overline-issue

Screenshots and Videos

N/A

Titozzz avatar May 21 '25 10:05 Titozzz

@jorge-cab @joevilches Can you have a look at this?

cipolleschi avatar May 21 '25 10:05 cipolleschi

@Titozzz The cause of this is because the default padding for Android is 3dp, so the padding is being overridden to the default once the outline is applied. This is why you have the padding initially but then when you remove focus (removing the outline) then re-focus (applying the outline), the padding is defaulted back to 3dp.

I can work to resolve this. @Titozzz or @cipolleschi, can I be assigned to this issue?

nohabean avatar May 24 '25 01:05 nohabean

@nohabean sorry for the late reply, we have been quite busy preparing AppJS when you posted. 😅

I assigned you to the issue. Feel free to open a PR and tag me when it is ready!

cipolleschi avatar Jun 09 '25 09:06 cipolleschi