React-native: [Android][TextInput] TextInput seems to have a default paddingBottom on Android

[mpretty-cyro]

When using a TextInput on both iOS and Android, Android seems to have a default paddingBottom set whereas iOS doesn't. It looks like this may be done to line up the text above the 'underline' to make the TextInput look more like the standard Android one but it means the implementation between platforms is inconsistent (this is probably only noticeable because we are using a fairly small height for the TextInput - 19px).

iOS (no paddingBottom set):

Android (no paddingBottom set):

Android (no paddingBottom set and no backgroundColor, which seems to hide the underline when set):

Android (paddingBottom explicitly set to 0):

I guess the question becomes - should UI be built to render as natively as possible or so writing the code once looks the same on both platforms?

cc @brentvatne, @nicklockwood, @mkonicek any thoughts?

[mangogogos]

This is something that tripped me up pretty early on when trying to make row based components look the same regardless of the type of content inside of them (usually text and text input). I've since explicitly set the padding to be 0 and for the underline color to be transparent on text inputs. I don't know that I have a definite opinion on which way the RN team should take this but I will say that it made designing some components take longer than I might have liked

[marcshilling]

Just ran into this - good catch. Setting paddingBottom: 0 fixed.

[mkonicek]

Thanks for reporting this! What does it look like when typing (by default and with paddingBottom = 0)?

The cursor seems cut off in your screenshot but I haven't seen that before - do you have any idea why it's cut off?

[mpretty-cyro]

@mkonicek Sorry don't have access to a computer this week, the bottom of the text lines up with the bottom of the cursor in both cases (it's difficult to see some characters when the cursor is cut off).

It looks like the TextInput expects a certain height, in the above case I had locked it to 19px but the internals didn't seem to adapt (so the 'underline' gets positioned a certain amount from the bottom of the component; then the actual text is positioned a certain amount above that). Didn't actually have time to look in to this programmatically.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/androidtextinput-textinput-seems-to-have-a-default-paddingbottom-on-android

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[Gentlee]

@mkonicek issue is still not fixed, there should not be different default paddings for each platform.

And it is not only paddingBottom, other paddings are also not zero. For me setting padding: 0 worked.

[leandrodavimg]

Thanks @marcshilling

[LeviDeng]

I had the same issue, and I found a solution below, this works for me, put it in textinput style:

padding: 0,
margin: 0,
borderWidth: 0, // important, don't know why

[vardan1992]

padding: 0,
margin: 0,

Worked for me.