Styling text of TabItem in TabNavigation

[jasongrishkoff]

Hi there,

Digging into the code, it seems that it's not possible to pass a prop to define the text color of the TabItem in TabNavigation? For example, on TabNavigation I can set tabBarColor="#333", which requires that of renderTabItems() (in ExNavigationTabBar.js) would need to be white.

Doesn't seem like there's an option for this? Do I need to override somehow?

Thanks!

[cyprusglobe]

maybe a titleStyle attribute?

example usage
titleStyle={{color: 'red'}}

I would be more than happy to send a PR to add this.

[jasongrishkoff]

That would be pretty convenient! I'm debating just replacing it with icons, but... I also encountered this: renderTitle() here: https://github.com/exponentjs/ex-navigation/blob/3788c8723ddaf5f457691ca9a7972fd3e0b8044e/example/components/TranslucentBarExample.js

Going go try fiddle around with that.

[cyprusglobe]

thats one way to over come the situation, im debating wether or not an attribute would be useful or not

/cc @skevy @brentvatne

[jasongrishkoff]

I'm struggling to convert over to the above example, so yes, another attribute would be useful. I think it's fairly common that someone would try to alter the background and tab item color? That said, about to look into using icons, which was part of my design plan anyway.

[jasongrishkoff]

Got it working as follows:

renderTitle = (isSelected, title) => {
  return (  
    <Text style={{color:'#FFF'}}>{title}</Text>
  )
}

And then...

<TabNavigationItem
  renderIcon={(isSelected) => <Icon name='music-note' size={24} color='#fff' />}
  renderTitle={this.renderTitle}
  title='Songs'
  id='newSongs'>                
    <StackNavigation
      id='newSongs'
      initialRoute={Router.getRoute('feed')}
     /> 
</TabNavigationItem>

[osmanra2]

Saved me a headache. Thank you