score:6

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 - https://github.com/hannigand/react-native-ui-stepper/blob/master/assets/increment.png - which has a blue + sign. Using tintColor, another User can recolour the blue (non-transparent pixel) to any colour they desire.

score:5

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

React Native Styling Cheat Sheet - https://github.com/vhpoet/react-native-styling-cheat-sheet#image

enter image description here

enter image description here

score:9

Using tintColor in <Image> is not working.

Using it in the style of <Image> works.

Ref: https://github.com/facebook/react-native/issues/17124

score:10

<Image
  tintColor='#2d3436'
  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

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

Related Query

More Query from same tag