Accepted answer

As per the documentation, tintColor changes the color of all the non-transparent pixels to the tintColor (taken word for word).

So for example, in one of my React Native packages, I use have an increment asset - - which has a blue + sign. Using tintColor, another User can recolour the blue (non-transparent pixel) to any colour they desire.


I think this will clear out your confusion for tintColor property of Image.

React Native Styling Cheat Sheet -

enter image description here

enter image description here


Using tintColor in <Image> is not working.

Using it in the style of <Image> works.



  style={{width: 20, height: 15,margin:10}}
  source={{uri: 'backsignup'}}

This works fine for android but not in ios

If you want it to work on ios as well go with this ie. passing tint color with style instead of passing it as a props

 style={{ width: 20,height: 23,margin: 10,tintColor: "#2d3436"}}
 source={{ uri: "pdficon" }}                                                 

Related Query

More Query from same tag