Our NoteScreen
has two TextInputs
without any styles. As of right now, it's difficult to see where each input rests on the screen. It is common on iOS and Android to put an underline under each input. To achieve this, we are going to wrap our TextInput
in View
and apply borderBottom
to it:
var styles = StyleSheet.create({ ... inputContainer: { borderBottomColor: '#9E7CE3', borderBottomWidth: 1, flexDirection: 'row', marginBottom: 10 } }); Apply the inputContainer style to Views: export default class NoteScreen extends React.Component { render () { return ( <View style={styles.container}> <View style={styles.inputContainer}> <TextInput autoFocus={true} autoCapitalize="sentences" placeholder="Untitled" style={styles.title} onEndEditing={(text) => {this.refs.body.focus()}} /> </View> <View style={styles...