CODEWITHSUNDEEP
androidreactjsreact-native
James
James

Reputation: 157

Remove TextInput underline React-Native

enter image description here

I want to remove the underline directly under the text in the above screenshot (the second/lower underline is my own borderBottom on the TextInput).

There is a prop underlineColorAndroid for RN TextInput component that I believe is supposed to control this, and I even upgraded to react-native v0.56.0 as the default value of this prop was changed to 'transparent', which is what I want.

e.g.

<TextInput
  onChange={this.onChange}
  value={tag}
  underlineColorAndroid="transparent"
/>

I have even tried changing many style attributes in /android/app/src/main/res/values, but nothing has worked.

How can I remove, or change the color of, the underline on Android for React-Native's TextInput (which I believe maps to Android's EditText)?

EDIT: Without the upgrade to react-native 0.56.0, it looks like the below screenshot. So perhaps underlineColorAndroid="transparent" does work in v0.56.0? But then what is the remaining underline?

enter image description here

Upvotes: 1

Views: 1842

Answers (2)

Shan
Shan

Reputation: 604

The underline right beneath the text is an Android OS keyboard feature thing, it just indicates the current word you are on, it provides a smart context prompt and if you hit delete, it'll just delete the whole word.

TL;DR: built-in Android feature, you can't really do anything there.

Upvotes: 4

chandlervdw
chandlervdw

Reputation: 3226

<TextInput underlineColorAndroid='transparent'>

Upvotes: 0

Related Questions