Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Icon color not working in native base header buttons

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 ?

like image 640
Kishan Bharda Avatar asked Dec 22 '22 20:12

Kishan Bharda


1 Answers

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.

Icon

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

Exmaple

 <Icon name='home' />
 <Icon ios='ios-menu' android="md-menu" style={{fontSize: 20, color: 'red'}}/>
 <Icon type="FontAwesome" name="home" />
like image 92
hong developer Avatar answered Feb 23 '23 23:02

hong developer