How to change navigation header color in react native?

Issue

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?

Solution

You can change it with headerStyle:

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

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

Answered By - Roy Wang