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:
/
Try this working code
static navigationOptions = {
title: 'Home',
headerTintColor: '#ffffff',
headerStyle: {
backgroundColor: '#2F95D6',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
},
headerTitleStyle: {
fontSize: 18,
},
};
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!
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>
.
Footer After DrawerItems
:
contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>
.
Try this code:
static navigationOptions = {
headerTitle: 'SignIn',
headerTintColor: '#F44336'
};
good luck!
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