25

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?

6 Answers6

42

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!

cssko
  • 3,027
  • 1
  • 18
  • 21
  • 1
    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. – cssko Mar 17 '17 at 11:24
  • 1
    I believe this "nested" way to do headers was deprecated - see answer from @VishalDhaduk below. – Freewalker Sep 05 '17 at 17:32
15

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

ravibagul91
  • 20,072
  • 5
  • 36
  • 59
Vishal Dhaduk
  • 492
  • 5
  • 13
4

Try this working code

static navigationOptions = {
      title: 'Home',
      headerTintColor: '#ffffff',
      headerStyle: {
        backgroundColor: '#2F95D6',
        borderBottomColor: '#ffffff',
        borderBottomWidth: 3,
      },
      headerTitleStyle: {
        fontSize: 18,
      },
  };
omprakash8080
  • 1,211
  • 16
  • 11
  • Can we add a subtitle??? if title is "Home" I wanna add "My Home" below it. How can I do that?? – grooot Jul 20 '20 at 07:43
  • yes, you can add the subtitle also. I am adding the sample for it. const CustomHeader = ({ title, subtitle }) => ( {title} {subtitle} ); static navigationOptions = { title: , }; – omprakash8080 Jul 20 '20 at 10:41
  • 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? – grooot Jul 20 '20 at 12:10
  • Yes, you can update the CustomHeader layout as per your final result. – omprakash8080 Jul 20 '20 at 13:00
2

Try this code: 

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

good luck!

ravibagul91
  • 20,072
  • 5
  • 36
  • 59
Daniel Agus Sidabutar
  • 329
  • 3
  • 6
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> .

Saeed Heidarizarei
  • 8,406
  • 21
  • 60
  • 103
0

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.
Mohd. Anas Siddiqui
  • 153
  • 1
  • 7