React-native: [Android][TextInput] Remove underline option?

[rclai]

I was working around it by setting the underlineColorAndroid to the same color as the background, but when you focus, the underline color changes to a teal color no matter what.

[facebook-github-bot]

Hey rclai, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[Ehesp]

Have you tried underlineColorAndroid='rgba(0,0,0,0)'?

[rclai]

I'll give that a try when I get a chance.

[madwed]

Setting rgba(0,0,0,0) works for me. I was using #fff before with the same problem as @rclai

[rclai]

Cool, thanks guys.

[varungupta85]

I am also observing a similar problem and setting the underlineColorAndroid to rgba(0, 0, 0, 0) doesn't seem to help me. This is what I am observing.

This is how it appears to begin with which is good. Before I added underlineColorAndroid, there was an underline in the complete width of the text box which was gone once I added the underlineColorAndroid which is good.

This is how it appears after adding some text. Notice an underline below the typed text. I want to get rid of that underline too. Do I need to set some other prop on the TextInput to get rid of that underline

[Sommerfeld]

@varungupta85 autoCorrect={false} might help here.

[varungupta85]

@Sommerfeld Great, using autoCorrect={false} fixed it. Thanks a lot!

[afilp]

It seems that the autocorrect solution does not work when the TextInput is multiline (I have v0.33).

Are you aware of this? I suppose it is a bug?

[Sommerfeld]

The autocorrect solution does not skip the underlineColorAndroid step. The line seen in the image of @varungupta85 is not from the textInput itself it is from the autocorrect and would not have appear for the first word if he would have started typing a second one. (my guess, not tested, not 100% familiar with Android)

[aprilmintacpineda]

this should do the trick as per react-native TextInput documentation

<TextInput underlineColorAndroid='transparent'>

Before

After

[xuechinahb]

underlineColorAndroid='transparent' works for me. At first, it does not work on android 6.0 emulator. Then run code on android 7.0 emulator, underline is dismiss. So, run on 6.0 again, it works. Maybe autoFocus={true} is setted, press R twice to reload JS failed.

[neilakoh]

underlineColorAndroid='transparent' definitely did the magic for me

[sagarparikh]

underlineColorAndroid='transparent' is definitely the way to go.

[bingle87]

underlineColorAndroid='transparent' worked for me with single line text.

[lavarajallu]

To give in your Text input Use this Property Remove Under Line
<TextInput underlineColorAndroid="transparent" />

[vijayst]

underlineColorAndroid="transparent" seems to disable the underline in all TextInput. How to selectively remove the underline for only a few TextInput?

[lavarajallu]

i din't get u point

On Sat, Jan 28, 2017 at 1:44 PM, Vijay Thirugnanam <[email protected]

wrote:

underlineColorAndroid="transparent" seems to disable the underline in all
TextInput. How to selectively remove the underline for only a few TextInput?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/5424#issuecomment-275834770,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATmTnBGelNZEuYVeiBorH8eVS8iOpaM9ks5rWvj-gaJpZM4HIWcG
.

[vijayst]

@lavarajallu Please ignore the comment, It seems to work now.

[azamkth]

work for me

[razi1122]

Type underlineColorAndroid='transparent' inside textinput its work 100%

[ScreamZ]

Why is this not underlineColorAndroid="transparent" by default, this make sense for easy compatibility with iOS ?

[lavarajallu]

Bcz when you install nodumodules default color in text Input comparing both
Platforms

On Tue, Feb 13, 2018 at 3:44 PM, Andréas Hanss [e-mail]
wrote:

Why is this not underlineColorAndroid="transparent" by default, this make
sense for easy compatibility with iOS ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/5424#issuecomment-365216898,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATmTnDB8Rm-lysejiLABA1yOL_xpoHGYks5tUWCSgaJpZM4HIWcG
.

[hoangvuanhdevelopervn]

underlineColorAndroid='white' It's work for me 👯‍♂️

[yhugow]

Thank you guys <3

Works fine now!

[VanessaI]

<TextInput underlineColorAndroid='transparent'> worked for me!