CODEWITHSUNDEEP
react-native
Sandip Nag
Sandip Nag

Reputation: 998

Unable to remove bottom border of TextInput in react native

I am new to React Native, I am unable to hide the border of TextInput. Version: 0.55 I am giving my screen.

I want this:- enter image description here

And I ended up with this:- enter image description here

The corresponding code for this screen is:-

JSX:-

<View style={styles.emailContainer}>
  <View style={styles.commonInput}>
    <TextInput style={{ paddingLeft: 15, }} placeholder="Email" />
  </View>
  <View style={styles.emailIcon}>
    <Image
      style={{ width: 20, height: 20 }}
      source={require('../../assets/images/envelope.png')}
    />
  </View>
</View>

Styling Code:-

emailContainer: {
  flexDirection: "row",
  backgroundColor: '#ffffff',
  height: 40,
  marginTop: 25,
  marginRight: 10,
  marginLeft: 10,       
  borderRadius: 15,
  backgroundColor: '#ffffff'
},
emailIcon: {
  justifyContent: 'center',
  alignContent: 'center',
  justifyContent:'center'
},
commonInput: {
  width: '90%'
}

How can I remove the bottom border from textInput? Thanks.

Upvotes: 1

Views: 7661

Answers (1)

Suraj Malviya
Suraj Malviya

Reputation: 3773

Just set the underlineColorAndroid prop of TextInput to transparent or the color which is the background color of the input field.

The code should look like: 

<TextInput underlineColorAndroid ='transparent' style={{ paddingLeft: 15, }} placeholder="Email" />

Upvotes: 4

Related Questions