StackNavigator inside TabNavigator can't change nav bar color

0
votes

I have a StackNavigator:

const infoNavigator = StackNavigator({
InfoMain: {
    screen: PFInfoMain,
    navigationOptions: {
        title: 'Information',
        tintColor: 'red'
    }
},
InfoDetail: {screen: PFInfoDetail}
});

inside of a TabNavigator:

iOS: 

const iosTabs = TabNavigator({
Info: {
    screen: infoNavigator,
    navigationOptions: {
        tabBarLabel: 'Info',
        tabBarIcon: ({tintColor}) => (
            <Image
                source={require('../assets/home.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        )
    }
}...

Android:

const androidTabs = TabNavigator(
{
    Info: {screen: infoNavigator} ...

The navigationOptions with the tintColor: 'red' in infoNavigator is just one of myriad failed attempts to set the color of the nav bar (header?).

Nothing has worked.

Can anyone help? Thanks!

1
react-native

1 Answers

0
votes

Assuming that you're using react-navigation,

There is no such thing as tintColor mentioned in their docs.

User headerTintColor or headerStyle 

static navigationOptions = ({ navigation, screenProps }) => ({
       headerTintColor: "red",
       headerStyle: {
         backgroundColor:"red"
       }
   });