React native: header styles in navigationOptions not working

Question

I am fairly new to react-native. I am trying to set some global header styles for my app, but it's not working

route.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import SplashScreen from '../screens/SplashScreen';
import CalendarScreeen from '../screens/CalendarScreen';

const NavStack = createStackNavigator(
    {
        Splash: {
            screen: SplashScreen,
            navigationOptions: {
                header: null
            },
        },
        Calendar: {
            screen: CalendarScreeen,
            navigationOptions: {
                title: 'Calendar',
            },
        },
    },
    {
        initialRouteName: 'Calendar',
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#28F1A6',
                elevation: 0,
                shadowOpacity: 0
            },
            headerTintColor: '#333333',
            headerTitleStyle: {
                fontWeight: 'bold',
                color: '#ffffff'
            }
        }
       
    }

);

const Routes = createAppContainer(NavStack);
export default Routes;

Now, I am aware that I can do something like this in my class component

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

as it is mentioned in here possible alternative

but I want to achieve the same from my route.js

I also tried defaultNavigationOptions like its mentioned in docs

But no luck!!

score 24 · Accepted Answer · answered Nov 30 '18 at 08:30

24

I think you are using react navigation version 3. If so navigationOptions is changed to defaultNavigationOptions.

{
        initialRouteName: 'Calendar',
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: '#28F1A6',
                elevation: 0,
                shadowOpacity: 0
            },
            headerTintColor: '#333333',
            headerTitleStyle: {
                fontWeight: 'bold',
                color: '#ffffff'
            }
        }

}

It should work. https://snack.expo.io/ByGrHdAC7

answered Nov 30 '18 at 08:30

Aung Myat Hein

4,018
1
36
42

oh, yea. this works fine. thanks. I might have done some stupid typo earlier when I had tried this. – Nauman Nov 30 '18 at 08:59
Default navigation options are not working for me, any idea? – Travis Delly May 06 '19 at 20:33

score 2 · Answer 2 · answered Feb 01 '19 at 15:40

2

You need to use defaultNavigationOptions.

Admittedly, they didn't even mention that they changed it between v2 and v3 in the docs!

https://reactnavigation.org/docs/en/stack-navigator.html

answered Feb 01 '19 at 15:40

Christopher Agnus Lam

91
7

score 2 · Answer 3 · answered Sep 29 '20 at 13:44

to setup custom react react navigation you need first defined option.navigations or option.defaultNavigationOptions in your App.js

App.js

 <Stack.Screen
                 name="ListeMedocItemScreen"
                 component={ListeMedocItemScreen}
                 options={ListeMedocItemScreen.defaultNavigationOptions} // ListeMedocItemScreen.navigationOptions

  />

then in your conponents page

if you use hooks


const ListeMedocItem = (props) =>{
  //some component
}


ListeMedocItem.defaultNavigationOptions = ({navigation}) => {

  return {
    title: 'My home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },

 }}

or if you use React.Components


static navigationOptions = ({ navigation }) => {
    //return header with Custom View which will replace the original header 
    return {
      header: (
        <View
          style={{
            height: 45,
            marginTop: 20,
            backgroundColor: 'red',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              color: 'white',
              textAlign: 'center',
              fontWeight: 'bold',
              fontSize: 18,
            }}>
            This is Custom Header
          </Text>
        </View>
      ),
    };
  };

score 1 · Answer 4 · answered Jul 26 '20 at 12:32

1

Just simply change your navigationOptions to defaultNavigationOptions and it will work fine

Thankx!

answered Jul 26 '20 at 12:32

enthusiastdev

880
8
9

score -1 · Answer 5 · answered Oct 01 '20 at 13:10

-1

elevation: 0 in Android 10 doesnt work. Others Android version it works. It is changes to transparent header.

answered Oct 01 '20 at 13:10

Felipe

89
1
6

This does not provide an answer to the question. Once you have sufficient [reputation](/help/whats-reputation) you will be able to [comment on any post](/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). – Yunnosch Oct 01 '20 at 20:20

React native: header styles in navigationOptions not working

5 Answers5