Can't get the StackNavigator header to change it color

[francocorreasosa]

Hi there! Thank you for this awesome package.

Unfortunately, I have a problem with it. I've set the properties.

static navigationOptions = {
    title: 'Pronóstico Actual',
    header: navigation => ({
      style: {
        backgroundColor: '#0087B7'
      },
      titleStyle: {
        color: '#FFFFFF'
      }
    })
  }

But I get this as the result:

What am I doing wrong?

Thanks in advance.

[matthamil]

Try adding tintColor

static navigationOptions = {
    title: 'Pronóstico Actual',
    header: navigation => ({
      titleStyle: {
        color: '#FFFFFF'
      },
      tintColor: '#0087B7'
    })
  }

I don't quite understand why tintColor is a separate field and style: { backgroundColor: 'red' } isn't supported.

[francocorreasosa]

Thanks for the response. Unfortunately, your suggestion did not work for me :(

static navigationOptions = {
    title: 'Pronóstico Actual',
    header: () => ({
      titleStyle: {
        color: '#FFFFFF',
      },
      tintColor: '#0087B7',
    }),
}

[matthamil]

Hmm, here's an example from code I've written:

Try making it look like mine? I'm also targeting Android, and I don't know if tintColor supports iOS (very knew to this library).

[francocorreasosa]

I am targeting iOS now. I don't think tintColor is an Android-only value because is a common expression in Native iOS Development with Objective-C & Swift. This still doesn't work, though.

[matthamil]

Is the headerMode in your Stack Navigator config set to screen?

[arstiefel]

+1

[matthamil]

@stief510 Are you experiencing this same issue? Please describe in detail what you are experiencing and attempting. Commenting "+1" does not help contributors to solve the issue.

[arstiefel]

Experiencing the exact same issue

  static navigationOptions = {
    title: "Title",
    header: {
      title: "Title",
      style: {
        backgroundColor: 'red'
      },
      tintColor: 'red'
    }
  };

In fact, my title is not even showing up

[matthamil]

@francocorreasosa @stief510 Are you configuring your StackNavigator with headerMode: screen?

StackNavigator(routes, {
   initialRouteName: 'myInitialRoute',
   headerMode: 'screen' // <-- should allow you to change the styles of the header
});

[arstiefel]

That does not seem to help

    let Stack = StackNavigator({
      Initial: {
        screen: this.view
      }
    }, {
      headerMode: 'screen'
    });

[arstiefel]

The title for me is not even showing up

[matthamil]

Are you nesting this StackNavigator inside another navigator? Can you post your full source code for the components/navigators involved or a link to it? This setup is currently working for me on Android with a custom header, I will check if I can duplicate this issue on iOS later.

Android emulator showing custom header for a StackNavigator:

[arstiefel]

It is not nested

// @flow

import _ from 'lodash';
import {
  View,
  Image,
} from 'react-native';
import React, {Component, PropTypes} from 'react';
import Spinner, {InlineSpinner} from "../components/spinner";
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import {observable, computed} from "mobx";
import {observer, inject} from "mobx-react/native";
import SectionHeader from '../components/section_header';
import BbPromise from 'bluebird';

import {
  iconSize,
  inactiveIconColor,
  disabledTextColor,
  touchUnderlayColor,
  scalingFactor,
  cellHeight,
  accentColor,
  secondaryTextColor,
  primaryTextColor,
  linkColor,
  primaryYellow,
  primaryRed
} from './styles/common';
import styled from 'styled-components/native';

import {ContainerWrapper, Flexed, styledWithClasses, FlexedCentered, FlexedClass, WhiteBackgroundClass, BorderTopClass, FlexedCenteredColumn} from '../components/common_styled_components';

const PromoImage = styledWithClasses(Image)`
  height: 25;
  resizeMode: contain;
`;

const PromoWrapper = styledWithClasses(FlexedCenteredColumn, FlexedClass, WhiteBackgroundClass, BorderTopClass)``;

const Promo = styled(PText)`
  color: ${props => props.primary ? primaryTextColor : props.green ? 'green' : secondaryTextColor};
  fontSize: ${scalingFactor.lvl_12};
  textAlign: center;
`;

const IconRowWrapper = styled.View`
  flex: 1;
  alignItems: center;
  justifyContent: space-around;
  flexDirection: row;
  backgroundColor: white;
  minHeight: 170;
`;

const Button = styled.TouchableHighlight`
  flex: 1;
  height: ${cellHeight};
  flexDirection: row;
  alignItems: center;
  justifyContent: center;
  backgroundColor: white;
`;

const ButtonText = styled(PText)`
  color: ${accentColor};
  fontSize: ${scalingFactor.lvl_10};
  fontFamily: proximanova-regular;
`;

const pageName = 'Home';

@observer
class Home extends Component {
  static trackingID = pageName;

  static navigationOptions = {
    title: 'TITLE',
    header: {
      title: 'TITLE',
      style: {
        backgroundColor: primaryRed
      },
      tintColor: primaryRed,
      titleStyle: {
        color: 'black'
      }
    }
  };

  @observable verifying = false;

  render(): ReactElement {
    return (
      <ContainerWrapper>
        { this.verifying ?
          <Flexed>
            <Spinner spinner={this.verifying}/>
          </Flexed>
          :
          <Flexed>
                <Flexed flex={2.2}>
                  <SectionHeader text={_t("Recents")}/>
                </Flexed>
          </Flexed>
        }
      </ContainerWrapper>
    );
  }
}

Home.wrappedComponent.propTypes = {
  navigation: PropTypes.object.isRequired
};

let HomeView = Home;

export default HomeView;

This is a redacted, simplified version of the component