Search code examples
javascriptreactjsreact-nativevector-icons

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

Solution

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