O'Reilly logo

Getting Started with React Native by Tom Bray, Ethan Holmes

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required