CODEWITHSUNDEEP
androidioscssreact-nativeicons
random1234
random1234

Reputation: 817

React Native fill transparent part of icon

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?

Upvotes: 6

Views: 8264

Answers (2)

Hariwarshan
Hariwarshan

Reputation: 313

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.

Upvotes: 1

P-A
P-A

Reputation: 1278

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.

Upvotes: 0

Related Questions