29

I'm implementing React Navigation in my React Native app, and I'm wanting to change the background and foreground colors of the header. I have the following:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class ReactNativePlayground extends Component {

  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

const SimpleApp = StackNavigator({
  Home: { screen: ReactNativePlayground }
});

AppRegistry.registerComponent('ReactNativePlayground', () => SimpleApp);

By default the background color of the heading is white, with a black foreground. I've also looked at the documentation for React Navigation but I'm not able to find where it shows how to set the styling. Any help?

Improve this question

6 Answers 6

Reset to default
44

In newer versions of React Navigation you have a flatter settings object, like below:

static navigationOptions = {
  title: 'Chat',
  headerStyle: { backgroundColor: 'red' },
  headerTitleStyle: { color: 'green' },
}

Deprecated answer:

Per the docs, here, you modify the navigationOptions object. Try something like:

static navigationOptions = {
    title: 'Welcome',
    header: {
        style: {{ backgroundColor: 'red' }},
        titleStyle: {{ color: 'green' }},
    }
}

Please don't actually end up using those colors though!

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

No problem, the fact that I was just doing this yesterday is the only reason I could help out. I had to scour the docs to find it. I'm glad it wasn't all for naught. If you have too many problems with ReactNavigation check out the 4.0 branch of ReactRouter, it's got native bindings.
I believe this "nested" way to do headers was deprecated - see answer from @VishalDhaduk below.
17

According to documentation you can use "navigationOptions" style like this.

static navigationOptions = {
  title: 'Chat',
  headerStyle:{ backgroundColor: '#FFF'},
  headerTitleStyle:{ color: 'green'},
}

For more info about navigationOptions you can also read from docs:-

https://reactnavigation.org/docs/navigators/stack#Screen-Navigation-Options

Improve this answer

Comments

5

Try this working code

static navigationOptions = {
      title: 'Home',
      headerTintColor: '#ffffff',
      headerStyle: {
        backgroundColor: '#2F95D6',
        borderBottomColor: '#ffffff',
        borderBottomWidth: 3,
      },
      headerTitleStyle: {
        fontSize: 18,
      },
  };
Improve this answer

4 Comments

Can we add a subtitle??? if title is "Home" I wanna add "My Home" below it. How can I do that??
yes, you can add the subtitle also. I am adding the sample for it. const CustomHeader = ({ title, subtitle }) => ( <View style={{flex: 1, flexDirection: 'column'}}> <Text>{title}</Text> <Text>{subtitle}</Text> </View> ); static navigationOptions = { title: <CustomHeader title="Title" subtitle="Subtitle"/>, };
Ok this will place title and subtitle in the centre right? Title in the centre is ok 👌🏼 in the bottom I want the subtitle to be on the left. How do I do that? Add a view between the texts?
Yes, you can update the CustomHeader layout as per your final result.
3

Try this code: 

static navigationOptions = {
    headerTitle: 'SignIn',
    headerTintColor: '#F44336'
};

good luck!

Improve this answer

1 Comment

This is not styling the header, this is setting color to Title, downvote
2

Notice! navigationOptions is differences between Stack Navigation and Drawer Navigation
Stack Navigation Solved.
But for Drawer Navigation you Can add Your own Header and Make Your Styles with contentComponent Config:
First import { DrawerItems, DrawerNavigation } from 'react-navigation' Then

Header Before DrawerItems:

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView> .

Header Before DrawerItems

Footer After DrawerItems:

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView> .

Improve this answer

Comments

2

It's 100% working.

   <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerStyle: styles.header,
        headerTintColor: '#fff',
        headerTitleStyle: styles.headerTitle,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>



const styles = StyleSheet.create({
  header: {
    backgroundColor: '#3f51b5',
  },
  headerTitle: {
    fontWeight: 'bold',
    fontSize: 20,
  },
});

headerStyle: This property allows you to customize the style of the header. You can use it to set the background color, add a border, or add any other style you want.
headerTintColor: This property allows you to set the color of the header text and icons. 
headerTitleStyle: This property allows you to customize the style of the header title. You can use it to set the font size, font family, or any other style you want.
Improve this answer

2 Comments

Please add some sort of explanation addressing the things you used in the above code to fix the issue.
@ArchitGargi edited post for an explanation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.