How to style header in react-navigation - react-native

Question

I am trying to style the header in react-navigation where the object is automatically generated by Expo.
I am trying to style the header background and the orientation of the title.
I tried every possible place, including navigationOptions but all failed.
In below code tab bar background color is correctly changed. But same method failed for header.
Any guidance appreciated.
import React from 'react';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const LinksStack = createStackNavigator({
Links: LinksScreen,
});
LinksStack.navigationOptions = {
tabBarLabel: "Links",
tabBarIcon: ...
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
SettingsStack.navigationOptions = {
tabBarLabel: "Settings",
tabBarIcon: ...,
};
export default createBottomTabNavigator(
{
LinksStack,
SettingsStack,
},
{
tabBarOptions: {
style: {
backgroundColor: '#123456',
},
}
},
);

Answer 1

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

Answer 2

You can try this
export default createBottomTabNavigator(
{
LinksStack: {
screen: LinksStack,
navigationOptions: LinksStack.navigationOptions(), // style here
},
SettingsStack,
}

Answer 3

You can try this by passing using headerStyle inside each screen by
export default createBottomTabNavigator({
LinkStack: {
screen: LinkScreen,
navigationOptions: { // you need to call LinkStack.navigationOptions here
headerTitle: 'LinkScreen',
headerStyle: {
backgroundColor: 'red',
...otherStyles,
},
},
}
})
Or you can make use of defaultNavigationOptions inside your stackNavigator if you don't have specific header styles for your different screens.
In your case, you need to call LinkStack.navigationOptions for navigationOptions.

Answer 4

Finally I figured out what I was doing wrong.
It seems I was searching the answer in wrong place. The following change solved the problem:
class LinksScreen extends React.Component {
static navigationOptions = {
title: "Links Title",
headerStyle: { backgroundColor: '#123456', },
headerTitleStyle: { color: "#654321" },
};
...
}