How to change navigation header color in react native?

Question

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?

Since you're providing a `custom header`, you need to change the styles there. — Pritish Vaidya, May 04 '18 at 06:38

score 10 · Accepted Answer · answered May 04 '18 at 06:33

10

You can change it with headerStyle:

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

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

answered May 04 '18 at 06:33

Roy Wang

11,112
2
21
42

The `navigationOptions`? Just replace your current one with this (add in the `static` keyword). Do you need a custom `header` component? What changes are you making to it? – Roy Wang May 04 '18 at 07:26
I just want to add a color to the bar along with the current attributes. – Abhishek D May 04 '18 at 08:18
No it doesn't give any color at all. It changes to white and all the other attributes will go. – Abhishek D May 04 '18 at 09:24
Changed it using custom header. Thanks! – Abhishek D May 04 '18 at 09:34
The link is dead, should be: https://reactnative.dev/docs/statusbar – Ricoter Dec 09 '21 at 19:32

score 0 · Answer 2 · answered Feb 22 '21 at 09:36

0

Use it like this:

static navigationOptions = () => ({
    title: 'Home',
    headerTintColor: '#cccccc',
    headerStyle: {
      backgroundColor: '#000',
    },      
  });

answered Feb 22 '21 at 09:36

Vazhumuni M

1

score -2 · Answer 3 · edited May 04 '18 at 07:57

-2

You can use the below parameter to set the status bar color:

<StatusBar backgroundColor='blue' barStyle='light-content' />

edited May 04 '18 at 07:57

Saravanan Sachi

2,572
5
33
42

answered May 04 '18 at 06:33

Sandeep Singh

1,013
1
11
25

I need to know about Action bar also along with status bar. – Abhishek D May 04 '18 at 07:24

How to change navigation header color in react native?

3 Answers3