React: Building Modern Web Applications

Styling the NoteScreen

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