Skip to content

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

Answer

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