Make the default for underlineColorAndroid transparent

[janicduplessis]

https://twitter.com/notbrent/status/986843528004292608

This will help reduce differences between iOS and Android, the default style is actually kind of broken right now because we no longer add extra padding on Android.

Before:

After:

The easiest implement this might be just to add underlineColorAndroid: 'transparent' to TextInput default props.

[joefazz]

How about just making it underlineColor (with transparent default) and make it so it just adds a border bottom on iOS? I tend to underline most of my textinputs but always just make the android underline transparent so I can share the style for both platforms. I realise this does increase complexity of the issue but it feels like if you set this to transparent then it's very rarely going to be used and people are only ever going to set a borderBottom.

[janicduplessis]

@joefazz I think the underline is more of a material design thing, and poly-filling it on iOS is out of this scope. It's actually a bit different than border, both in the way it is positioned and is affected by focus. Also it could lead to some weird things if someone uses both border and underlineColor.

[AndrewIngram]

It’s worth pointing out this that API doesn’t produce an underline compatible with the Material design spec for form inputs. So right now, any dev who is trying to implement material is also setting this prop to transparent and doing all the work on top of a blank slate.

[mikaoelitiana]

I am willing to work on this one as a first issue.

[janicduplessis]

@mikaoelitiana Cool! You can mention me in the PR and I'll have a look.

[shubhnik]

@janicduplessis @mikaoelitiana with this commit, the underline color doesn't change to colorAccent defined in the theme in styles.xml. Is there anything else I need to do to get the desired behavior which was possible before this commit. This change and how to get the desired effect also isn't mentioned in the docs.

My RN version is 0.58.3.

[martnst]

@shubhnik you can get back the old behaviour by setting.

<TextInput underlineColorAndroid={null} … />

See more this comment for more finding of mine on this.

---

Or in case you want to actually patch this globally:

function patchTextInputUnderlineColorAndroid() {
  const initialDefaultProps = TextInput.defaultProps
  TextInput.defaultProps = {
    ...initialDefaultProps,
    underlineColorAndroid: null // bring back underline color changed to transparent since RN 0.58
  }
}  

I am applying this in my index.js