Tcomb-form-native: Underline on android

Created on 5 Sep 2018  路  13Comments  路  Source: gcanti/tcomb-form-native

I am Using

  • tcomb-form-native v0.6.16
  • react-native v0.55.4

There is underline on the field on android
image

Since underlineColorAndroid isnt supported on this version.
How to remove The underline? Any idea?

Most helpful comment

I was able to get @Moreno97 fix to work, specifically his recommendation to update styles.xml:

_Fortunately, there is another way to remove underlines from TextInput components on Android. You can add a line to the android/app/src/main/res/values/styles.xml file:_

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground">@android:color/transparent</item>
    </style>
</resources>

All 13 comments

Hi, I just had the same problem. I've solved it by using auto placeholders as described in https://github.com/gcanti/tcomb-form-native/tree/v0.6.15#labels-and-placeholders

Hmm, I was not able to solve this with auto: 'placeholders' on my forms. Also interested in solutions.

From the README.md...

underlineColorAndroid is not supported now on tcomb-form-native due to random crashes on Android, especially on ScrollView. See more on: https://github.com/facebook/react-native/issues/17530#issuecomment-416367184

Commits are in PR #520

Hi, I've got the same problem and I can't figure out to find a workaround.
The auto: 'placeholders' trick don't work on 0.6.20
@fermuch can you provide a sample of your <Form /> options and stylesheet props ?

Hi guys, if you need to remove the underline or change the color, you have to change native code, on styles.xml file. See more:

https://developer.android.com/guide/topics/ui/look-and-feel/themes
https://github.com/facebook/react-native/issues/17530#issuecomment-416367184

Thanks for the links, I tried do solve this by different way in the style.xml but I didn't manage to modify the text edit field underline.
Also I'm on a project ejected to ExpoKit maybe it's related.

Thanks for the links, I tried do solve this by different way in the style.xml but I didn't manage to modify the text edit field underline.
Also I'm on a project ejected to ExpoKit maybe it's related.

Maybe ExpoKit is the problem. Here is working with react-native init project.

hi, same problem here..im not using Expo either. so anyone have solution?

Same issue here...I could not get @hodgef solution to work on 0.6.20.

I am not using expo. RN 46.4

It seems that with the method above the underline comes and goes between builds. I've deleted the post. It would be great if this could be fixed without modifying native code, as it seems overkill to eject Expo because of an underline issue..

I was able to get @Moreno97 fix to work, specifically his recommendation to update styles.xml:

_Fortunately, there is another way to remove underlines from TextInput components on Android. You can add a line to the android/app/src/main/res/values/styles.xml file:_

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
+       <item name="android:editTextBackground">@android:color/transparent</item>
    </style>
</resources>

@jamesholcomb been searching for hours, and it did the trick ! thanks a lot !

i am using expo on a project built with crna i ama facing the same issue mentioned above putting auto: 'none' is not removing the underline from the inputs. has there been any updates or any help will be appreciated.

this.state = {
      options: {
        auto: 'none'
      }
}

<Form
     ref="form"
      type={Person}
      value={this.state.form}
      options={this.state.options}
      onChange={this.onChange}
 />
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sibelius picture sibelius  路  4Comments

pocesar picture pocesar  路  4Comments

flyingace picture flyingace  路  5Comments

timdoes picture timdoes  路  4Comments

semirturgay picture semirturgay  路  4Comments