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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.