I am using NativeBase Header. In header, I have buttons like cart and wishlist. But I am not able to change the color of that icons.
Here is my header code :
<Header>
<Left>
<Button transparent onPress={props.onMenuPress}>
<Icon type="Ionicons" name="menu" color="#ff0000" />
</Button>
</Left>
<Body>
<Title>{props.title}</Title>
</Body>
<Right>
<Button transparent onPress={props.onWishlistPress}>
<Icon name="heart" active={false} color="#ff0000" />
</Button>
<Button transparent onPress={props.onCartPress} icon>
<Icon name="cart" active={false} color="#ff0000" />
</Button>
</Right>
</Header>
Please anyone can tell me what is the problem here ?
It is shown in the Native-base
document. For Icon, Native-base
use the React-native-vector-icons
module, which allows you to set colors
and sizes
through the style
.
Perfect, crisp, high definition icons and pixel ideal fonts powered by NativeBase
to preserve matters very high first-rate. You will continually have pixel perfect icons on your initiatives.
Here is a repo that lists down icons of available react-native-vector-icons
icon families. Repo
Uses Ionicons from React Native Vector Icons
<Icon name='home' />
<Icon ios='ios-menu' android="md-menu" style={{fontSize: 20, color: 'red'}}/>
<Icon type="FontAwesome" name="home" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With