How to change navigation header color in react native?

Abhishek D picture Abhishek D · May 4, 2018 · Viewed 13.7k times · Source

How do I change the color of the navigation header in a React Native app?

I tried initialising background color but it didn't work.

Below is my code snippet for navigationOptions:

static navigationOptions = ({ navigation }) => ({
    header: props => <Header 
        navigation={navigation}
        title={'Dashboard'}
        toggleDrawer
    />
})

Also, is it possible to set status bar color?

Answer

Roy Wang picture Roy Wang · May 4, 2018

You can change it with headerStyle:

navigationOptions = {
  headerStyle: {
    backgroundColor: 'red',
  },
);

For status bar, see https://facebook.github.io/react-native/docs/statusbar.html