Abhishek
Abhishek

Reputation: 806

react-native: How to remove underline while typing text in TextInput Component on android device?

I want to remove underline while typing text inside the react native TextInput component on android device. Text underline removes as soon as press enter or spacebar. It's just showing until we type that word.

I have tried these options below:

<TextInput
  autoCorrect={false}
  spellCheck={false}
  underlineColorAndroid="transparent"
  placeholder="Username"
  style={styles.textInput}
/>

And my styles

 const styles = StyleSheet.create({
  textInput: {
    fontSize: 18,
    fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
    color: colors.dark,
  }
 })

This is probably not a feature of keyboard app because in other app it is not showing the underline.

image showing text input with underline text

Upvotes: 3

Views: 1737

Answers (1)

Olaf K
Olaf K

Reputation: 187

It's normal react-native behavior, but you can bypass it with:

keyboardType="visible-password"

Only caveat is that this disables multiline.

Upvotes: 6

Related Questions