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

Fix ImageView tint color #1996

Merged
merged 2 commits into from
Dec 21, 2023

Conversation

shwanton
Copy link

@shwanton shwanton commented Dec 16, 2023

Please select one of the following

  • I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
  • I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
  • I am making a fix / change for the macOS implementation of react-native
  • I am making a change required for Microsoft usage of react-native

Summary:

ImageView tint color was broken after this change on core:
facebook@ce7c0b7

This change was from 2015 😅!

Paper should use the RCTUIImageView class for rendering which has the same tintColor property as the iOS UIImageView class.

Changelog:

[MACOS] [FIXED] - Fix ImageView tint color

Test Plan:

RN Tester
CleanShot 2023-12-15 at 17 13 12@2x

@shwanton
Copy link
Author

shwanton commented Dec 16, 2023

fixes #1948

@shwanton shwanton marked this pull request as ready for review December 16, 2023 04:08
@shwanton shwanton requested a review from a team as a code owner December 16, 2023 04:08
@shwanton
Copy link
Author

NSImageView has a contentTintColor which should set the template tint correctly.

#1843 Added a change for Fabric does affect Paper since the RCTImageView has an internal RCTUIImageViewAnimated which is a RCTUIImageView
https://github.com/microsoft/react-native-macos/blame/main/packages/react-native/Libraries/Image/RCTUIImageViewAnimated.h#L11

This change requires us to use tintColor for tinting to work correctly.

@amgleitman
Copy link
Member

/azp run

@Saadnajmi
Copy link
Collaborator

Did some digging/testing and learned this:

  • tintColor is an iOS UIView property, not a UIImageView property
  • contentTintColor is not a macOS NSView property.. it's an NSButton property
  • We custom implemented RCTUIImageView.tintColor with a custom CALayer tintingLayer
  • As such, if we wanted to implement tintColor all up in our shim, we should probably move the whole tintingLayer implementation from RCTUIImageView to RCTUIView

That sounds out of scope, so approving this PR for now ⁠:D

@Saadnajmi
Copy link
Collaborator

Did some digging/testing and learned this:

  • tintColor is an iOS UIView property, not a UIImageView property
  • contentTintColor is not a macOS NSView property.. it's an NSButton property
  • We custom implemented RCTUIImageView.tintColor with a custom CALayer tintingLayer
  • As such, if we wanted to implement tintColor all up in our shim, we should probably move the whole tintingLayer implementation from RCTUIImageView to RCTUIView

That sounds out of scope, so approving this PR for now ⁠:D

Actually wait. contentTintColor is also an NSImageView property and should work but doesn't... so I don't know.

@Saadnajmi Saadnajmi merged commit 80b9672 into microsoft:main Dec 21, 2023
19 of 27 checks passed
@shwanton shwanton deleted the shwanton/fix-imageview-tintcolor branch January 11, 2024 23:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants