CODEWITHSUNDEEP
javascriptreactjsreact-nativevector-icons
Khalil Khalaf
Khalil Khalaf

Reputation: 9407

How to invert react native vector icon buttons color?

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

Upvotes: 2

Views: 8256

Answers (2)

John Miller
John Miller

Reputation: 407

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

Upvotes: -3

monssef
monssef

Reputation: 1004

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

Upvotes: 3

Related Questions