how to disable the line under text in text input android react native

Question

I am trying to render a text input in react-native(android) with and a line below it which am getting from borderBottomWidth property put when am typing there are two lines appearing which is not looking good and couldn't remove it i tried giving underlineColorAndroid='transparent' but didn't work

import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          autoCapitalize='none'
          autoCorrect={false}
          underlineColorAndroid='rgba(0,0,0,0)'
          style={styles.textInput}
         />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#000',
    padding: 8,
  },
  textInput: {
    paddingVertical: 0,
    marginHorizontal: 10,
    textAlign: 'center',
    height: 18,
    fontSize: 14,
    alignSelf: 'flex-start',
    borderStyle: 'solid',
    borderWidth:0,
    borderBottomWidth: 1,
    color: '#1ac9e8',
    minWidth: 48,
    borderColor: '#1ac9e8',
    fontFamily: 'Monaco'
  }
});

https://snack.expo.io/rylmazFSH

any workarounds ?

Mehran Khan · Accepted Answer · 2019-09-01 15:06:34Z

10

Add autoCorrect={false} should remove underline but in some android devices it will not work as described in this link

Try this it is working

autoCorrect={false}
keyboardType="visible-password"

Snack link : https://snack.expo.io/@mehran.khan/underline-android

answered Sep 1, 2019 at 15:06

Mehran Khan

3,6561 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aravind_reddy Over a year ago

in the link you gave also when am commenting the keyboardtype it is still the same but with the keyboardType="visible-password" it is seems to be working strange!!

Nooruddin Lakhani · Accepted Answer · 2019-09-01 10:32:53Z

0

underlineColorAndroid="transparent"

answered Sep 1, 2019 at 10:32

Nooruddin Lakhani

6,8513 gold badges22 silver badges43 bronze badges

1 Comment

user13101751 Over a year ago

It works for me when I add it but when I go to another screen and come back, I start seeing the underline again

Rishav Kumar · Accepted Answer · 2019-09-02 06:00:53Z

0

Update the style of your textInput. I found the style from snack

  textInput: {
    paddingVertical: 0,
    marginHorizontal: 10,
    textAlign: 'center',
    height: 18,
    fontSize: 14,
    alignSelf: 'flex-start',
    borderStyle: 'solid',
    borderWidth:0,
    color: '#1ac9e8',
    minWidth: 48,
    fontFamily: 'Monaco'
  }



  <TextInput
    underlineColorAndroid="transparent"
        autoCorrect={false}
        keyboardType="visible-password"
style = {styles.textInput}
    />

edited Sep 2, 2019 at 6:00

answered Sep 2, 2019 at 5:48

Rishav Kumar

5,5302 gold badges19 silver badges34 bronze badges

2 Comments

aravind_reddy Over a year ago

Actually I need that bottom border line but if see there are 2 lines coming that second line while typing i need to remove

aravind_reddy Over a year ago

hey it doesn't seem to work can you add a working link ?

Collectives™ on Stack Overflow

how to disable the line under text in text input android react native

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related