How to style the Tabbar and Tabbar.Items?

[Martin Brochhaus]

How can I change things like backgroundColor for the Tabbar and maybe the color of the Icons, depending on wether they are active or not?

EDIT: OK for changing Items based on active state I can simply access this.state.selectedTab, but it remains unclear to me how to change the general Tabbar styles (background color, ect) and the individual Item styles (might want to have a different background color for the selected item).

[Moss Palmer]

Just style them as you would any other <View/>

e.g.

<Tabbar style={{backgroundColor:'#333'}}>
    ...
    <Item style={{backgroundColor:'#555'}}>
        ...
    </Item>
</Tabbar>

Ignore me.. I understand the problem now... I am now colouring a view behind the tabbar to allow me to do this.

[Martin Brochhaus]

Yea judging from this line: https://github.com/alinz/react-native-tabbar/blob/master/jsx/index.js#L49 it seems like height is the only thing that I can manipulate via props. I guess it would be better if I was allowed to pass in styles as a prop as well and the convention is that this styles object has the same members as this component's styles object and then there should be something like this:

<View style={[styles.container, this.props.styles.container]}

That line might be too simplistic in case styles is not given or doesn't have a container attribute, but one could probably add some checks for that or use lodash's .get.

This way we could override all styles of the component, if I am not mistaken? Not sure what the best practice is for reusable components like this.

[Ali Najafizadeh]

@mbrochh @MossP You can now update and style every single tabs the way that you want. Let me know if you need help. I might provide more examples.

[Robby Greenfield]

@alinz How do you use custom icons/images within the tab items? Could you include this in the readme i think it would be very helpful for beginners (like myself!). Thanks!