CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
user818700
user818700

Reputation:

React Native, change React Navigation header styling

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?

Upvotes: 29

Views: 81670

Answers (6)

Mohd. Anas Siddiqui
Mohd. Anas Siddiqui

Reputation: 783

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.

Upvotes: 2

Daniel Agus Sidabutar
Daniel Agus Sidabutar

Reputation: 349

Try this code: 

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

good luck!

Upvotes: 3

Vishal Dhaduk
Vishal Dhaduk

Reputation: 518

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

Upvotes: 17

omprakash8080
omprakash8080

Reputation: 1391

Try this working code

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

Upvotes: 5

cssko
cssko

Reputation: 3045

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!

Upvotes: 44

Saeed Heidarizarei
Saeed Heidarizarei

Reputation: 8936

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> .

Upvotes: 2

Related Questions