fix(android): props 2.0 image tintColor=transparent broken (#57668)

[bartlomiejbloniarz]

Summary:

When enabling the props 2.0 feature flags I noticed that for an <Image source={...} style={{ tintColor: 'transparent' }} /> the image is actually still showing, instead of becoming transparent.

The underlying issue

All color props are defined as SharedColor, where a SharedColor has a default value of 0:

https://github.com/facebook/react-native/blob/f3678f51d9873cb19602d7e36a4d8ed71562b9d0/packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h#L15-L18

https://github.com/facebook/react-native/blob/f3678f51d9873cb19602d7e36a4d8ed71562b9d0/packages/react-native/ReactCommon/react/renderer/graphics/Color.h#L30-L32

Note

This is a bit confusing to me. 0 is not really an "undefined" color, but its actually "transparent". What we are really saying this way is that all color props have a default value of "transparent". The naming makes me unsure whether this has been intentional.

For other use cases, this seems to make sense. Ie. a user expects their text to have a background color of transparent/"nothing". However, we do not expect our image's tint color to have a default color of "transparent". This would hide all our images.

With props 2.0 we use the getDiffProp function, and when we pass tintColor: 'transparent' it will be passed to native as tintColor: 0. When we then compare the passed prop's value vs the default value here, it will not include the tintColor:

https://github.com/facebook/react-native/blob/f3678f51d9873cb19602d7e36a4d8ed71562b9d0/packages/react-native/ReactCommon/react/renderer/components/image/ImageProps.cpp#L249-L251

tintColor really is an optional color prop, and should be treated as such. The best fix I found was therefor making it really an std::optional. Let me know if you think otherwise!

Changelog:

[ANDROID] [CHANGED] - ImageProps make tintColor an std::optional to support color transparent (0) with props 2.0

X-link: #55535

Test Plan:

• In the RNTester app change one of the Tint Color image examples to use tintColor of "transparent"
• The image should be invisible now as all visible pixels turned transparent
• Enable the props 2.0 feature flags
• Run the same example, notice that the tintColor has not been applied

Reviewed By: lenaic

Differential Revision: D93140534

Pulled By: coado

[meta-codesync]

@bartlomiejbloniarz has exported this pull request. If you are a Meta employee, you can view the originating Diff in D93140534.

[meta-codesync]

@coado merged this pull request in f535c97.