React-native-tab-view: Use different colors for active and inactive tabs.

[j-rul]

I noticed the current implementation is to use a slightly toned down version of the active tab's color for the inactive tab. I'm using icons only for the tabs. Can I specify two entirely different colors for active and inactive tabs on my own? Thank you.

[jephtta]

This is possible. There might be a better way, but this is how i would do it. Use numbers starting from 0 as keys for your routes.
e.g.

state = {
        index: 0,
        routes: [
            { key: '0', icon: 'md-sd' },
            { key: '1', icon: 'md-gladfobe' },
            { key: '2', icon: 'md-create' },
        ],

    };

Then your rendericon() could be something like this:

renderIcon({ route }) {

        return (
            <Icon
                name={route.icon}
                size={30}
                color={route.key == this.state.index ? active_color : inactive_color}
            />
        );
    }

[jordanfloyd]

renderLabel = (scene: Scene) => {
    const label = scene.route.title
    return <Text style={{ color: scene.index == this.state.index ?  'red' : 'black' }} >{label}</Text>
}

renderHeader = (props) => (<TabBar {...props} style={styles.tabBar} indicatorStyle={styles.indicator} renderLabel={this.renderLabel}/>)

This works, but there is a slight delay in the color change. Probably because we are depending on local state, which may not update instantly. Not sure how to fix that problem. IMO the library should support passing these values as props because it shouldn't require overriding the render method to configure something so simple. Same for the all caps text, should be configurable.

[j-rul]

Thanks guys. Both approaches (suggested by @jephtta and @jordanfloyd ) work. However, like @jordanfloyd said, there is an obvious delay in color change. Also the color change is not animated. Is there anyway around these? Been looking through the source code and the docs. Cant seem to find anything.

[jordanfloyd]

@j-rul there is actually a slightly simpler solution:
color: scene.focused ? 'red' : 'black'
instead of:
color: scene.index == this.state.index ? 'red' : 'black'
looks like the delay is slightly less, but still there. At least this way we don't have to wait for the local state to update.

[j-rul]

@jordanfloyd I'm using icons and not text labels, my code is therefore very similar to what was posted by @jephtta. Is _scene_ passed to the _renderIcon_ function as well? If it is the I can use what you suggest instead.

[satya164]

Have you guys looked at the examples?

[j-rul]

if there is an example that covers my use case, kindly point me in the right direction. Thank you.

[satya164]

Everything is under the example folder, but here you go https://github.com/react-native-community/react-native-tab-view/blob/master/example/src/ScrollViewsExample.js#L79

[satya164]

@jordanfloyd

Same for the all caps text, should be configurable.

You don't need to override render to disable all caps text. You can just do getLabelText={({ route }) => route.title} where you can uppercase, lowercase, title case, any other transformation you like, or none at all.

[satya164]

@jordanfloyd

IMO the library should support passing these values as props because it shouldn't require overriding the render method to configure something so simple.

The main issue regarding ability provide colors is that it won't work well with icons. and I usually avoid extending the API surface area too much. There are potential solutions, like the approach I took in react-navigation.

Honestly, with official navigation libraries like react-navigation, I don't have enough motivation to provide more props. react-navigation already provides a very easy to use abstraction over this library.

[j-rul]

@satya164

Everything is under the example folder, but here you go https://github.com/react-native-community/react-native-tab-view/blob/master/example/src/ScrollViewsExample.js#L79

Thanks for the link. I have actually seen this example. My confusion is that this seems to refer to text labels. My implementation is an icon only tabbar. Can I pass an animated component similar to that in the example to the renderIcon() function? If its possible, a few pointers as to the implementation will be very much appreciated.
Thanks once again.

[jephtta]

take a look at this example. Should work for your case.
https://github.com/react-native-community/react-native-tab-view/blob/master/example/src/NoAnimationExample.js

[satya164]

Note that the linked example uses a cross-fading animation because I use two different icons for active and non-active states. If you use the same icon you can just use an animated icon like in renderLabel

[j-rul]

Thanks @jephtta and @satya164, got it working. Sorry for not paying better attention to the examples. Thanks once again.

[surabhiagrawal60]

renderLabel=({ route, focused, color }) => (
{route.title}

)

[satya164]

@surabhiagrawal60 you can use the activeColor and inactiveColor props https://github.com/react-native-community/react-native-tab-view#activecolor

[surabhiagrawal60]

@surabhiagrawal60 you can use the activeColor and inactiveColor props https://github.com/react-native-community/react-native-tab-view#activecolor

I tried using that but didnt get the result