Styling the NavigationBar component

It's time to give our NavigationBar the iOS and Android style treatment. There is a small difference between the two, except for how the font size and padding are rendered. We will start by giving our NavigationBar a background color and a bottom border. Add this to the StyleSheet in index.ios.js and and define the navbar style:

var styles = StyleSheet.create({
    navContainer: {
      flex: 1
    navBar: {
      backgroundColor: '#5B29C1',
      borderBottomColor: '#48209A',
      borderBottomWidth: 1

Next, update the Navigator.NavigatorBar with the style prop:

class ReactNotes extends React.Component { ... render () { return ( <Navigator initialRoute={{name: 'home'}} renderScene={this.renderScene} navigationBar={ ...

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

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