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

Get Getting Started with React Native now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.