React: Building Modern Web Applications

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 index.android.js 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={ ...