Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ios][issue] tintColor on image component does not work on ios #17124

Closed
aidan-doherty opened this issue Dec 8, 2017 · 7 comments
Closed

[ios][issue] tintColor on image component does not work on ios #17124

aidan-doherty opened this issue Dec 8, 2017 · 7 comments
Labels
Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@aidan-doherty
Copy link

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.

tint-color-bug

Reproducible Demo

https://snack.expo.io/r1o2j0wZM

@Sommerfeld
Copy link

Sommerfeld commented Dec 8, 2017

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.

const nativeProps = merge(this.props, {
style,
shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
src: sources,
headers: source.headers,
loadingIndicatorSrc: loadingIndicatorSource ? loadingIndicatorSource.uri : null,
});

@stale
Copy link

stale bot commented Feb 6, 2018

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 6, 2018
@stale stale bot closed this as completed Feb 13, 2018
@akamahesh
Copy link

akamahesh commented May 8, 2018

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
Copy link

rikur commented Jul 20, 2018

Still an issue.

@kientux
Copy link

kientux commented Nov 3, 2018

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

Edit: It's working now.

@janaka120
Copy link

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
Copy link

uguraktas commented Dec 25, 2018

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

@facebook facebook locked as resolved and limited conversation to collaborators Feb 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

7 participants