2

I am using Vector Icons as Icon.Button and I would like to have two Cancel and Accept Icons.

I am doing this:

<View style={{ flexDirection: "row", justifyContent: 'space-between'}}>
    <TouchableOpacity style={{borderColor: 'red'}}> 
        <Icon.Button backgroundColor={RED} name="ios-close-circle-outline" size={20} />
    </TouchableOpacity>
    <TouchableOpacity style={{borderColor: 'red'}}>
        <Icon.Button backgroundColor={GREEN} name="ios-checkmark-circle-outline" size={20} />
    </TouchableOpacity>
</View>

I am getting this:

enter image description here

I would like this:

enter image description here

How to invert react native vector icon buttons color? Thanks

Khalil Khalaf
  • 9,259
  • 11
  • 62
  • 104

2 Answers2

3

Change backgroundColor to transparent, set the color property to the preferred color and bump the size.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
monssef
  • 1,006
  • 11
  • 12
-3

If anybody is here because they would like to know how to invert colors using css, then you may simply use filter: invert(1);

John Miller
  • 388
  • 2
  • 8
  • 23