React Native: "tintColor" not working for Image on iOS 15

user_5746918 0
Viewed 1684

I have some code like this throughout my app:

<Image
  style={{width: 50, height: 50, tintColor: 'yellow'}}
  source={fabicon}
/>

This is working fine on Android and on iOS <15. However, the tintColor is not applied to any of my icons on iOS 15.

I am on React Native version 0.62.2.

Can anyone let me know how I can apply tint color to images on iOS 15 (and above)? If I can't, do I make separate images for every color I want an image to be? I could use SVGs, but that also is not an option for every scenario in my app.

react-native image ios
1 Answers

I raised this issue on React Native's repo:

https://github.com/facebook/react-native/issues/32251

They released a new RN version 0.66.0 on 2nd October, 2021. I have confirmed that tintColor works on this new version and closed this issue.

For anyone below RN 66 who has this issue with Image tintColor, you can upgrade to RN 66 for tintColor to work. If upgrading is not an option now, you can use react-native-fast-image until you can upgrade. Alternatively, you can use different-colored versions of your images or SVGs as suits your needs. If your tinted images are mostly icons, you can also use react-native-vector-icons.

user_57469180
Related