Add support for tintColor in header

[knowbody]

This should style a text and icon colors. See #30 for reference

[grabbou]

That sounds to me like a good first task.

[Ehesp]

If someone can explain what the best naming convention for styling all of the components would be this should be fairly straightforward.

1. Title/text colour
2. Back arrow tint colour

Anymore? E.g. Would titleStyle and tintColor as 2 individual props on header be ok?

Cc @satya164

[satya164]

We should add a single tintColor property which sets color for both title and back button.

[Ehesp]

Okay sounds good, will see if I can get this in within the next few hours.

[grabbou]

There's already tintColor prop on a back button that is applied.

[Ehesp]

@grabbou from the looks of it though the Header class only applies the onPress prop. On my phone so could be wrong but will check it out soon.

[satya164]

The BackButton accepts the prop, but Header component doesn't accept such an prop, and the screen navigation options aren't passed either.

[Ehesp]

@satya164 @grabbou

I'm applying tintColor to my navigationOptions.header like so:

header: ({ state }) => {
      return ({
        title: 'Some title',
        tintColor: '#ffffff',

However, when logging out header & props here, it logs twice directly after each other (double re-render or previous scene => new scene??). The first time header does not contain my prop, second time it does, but misses the left property.

Is this correct?

return renderLeftComponent(props);

This passes in props, but does not include the tintColor prop - apologies I'm a bit confused as to how to get this from within the renderLeftComponent.

[satya164]

Your usage looks correct. But hold off a bit since @grabbou is doing some refactors right now.

it logs twice directly after each other (double re-render or previous scene => new scene??). The first time header does not contain my prop, second time it does, but misses the left property.

I'm not fully sure, but I think it might be related to #48

[jsdario]

API seems to have changed in 1.0.0-beta, is there a way to use tintColor from navigationOptions = ({navigation}) { ... } ?

[grabbou]

Yeah, just return headerTintColor and you are done.

[guigrpa]

May I ask: why a single color to tint header title and back icon/label? In the standard header, the title is black and the back button is blue (on iOS). I'd like to change the back button color, is there some prop to do that?

[UdaySubbisetty]

There's already tintColor prop on a back button that is applied.

<HeaderBackButton tintColor = '#fff' onPress={() => navigation.goBack(null)} />

[davidcort]

There's already tintColor prop on a back button that is applied.

<HeaderBackButton tintColor = '#fff' onPress={() => navigation.goBack(null)} />

Thanks, works !!