TextInput border and width within a React-Native view - react-native

Question

I have a react-native view that has this piece:
<View style={styles.section}>
<Text style={styles.h2}>
NAME
</Text>
<TextInput style={styles.input} placeholder="Name" />
<Text style={styles.h2}>
EMAIL
</Text>
<TextInput style={styles.input} placeholder="Password" />
</View>
input: {
height: 30,
flex: 0.7,
fontSize: 13,
padding: 4,
borderBottomColor: '#fff',
borderRightColor: 'transparent',
borderLeftColor: 'transparent',
borderTopColor: 'transparent',
borderTopWidth: 0,
borderBottomWidth: 0.5,
},
Unfortunately, this shows no border (instead of the desired underline border), and both input boxes take up the full screen (instead of the 0.7 flex I want). How do I fix this?

Answer 1

You cannot declare a specific border directly on the TextInput unless multiline is enabled you can checkout this link.
I wrap my TextInput in a view and then add a border to the view and in your case you don't want your text input to be full width I just add a margin on the left and right.
Wrapping the TextInput inside views:
<View style={styles.section}>
<Text style={styles.h2}>
NAME
</Text>
<View style={styles.inputView}>
<TextInput style={styles.input} placeholder="Name" />
</View>
<Text style={styles.h2}>
EMAIL
</Text>
<View style={styles.inputView}>
<TextInput style={styles.input} placeholder="Password" />
</View>
</View>
The styles for those views:
input: {
height: 40,
fontSize: 13,
padding: 4,
},
section:{
marginLeft:10,
marginRight:10,
},
inputView:{
borderBottomColor: '#fff',
borderBottomWidth: 0.5,
}