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