[Outline, Android] - editing TextInput styles with Outline destroys previously set paddings
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
@jorge-cab @joevilches Can you have a look at this?
@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 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!