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 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={ ...

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