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' />
  });

Answer 1

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' />
  });

Answer 2

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>
  );
}

Answer 3

Paste this in your targeted screen

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

Answer 4

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