unable to add border bottom in react native

Question

I am trying to make a registration form.

I created a file named Regform.js under the component directory.

I am unable to get border-bottom for the text Registration

Here is the demo link demo working link

please let me know, where I am doing wrong

Component/Regform.js

import * as React from 'react';    import {     Text,     View,     StyleSheet,      TextInput,    TouchableOpacity     } from 'react-native';     export default class Regform extends React.Component {     render() {      return (       <View>        <Text style={styles.header}> Registration </Text>         <TextInput style = {styles.textinput}       underlineColorAndroid = "transparent"       placeholder = "Enter Your Name"       placeholderTextColor = "#9a73ef"       onChangeText = {this.handleName}/>        <TextInput style = {styles.textinput}       underlineColorAndroid = "transparent"       placeholder = "Enter Your Email"       placeholderTextColor = "#9a73ef"       autoCapitalize = "none"       onChangeText = {this.handleEmail}/>      </View>      );     }    }     const styles = StyleSheet.create({          header: {           fontSize: 36,         alignself: 'self',         color: 'red',         marginBottom: 30,         borderBottomColor: 'red',         borderBottomWidth: 2       },       textinput: {         fontSize: 18,         alignself: 'self',         color: 'black',         marginBottom: 30,         borderBottomColor: 'grey',         borderBottomWidth: 2       }   });  

Answer 1

It seems borderBottom doesn't work for the Text component. You can either add a View wrapper and supply borderBottom to it or add a TextInput and make editable={false}

<View style={styles.headerWrapper}>     <Text style={styles.header}> Registration </Text>  </View> ...  headerWrapper: {     borderBottomColor: 'red',     borderBottomWidth: 2,     marginBottom: 30, }, header: {     fontSize: 36,     alignSelf: 'auto',     color: 'red',  },