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

Time:06-14

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:

  • autoCorrect={false}
  • spellCheck={false}
  • underlineColorAndroid="transparent"
  • underlineColorAndroid="rgba(0,0,0,0)"
<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

CodePudding user response:

Just simply use:

underlineColorAndroid="transparent"

CodePudding user response:

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

keyboardType="visible-password"

Only caveat is that this disables multiline.

  • Related