Intrinsic padding on Android TextInputs is back, makes it hard to align with other text

[keith-kurak]

Summary

There's an Android native styles.xml override in place to remove intrinsic padding on TextInput on Android. Somewhere post-SDK 36, it stopped working because, in React Native core, the TextInput changed from using an EditText to an AppCompatEditText control under the hood.

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

I'm using SDK 38 Bare, but I confirmed this is still an issue in Expo 40 via snack

Environment

Expo CLI 3.25.1 environment info:
System:
OS: macOS 10.15.7
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 12.3/12C33 - /usr/bin/xcodebuild
npmPackages:
expo: ~36.0.0 => 36.0.2
react: ~16.9.0 => 16.9.0
react-dom: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4
react-native-web: ~0.11.7 => 0.11.7
react-navigation: ^4.3.7 => 4.4.3
npmGlobalPackages:
expo-cli: 3.25.1

Reproducible demo or steps to reproduce from a blank project

1. Run this snack on Android: https://snack.expo.io/@llamaluvr/react-native-textinput-android-intrinsic-padding- (see screenshot below)
2. Check out the difference in padding around the TextInput and Text. There's no way to reset the padding on the TextInput to fix this that I know of.
   This padding appears to happen with any sort of value for alignItems set (without that, both components are the same height, but the text isn't at all aligned). On iOS, this extra padding doesn't appear, and it's easy to line up the text on both components.

Extra info

Sometime prior to Expo 36, the following was applied to the Android native project styles, and thus the intrinsic padding doesn't appear there:

<style name="ExponentEditText" parent="@android:style/Widget.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">#000000</item>
    <item name="android:textCursorDrawable">@null</item>
  </style>

In turn, an Expokit/ bare workflow user could apply the same style and TextInputs would look the same everywhere.

It looks like the old style is still in the latest version of Expo (see https://github.com/expo/expo/blob/55092376a4aebb417bf13862cf27a5987e6bdb19/android/expoview/src/main/res/values/styles.xml), but doesn't appear to have an effect any longer. This is likely because React Native core switched to an AppCompatEditText in more recent versions.

Here is what I use in my styles.xml to fix it on my Expo 38 bare workflow project to fix the issue:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">#000000</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="android:editTextStyle">@style/AppEditTextStyle</item>
    <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->
  </style>
  <style name="Theme.App.SplashScreen" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splashscreen</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:editTextStyle">@style/AppEditTextStyle</item>
    <item name="editTextStyle">@style/AppEditTextStyle</item> <!-- For compatibility with the support library -->
    <item name="android:colorControlActivated">#c8c8c8</item>
  </style>
    <style name="AppEditTextStyle" parent="@style/Widget.AppCompat.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">#000000</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:textColorHighlight">#c8c8c8</item>
  </style>
</resources>

(there's also some color stuff in there, and there's possibly some redundancy - on my particular project, it wasn't fixed until I added <item name="android:editTextStyle">@style/AppEditTextStyle</item> toTheme.App.SplashScreen).

One minor issue I noticed with this style was that, if I didn't set a minWidth on a TextInput (that didn't otherwise have a minimum width due to flex, etc.), backspacing until all text was deleted would result in the TextInput losing focus.

---

Ideally, this would be something fixed in React Native core (either baked into the TextInput or as some sort of internal style) so TextInputs on Android size the same as iOS, but since this style was added to Expo, still exists in the project, but no longer appears to be working, it seemed worth noting here.

[keith-kurak]

Also, if anyone's interested, the colorControlActivated attribute in my styles.xml above successfully works around this issue: facebook/react-native#30283, at least on my Pixel devices (I think this issue might not actually be a problem on Galaxy S). Subbing in one of the Android colors in app.json could be a way to fully excise Ugly Android Green from managed apps until there's a permanent fix.

[brentvatne]

thank you for raising this! we likely want to change this as you describe, but ideally this would happen in react-native core as well so that we don't diverge from the defaults - this could possibly lead to unexpected behavior when using ui libraries. i'll leave this open but don't plan on addressing it right away

[github-actions]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.