Reputation: 3799
I'm using react-native-icons in my and I can't seem to add styles to it. Adding styles to or results in styles being applied to elements above the bar and not inside the TabBar.
For example,
Here's what I have, the styles have missed my target and styled the items above my icons:
<TabBarIOS selectedTab={this.state.selectedTab}
style={{backgroundColor: 'red', padding: 30}}>
<Icon.TabBarItem
style={{backgroundColor: 'blue', padding: 20}}
title="Icon Text"
selected={this.state.selectedTab === 'myTab'}
iconName="navicon"
iconSize={20}
selectedIconName="navicon">
</Icon.TabBarItem>
What should I be targeting to achieve the styles I want on the TabBarItem icons?
Upvotes: 4
Views: 7356
Reputation: 1101
I Tried something like this-
<TabBarIOS selectedTab={this.state.selectedTab}
barTintColor='#dcdcdc'
tintColor='#E41B17'>
<TabBarIOS.Item
title="Summary"
selected={this.state.selectedTab === 'summary'}//here is the part which keepit as selected and you can apply property watever you want
icon={{uri:base64Icon, scale: 2}}
onPress={() => {
this.setState({
selectedTab: 'summary',
});
}}>
Similarly for another tab
<TabBarIOS.Item
title="details"
selected={this.state.selectedTab === 'detail'}
icon={{uri:base64Icon1, scale: 2}}
onPress={() => {
this.setState({
selectedTab: 'detail',
});
}}>
Hope this might help
Upvotes: 0
Reputation: 7066
You should specify style to TabBarIOS. for example:
<TabBarIOS
tintColor="yellow"
barTintColor="red">
<Icon.TabBarItem
title="Home"
iconName="ios-home-outline"
selectedIconName="ios-home"
selected={this.state.selectedTab === 'home'}
onPress={() => {
this.setState({
selectedTab: 'home',
});
}}
>
<YourComponent />
</Icon.TabBarItem>
</TabBarIOS>
check tintColor
and barTintColor
props.
here is screenshot:
Upvotes: 3
Reputation: 1976
You can follow the example in react-native-icons git repository
var { TabBarIOS, } = require('react-native-icons');
var TabBarItemIOS = TabBarIOS.Item;
<TabBarItemIOS
name="home"
iconName={'ion|ios-home-outline'}
selectedIconName={'ion|ios-home'}
title={''}
iconSize={32}
style = {styles.icon} /* Add styles here*/
accessibilityLabel="Home Tab"
selected={this.state.selectedTab === 'home'}
onPress={() => {
this.setState({
selectedTab: 'home',
});
}}>
Upvotes: 0