Question

10

React Native, change React Navigation header styling

rated 0 times [ 13] [ 3] / answers: 1 / hits: 74949 / 7 Years ago, fri, march 17, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jensenb

Add To Favorites

Follow

Total Points: 634

Total Questions: 102

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Thu, Jun 24, 2021

3 Years ago

answered 7 Years ago donovantyriqn · Accepted Answer

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!