Default underline not visible in TextInput in React native

Question

I am new to React native development. In my application I have login page, in this login page two textinput. In this textinput not getting underline. I have tried many ways but not getting underline. Here my requirement is need underline of inputtext. So how to get this underline?

This is the my login form code.

import React, {Component} from 'react';
import {StyleSheet, Text, View,TextInput,TouchableOpacity} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>SEDC</Text>
      <TextInput placeholder="Acct No/User Id" style={styles.textInput} multiline={true}></TextInput>
      <TextInput placeholder="Password" style={styles.textInput}></TextInput>
      <TouchableOpacity style={styles.btn} onPress={this.login}><Text>Log In</Text></TouchableOpacity>
      </View>
    );
  }

  login=()=>{
    alert("testing......");
    // this.props.navigation.navigate('Second');
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

  textInput: {
    alignSelf: 'stretch',
    padding: 10,
    marginLeft: 50,
    borderBottomColor:'#000',
    margin:5,
    marginRight:50,
    // backgroundColor: '#000',
},
  btn:{
    alignSelf: 'stretch',
    backgroundColor: '#01c853',
    padding: 10,
    margin:10,
    marginLeft: 100,
    marginRight:100,
    alignItems: 'center',
}
});

This is the output of my code.

I have tried with borderBottomColor:'#000', but not working..So please guide me how to do this

Thanks In Advance...

have you tried with the prop **underlineColorAndroid** ex. – Dheeraj Chaudhary Sep 27 '18 at 07:14 — Dheeraj Chaudhary, Sep 27 '18 at 07:14
Thanks @DheerajChaudhary It is working perfect – rams Sep 27 '18 at 08:13 — rams, Sep 27 '18 at 08:13

Dacre Denny · Answer 1 · 2018-09-27T08:02:07.177

14

In addition to setting the bottom border color, you'll also need to set the bottom border "width".

The borderBottomWidth property defines the thickness in pixels for the border, along the bottom edge of the textInput component. So for instance, you can apply a black border along the bottom of your textInput, with thickness of 2 pixels by making the following adjustment to your styles:

textInput: {
    alignSelf: 'stretch',
    padding: 10,
    marginLeft: 50,
    borderBottomColor:'#000',
    margin:5,
    marginRight:50,

    borderBottomColor: '#000', // Add this to specify bottom border color
    borderBottomWidth: 2     // Add this to specify bottom border thickness
}

edited Sep 27 '18 at 08:02

answered Sep 27 '18 at 07:09

Dacre Denny

29,664
5
45
65

Thank you, It is working with.. borderBottomWidth: 1. but no need of backgroundColor – rams Sep 27 '18 at 07:56
@rams ah, sorry about that - minor mistype there, I meant to also include in the answer that the `borderBottomColor` can be specified if needed as well. I've just updated - hope that helps! – Dacre Denny Sep 27 '18 at 08:02
@Denny yes, But when giving borderBottomWidth: 1, getting first textinput line is thick color compared to second textinput. Do you know the reason – rams Sep 27 '18 at 08:09
have you set `underlineColorAndroid={'transparent'}` on both TextInput components? – Dacre Denny Sep 27 '18 at 08:11

score 5 · Answer 2 · answered Jan 27 '19 at 04:18

5

just set

underlineColorAndroid={'black'}

answered Jan 27 '19 at 04:18

Jpabs

61
1
4

score 1 · Answer 3 · answered Mar 31 '21 at 12:42

Its quite simple easy : we need to pass our custom style inside the TextInput layout and works done for showing under line By this custom style we can perform 2 operation a.we can put underline b.we can also use boxes for our textinput field

   bottomBorder: {
marginLeft: 20,
marginRight: 20,
borderBottomColor: 'skyblue',//if we want only bottom line
borderBottomWidth: 2, // Add this to specify bottom border thickness &
//textDecorationLine: 'underline',
//borderColor:"skyblue",//if we want to show our TextInput field inside the box
//borderWidth:2 //use this to show width of border boxes
}

Now it time to put this custom Style into our TextInput layout

<TextInput placeholder="Enter your Name "
      style={ styles.bottomBorder}
      onChangeText={(text) => {
        console.warn(text)
      }}
    />

Default underline not visible in TextInput in React native

3 Answers3