expo / ex-navigation

Route-centric navigation for React Native
997 stars 201 forks source link

Is there any props for title Color in TabBar ? #268

Open Ali-Ayyad opened 7 years ago

Ali-Ayyad commented 7 years ago

I was using the react-native-tab-navigator it was perfect until i couldn't jump from one tab to another (using an external button) since the function applies on this tabBar navigation.

juellez commented 7 years ago

Not sure if you're asking about setting color or going to another tab. Here's how you can open another tab:

this.props.navigation.getNavigator('master').push( modalRoute );

And to set a title color: use renderTitle to call a function that can then set a color, e.g.

  _renderTitle = (isSelected, title) => {
    return (
      <Text style={getStyle(isSelected)}>{title}</Text>
    )
  }

where getStyle sets a color based on the tab being active or not:

function getStyle(isSelected) {
  return isSelected ? styles.tabTxtActive : styles.tabTxt;
}
vonovak commented 7 years ago
<StackNavigation
                id="nested"
                defaultRouteConfig={{
                                 navigationBar: {
                                   backgroundColor: '#049cdb',
                                   tintColor: 'white',
                                 },
                               }}
                {...navbarConfig}
                initialRoute={Router.getRoute(this.props.initialScreenString, {project})}
            />

use tintColor

Ali-Ayyad commented 7 years ago

@juellez _renderTitle goes as a property for tabItem ? for example i used react-native-tab-navigation ... you can simply pass props titleStyle

@vonovak this way you set the tint color of the navigation bar ... i need tabBar