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...

Answer 1

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
}