Change navigation header background color

Question

Struggling to understand how to change the navigation header bar background color. I'm Using react navigation and Expo to build my app.

backgroundColor does not seem to do anything. Any idea how to do this?

My code is below:

static navigationOptions = () => ({
    title: 'My App',
    headerTintColor: Colors.DarkBlue,
    backgroundColor: 'red',
    headerLeft:
      <HeaderBarItem to='InfoScreen' title='App info' />,
    headerRight:
      <HeaderBarItem to='FeedbackScreen' title='Feedback' />
  });

score 57 · Accepted Answer · answered Jul 26 '17 at 15:50

57

This should work:

static navigationOptions = () => ({
    title: 'My App',
    headerTintColor: Colors.DarkBlue,
    headerStyle: {
      backgroundColor: 'red'
    },
    headerLeft:
      <HeaderBarItem to='InfoScreen' title='App info' />,
    headerRight:
      <HeaderBarItem to='FeedbackScreen' title='Feedback' />
  });

answered Jul 26 '17 at 15:50

Aakash Sigdel

9,060
5
33
38

@Aakash where does this Colors.DarkBlue and – JP. Nov 06 '17 at 19:32
1

Those are just component and variable from the question @JP – Aakash Sigdel Nov 07 '17 at 04:13

score 12 · Answer 2 · answered Jun 09 '18 at 01:54

12

Paste this in your targeted screen

static navigationOptions = ({ navigation }) => {
   return {
      title: 'Screen Title',
      headerTintColor: 'royalblue',
      headerStyle: {
         backgroundColor: '#fff'
      }
   }
}

answered Jun 09 '18 at 01:54

Pheng Sengvuthy

260
2
9

score 12 · Answer 3 · answered Jul 06 '20 at 12:04

I tried many answers throughout the forums but couldn't find the working solution. Finally below worked for me and will for you if you are using latest RN:

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={Main}
            options={{ title: 'Welcome', headerStyle: {
              backgroundColor: '#e7305b'
           } }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

quite explanatory compared to other solutions – Chukwuemeka Maduekwe Aug 25 '20 at 23:34 — Chukwuemeka Maduekwe, Aug 25 '20 at 23:34

score 0 · Answer 4 · answered Jun 08 '18 at 21:56

0

You can just use inside your view component

<StatusBar backgroundColor = '#fff' />

This worked for me on android

Don't forget to import StatusBar from 'react-native' of course

answered Jun 08 '18 at 21:56

AlwaysConfused

729
2
12
37

Change navigation header background color

4 Answers4