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.

Sign up for GitHub

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

Jump to bottom

[iOS] Gif Image tintColor not working #24789

Closed
jinshin1013 opened this issue May 10, 2019 · 8 comments
Closed

[iOS] Gif Image tintColor not working #24789

jinshin1013 opened this issue May 10, 2019 · 8 comments
Labels
Bug Component: Image Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@jinshin1013
Copy link

jinshin1013 commented May 10, 2019 •
edited
Loading 

info
  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
      Memory: 22.33 MB / 16.00 GB
      Shell: 3.0.2 - /usr/local/bin/fish
    Binaries:
      Node: 10.15.3 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.6 => 16.8.6
      react-native: 0.59.5 => 0.59.5
    npmGlobalPackages:
      react-native-cli: 2.0.1

Steps To Reproduce

  1. Create fresh react-native project through, react-native init
  2. Create Image source={require('path-to-image')} style={{ width: 50, height: 50, tintColor: "blue" }} />

When using an animated gif, tintColor style in Image is not being applied to iOS while working fine on Android.

Snack: Link to Expo Snack
@zhongwuzw
Copy link
Contributor

@jinshin1013 Strange, can't reproducible, can you provide the image url? because tintColor only applied to non-alpha pixels.

@zhongwuzw
Copy link
Contributor

zhongwuzw commented May 10, 2019 •
edited
Loading

Updated: based you snack code, it works for image snack-icon.png. (iPhone8 12.2 simulator)
WechatIMG55607

@jinshin1013
Copy link
Author

@zhongwuzw Oops, my bad it seems like the issue is only contained in iOS gif images. I should've tested with the normal image as well before posting here, I just assumed image won't work either.

@jinshin1013 jinshin1013 changed the title [iOS] Image tintColor not working [iOS] Gif Image tintColor not working May 10, 2019
@jinshin1013
Copy link
Author

Seems to be also related to #22805

@zhongwuzw
Copy link
Contributor

@jinshin1013 Never mind, bug exist, I'll try to fix it. Thanks.

@zhongwuzw zhongwuzw mentioned this issue May 10, 2019
Closed
@zhongwuzw
Copy link
Contributor

@jinshin1013 Hi, could you try #24794?

@jinshin1013
Copy link
Author

@zhongwuzw I can confirm that the fix is working! Thanks!

facebook-github-bot pushed a commit that referenced this issue May 13, 2019
@zhongwuzw @facebook-github-bot
Fixes renderingMode not applied to GIF images (#24794)
75380aa 
Summary:
Bugs like #24789, we don't apply tintColor to GIF. We fixes it by setting a poster image before add animation.

cc. cpojer .

[iOS] [Fixed] - Fixes renderingMode not applied to GIF images
Pull Request resolved: #24794

Differential Revision: D15316913

Pulled By: cpojer

fbshipit-source-id: 611a07ec17afc962d1eb6b8fc193f118fa623e73
@zhongwuzw
Copy link
Contributor

@jinshin1013 🍻

cc @cpojer @kelset. Fixed in #24794.

@cpojer cpojer closed this as completed May 13, 2019
@facebook facebook locked as resolved and limited conversation to collaborators May 13, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label May 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Bug Component: Image Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cpojer @zhongwuzw @jinshin1013 @react-native-bot