Closed mbrochh closed 8 years ago
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.
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.
@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.
@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!
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).