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={
          <Navigator.NavigationBar
            routeMapper={NavigationBarRouteMapper}
            style={styles.navBar}
        ...