React-native: [ios][issue] tintColor on image component does not work on ios

[aidan2129]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

OS: macOS Sierra 10.12.6
Node: 7.4.0
Yarn: Not Found
npm: 5.5.1
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.0.0 => 16.0.0
react-native: ^0.51.0 => 0.51.0

Steps to Reproduce

1.Create a page with an image component in it.
2.Add a tintColor prop to the image component with any color valid color value in it
3.View the image on your screen

Expected Behavior

I though the rendered image would change to the tintColor set on the image component.

Actual Behavior

The image renders but the color has not been changed. On android the color is changed as expected just not on ios.

Reproducible Demo

https://snack.expo.io/r1o2j0wZM

[Sommerfeld]

In the docs tintColor is listed under style. This works on both platforms. Actually you might should call it a bug that your code is working on android.

Just change your code to

<Image
  style={{width: 50, height: 50, tintColor: 'red'}}
  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

Edit:

Actually on Android style attributes are passed as props to the native image component. Which might lead to similar issues but I do not know if this is necessary for some reason.

https://github.com/facebook/react-native/blob/e76abfa036ff7ba2b9b309737cbc3d5a0ae9394b/Libraries/Image/Image.android.js#L293-L299

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[akamahesh]

I am having the same issue with this ie. passing tint as a prop to the image

<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" }}
/>

[rikur]

Still an issue.

[kientux]

Anyone got a fix for this? Still tinting not working on iOS.

Edit: It's working now.

[janaka120]

In Android, If you pass tintColor with style instead. It's not working.

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

But it works when you pass it as prop to Image.

<Image
  tintColor='#2d3436'
  style={{width: 20, height: 15,margin:10}}
  source={{uri: 'backsignup'}}/>

[uguraktas]

is this work in windows ?

In Android, If you pass tintColor with style instead. It's not working.

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

But it works when you pass it as prop to Image.

<Image
  tintColor='#2d3436'
  style={{width: 20, height: 15,margin:10}}
  source={{uri: 'backsignup'}}/>