Tcomb-form-native: Remove unnecessary bottom border Android from default style

[sibelius]

Version

Tell us which versions you are using:

• tcomb-form-native v0.6.1
• react-native v0.34.0

Every TextInput has unnecessary bottom border after RN34

https://github.com/facebook/react-native/issues/10108

we should set underlineColorAndroid='transparent' as the default

[alvaromb]

Hi @sibelius!

Thanks for reporting this. Can you send a PR? 😄

Many thanks!

[sibelius]

should I change just this style: https://github.com/gcanti/tcomb-form-native/blob/master/lib/stylesheets/bootstrap.js#L62?

[sibelius]

I've added there, but I'm receiving an error

invalid props.style key underlineColorAndroid supplied to TextInput

[compojoom]

I'm working on the same thing.
underlineColorAndroid is not a style property, but a property of TextInput. You'll have to pass it in your options for the field...

@alvaromb - maybe we should make a global property for the options underlineColorAndroid that would be automatically applied to all fields?

[alvaromb]

I'm in for maintaining the actual behaviour, add it to the options of the text field.

[sibelius]

how can I solve this problem right now?

I've tried this

const options = {
      auto: 'placeholders',
      fields: {
        email: {
          maxLength: 250,
          autoCorrect: false,
          keyboardType: 'email-address',
          autoCapitalize: 'none',
         underlineColorAndroid: 'transparent',
          onSubmitEditing: () => this.refs.form.getComponent('password').refs.input.focus()
        },
        password: {
          maxLength: 70,
          secureTextEntry: true,
         underlineColorAndroid: 'transparent',
          error: 'Must have 6-12 characters with at least 1 number and 1 special character'
        }
      }
    };

but it did not worked

[compojoom]

But it should. This is what I have in my options as well:

{
        stylesheet: stylesheet,
        auto: 'none',
        fields: {
            name: {
                placeholder: 'Name',
                underlineColorAndroid: 'transparent',
            },

and it works...

[sibelius]

I did a clean install, and worked well, tks

@alvaromb I just feel that underlineColorAndroid: 'transparent', should be the default, but style is just a matter of taste

feel free to close this issue if u wanna keep the current defaults

[compojoom]

The problem with this not being the default is that the style on android looks bad.

But it's hard to make it default as it is not a style property. So maybe updating the docs would solve the issue. I'm sure that there a lot of users out there, that have no clue why the form looks bad on android out of the box :(

[gcanti]

You are talking about adding a default, so is not a breaking change, right?
What are the possibile issues of adding a default to underlineColorAndroid?

[sibelius]

it is not a breaking change

the only issue is that it will not show the underlineColor on android as it was the behavior before RN34

[gcanti]

Let me understand, if we add underlineColorAndroid = 'transparent' as a default, will users of < RN34 be affected in some way? If the answer is yes, it _is_ a breaking change and we should stick with the current behaviour

[sibelius]

the answer is no

check this out - https://github.com/facebook/react-native/issues/10108

[cmrichards]

:+1: for being a default

[cmrichards]

Is there a way to set it as a global default without needing to add "underlineColorAndroid: 'transparent'' to the config for every field I create with tbomb-form-native? That would be really useful.

Great library btw!

[adamrainsby]

I agree it shouldn't show the line by default.

[adamrainsby]

Pull request here: https://github.com/gcanti/tcomb-form-native/pull/254

[adamrainsby]

I don't think this is a breaking change because it was transparent by default before 0.34.

[javiercr]

👍 for setting underlineColorAndroid=' transparent as default, i.e. merging #254 . Also I agree with @cmrichards it would be nice to be able to change this prop globally.

[gcanti]

https://github.com/gcanti/tcomb-form-native/releases/tag/v0.6.2

[Bmkaradia]

[guillaume250]

you can set the underlineColorAndroid property to RGBA(0,0,0,0) as shown bellow

<TextInput underlineColorAndroid="rgba(0,0,0,0)"

[Darkiring]

Prop of the component TextInput
underlineColorAndroid="transparent"

This work for me!

[ghost]

In dark mode underlineColorAndroid="transparent" not working .