React Native fill transparent part of icon

Question

I'm using a youtube icon from: https://github.com/oblador/react-native-vector-icons

The one I'm using is "logo-youtube" from Ionicons and I want the middle play triangle (which is transparent) to be white while the surrounding part is red, however if I add a white backgroundColor there will be a white box around the icon, and setting the padding to 0 does nothing at all. How do I get the transparent middle to be colored without getting a background box around the whole icon?

Answer 1

I have a similiar problem where I have Icons from react-native-vector-icons. place it inside a TouchableOpacity which is shaped as a circle. I set the backgroundColor of the TouchableOpacity but I don't want that color to show inside the icon.

Answer 2

I also had a similar Problem but I found a Way to fill the transparent part with any color. add a dummy view with position: 'absolute'

//jsx

<View style={styles.fillView}/>
<Icon /> {*your Icon*}

//style
fillView:{
   position:'absolute',
   width:10,
   height:10,
   top:40,
   left:90,
   backgroundColor:'any fill color here'
 }

you can adjust the width,height styles to match the size of the fill part and top,left styles to match the position of the fill part.