Text input padding

[mzaien]

Description

With expo 53 and react native 0.79 I noticed our input has weird padding my solution was to give it padding:0

I tried it with new and old arch it is the same

Steps to reproduce

1. clone repo
2. install deps && do a prebuild yarn prebuild
3. run android yarn andriod

React Native Version

0.79.0

Affected Platforms

Runtime - Android

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

System:
  OS: macOS 15.4
  CPU: (12) arm64 Apple M2 Pro
  Memory: 259.66 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.3.0
    path: ~/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.config/yarn/global/node_modules/.bin/yarn
  npm:
    version: 10.9.2
    path: ~/homebrew/bin/npm
  Watchman:
    version: 2025.04.07.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.4
      - iOS 18.4
      - macOS 15.4
      - tvOS 18.4
      - visionOS 2.4
      - watchOS 11.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13208083
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.4.2
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.0
    wanted: 0.79.0
  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

there is no logs here

Reproducer

https://github.com/mzaien/react-native-0.79-textinput-repro

Screenshots and Videos

https://github.com/user-attachments/assets/8d166d30-384e-4be0-b45c-eda8fed4a7e0

[cortinico]

With expo 53 and react native 0.79 I noticed our input has weird padding my solution was to give it padding:0

Do you have a video with React Native 0.78 and/or with Expo SDK 52?

[mzaien]

With expo 53 and react native 0.79 I noticed our input has weird padding my solution was to give it padding:0

Do you have a video with React Native 0.78 and/or with Expo SDK 52?

Hi @cortinico I tired to run React native 0.78 with expo 52 and had this error

e: file:///Users/abdullah/Documents/Github/react-native-0.79-textinput-repro/node_modules/expo/android/src/main/java/expo/modules/ExpoReactHostFactory.kt:72:42 Unresolved reference 'ReactNativeConfig'.

FAILURE: Build failed with an exception.

btw I tried it with expo 52 with React Native 0.77 and the issue does not exist text input does not have default padding

[vonkanehoffen]

Seeing this too. Appears to be an Android only issue for me. For now I'm getting round it with

padding: 0 

[eetzuh]

I have the same issue on Android, and setting the padding to 0 doesn't help. The TextInput component completely ignores paddingVertical. I tried setting it to -20 just to see if it moves and it still has the same extra padding. Using react-native 79.4.0 and Expo 53.0.12

Never had this problem in older react-native versions.

[thomasrebam]

Hey, I also tried to reproduce the issue with 0.76 / 0.77 / 0.78 react native versions. With 0.76 and 0.77 versions I saw no default value for padding. Starting from 0.78 there seem to be default padding values that can be overridden using paddingTop and paddingBottom (though weirdly paddingVertical and padding have no impact).

I do not have a repro for 0.79, but I observe the same behavior as @mzaien, which is that there is a default padding, but which can be overridden by all the padding-like styles.

0.76

https://github.com/user-attachments/assets/4e091c62-1f5a-436d-b0df-14c098a2c4a5

0.77

https://github.com/user-attachments/assets/56d492c1-5d6c-477d-bd90-2c67957a61ba

0.78

https://github.com/user-attachments/assets/bc6b0167-907c-4a46-b8ff-6a203bc9d0ab

[howieweiner]

We have the same issue as @thomasrebam. With no explicit padding, on Android, a default is applied. paddingVertical has no affect, but Top/Bottom do

[thomasrebam]

Hey! I'm still facing the issue with react-native 0.81. I'll try to record reproducers for the last versions

[Bialson]

To use custom padding and disable this strange behavior use this combination of paddings:

padding: 0,
paddingBlock: 0, // Equivalent to paddingVertical
paddingInline: 0, // Equivalent to paddingHorizontal

This will allow to handle paddingHorizontal and paddingVertical correctly and apply padding