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

Summary:
Pull Request resolved: #57668

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:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[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: bartlomiejbloniarz

Author: hannojg

packages/react-native/React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.mm

@@ -11,9 +11,11 @@
 #import <React/RCTConversions.h>
 #import <React/RCTImageBlurUtils.h>
 #import <React/RCTImageResponseObserverProxy.h>
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/renderer/components/image/ImageComponentDescriptor.h>
 #import <react/renderer/components/image/ImageEventEmitter.h>
 #import <react/renderer/components/image/ImageProps.h>
+#import <react/renderer/graphics/Color.h>
 #import <react/renderer/imagemanager/ImageRequest.h>
 #import <react/renderer/imagemanager/RCTImagePrimitivesConversions.h>
 
@@ -63,7 +65,15 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 
   // `tintColor`
   if (oldImageProps.tintColor != newImageProps.tintColor) {
-    _imageView.tintColor = RCTUIColorFromSharedColor(newImageProps.tintColor);
+    if (ReactNativeFeatureFlags::enableImageTransparentTintColor()) {
+      if (newImageProps.tintColor.has_value()) {
+        _imageView.tintColor = RCTUIColorFromSharedColor(newImageProps.tintColor.value());
+      } else {
+        _imageView.tintColor = nil;
+      }
+    } else {
+      _imageView.tintColor = RCTUIColorFromSharedColor(newImageProps.tintColor.value_or(SharedColor{}));
+    }
   }
 
   [super updateProps:props oldProps:oldProps];

packages/react-native/ReactCommon/react/renderer/components/image/ImageProps.cpp

@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/components/image/ImageProps.h>
 #include <react/renderer/components/image/conversions.h>
 #include <react/renderer/core/propsConversions.h>
 #include <react/renderer/debug/debugStringConvertibleUtils.h>
+#include <react/renderer/graphics/Color.h>
 
 namespace facebook::react {
 
@@ -199,8 +201,24 @@ folly::dynamic ImageProps::getDiffProps(const Props* prevProps) const {
     result["capInsets"] = convertEdgeInsets(capInsets);
   }
 
-  if (tintColor != oldProps->tintColor) {
-    result["tintColor"] = *tintColor;
+  if (ReactNativeFeatureFlags::enableImageTransparentTintColor()) {
+    // New: emit any defined tint (including transparent); emit null to clear on
+    // unset.
+    if (tintColor != oldProps->tintColor) {
+      if (tintColor.has_value()) {
+        result["tintColor"] = *tintColor.value();
+      } else {
+        result["tintColor"] = folly::dynamic(nullptr);
+      }
+    }
+  } else {
+    // pre-`std::optional` behavior
+    SharedColor tintColorValue = tintColor.value_or(SharedColor{});
+    SharedColor prevTintColorValue =
+        oldProps->tintColor.value_or(SharedColor{});
+    if (tintColorValue != prevTintColorValue) {
+      result["tintColor"] = *tintColorValue;
+    }
   }
 
   if (internal_analyticTag != oldProps->internal_analyticTag) {

packages/react-native/ReactCommon/react/renderer/components/image/ImageProps.h

@@ -31,7 +31,7 @@ class ImageProps final : public ViewProps {
   ImageResizeMode resizeMode{ImageResizeMode::Stretch};
   Float blurRadius{};
   EdgeInsets capInsets{};
-  SharedColor tintColor{};
+  std::optional<SharedColor> tintColor{};
   std::string internal_analyticTag{};
   std::string resizeMethod{"auto"};
   Float resizeMultiplier{1.f};

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/ImageRequestParams.h

@@ -26,7 +26,7 @@ class ImageRequestParams {
       Float resizeMultiplier,
       bool shouldNotifyLoadEvents,
       SharedColor overlayColor,
-      SharedColor tintColor,
+      std::optional<SharedColor> tintColor,
       Float fadeDuration,
       bool progressiveRenderingEnabled,
       ImageSource loadingIndicatorSource,
@@ -55,7 +55,7 @@ class ImageRequestParams {
   Float resizeMultiplier{};
   bool shouldNotifyLoadEvents{};
   SharedColor overlayColor{};
-  SharedColor tintColor{};
+  std::optional<SharedColor> tintColor{};
   Float fadeDuration{};
   bool progressiveRenderingEnabled{};
   ImageSource loadingIndicatorSource{};

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/conversions.h

@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/imagemanager/ImageRequestParams.h>
 #include <react/renderer/imagemanager/primitives.h>
@@ -75,8 +76,16 @@ inline void serializeImageRequestParams(MapBufferBuilder &builder, const ImageRe
   if (isColorMeaningful(imageRequestParams.overlayColor)) {
     builder.putInt(IS_KEY_OVERLAY_COLOR, toAndroidRepr(imageRequestParams.overlayColor));
   }
-  if (isColorMeaningful(imageRequestParams.tintColor)) {
-    builder.putInt(IS_KEY_TINT_COLOR, toAndroidRepr(imageRequestParams.tintColor));
+  if (ReactNativeFeatureFlags::enableImageTransparentTintColor()) {
+    if (imageRequestParams.tintColor.has_value()) {
+      builder.putInt(IS_KEY_TINT_COLOR, toAndroidRepr(imageRequestParams.tintColor.value()));
+    }
+  } else {
+    // pre-`std::optional` behavior
+    SharedColor tintColor = imageRequestParams.tintColor.value_or(SharedColor{});
+    if (isColorMeaningful(tintColor)) {
+      builder.putInt(IS_KEY_TINT_COLOR, toAndroidRepr(tintColor));
+    }
   }
   builder.putInt(IS_KEY_FADE_DURATION, static_cast<int32_t>(imageRequestParams.fadeDuration));
   builder.putBool(IS_KEY_PROGRESSIVE_RENDERING_ENABLED, imageRequestParams.progressiveRenderingEnabled);

scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api

@@ -2594,7 +2594,7 @@ class facebook::react::ImageProps : public facebook::react::HostPlatformViewProp
   public facebook::react::ImageSource loadingIndicatorSource;
   public facebook::react::ImageSources sources;
   public facebook::react::SharedColor overlayColor;
-  public facebook::react::SharedColor tintColor;
+  public std::optional<facebook::react::SharedColor> tintColor;
   public std::string resizeMethod;
   public virtual facebook::react::ComponentName getDiffPropsImplementationTarget() const override;
   public virtual folly::dynamic getDiffProps(const facebook::react::Props* prevProps) const override;
@@ -2616,7 +2616,7 @@ class facebook::react::ImageRequest {
 
 class facebook::react::ImageRequestParams {
   public ImageRequestParams() = default;
-  public ImageRequestParams(facebook::react::Float blurRadius, facebook::react::ImageSource defaultSource, facebook::react::ImageResizeMode resizeMode, std::string resizeMethod, facebook::react::Float resizeMultiplier, bool shouldNotifyLoadEvents, facebook::react::SharedColor overlayColor, facebook::react::SharedColor tintColor, facebook::react::Float fadeDuration, bool progressiveRenderingEnabled, facebook::react::ImageSource loadingIndicatorSource, std::string analyticTag, facebook::react::Size size);
+  public ImageRequestParams(facebook::react::Float blurRadius, facebook::react::ImageSource defaultSource, facebook::react::ImageResizeMode resizeMode, std::string resizeMethod, facebook::react::Float resizeMultiplier, bool shouldNotifyLoadEvents, facebook::react::SharedColor overlayColor, std::optional<facebook::react::SharedColor> tintColor, facebook::react::Float fadeDuration, bool progressiveRenderingEnabled, facebook::react::ImageSource loadingIndicatorSource, std::string analyticTag, facebook::react::Size size);
   public bool operator==(const facebook::react::ImageRequestParams& rhs) const = default;
   public bool progressiveRenderingEnabled;
   public bool shouldNotifyLoadEvents;
@@ -2627,8 +2627,8 @@ class facebook::react::ImageRequestParams {
   public facebook::react::ImageSource defaultSource;
   public facebook::react::ImageSource loadingIndicatorSource;
   public facebook::react::SharedColor overlayColor;
-  public facebook::react::SharedColor tintColor;
   public facebook::react::Size size;
+  public std::optional<facebook::react::SharedColor> tintColor;
   public std::string analyticTag;
   public std::string resizeMethod;
 }

scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api

@@ -2576,7 +2576,7 @@ class facebook::react::ImageProps : public facebook::react::HostPlatformViewProp
   public facebook::react::ImageSource loadingIndicatorSource;
   public facebook::react::ImageSources sources;
   public facebook::react::SharedColor overlayColor;
-  public facebook::react::SharedColor tintColor;
+  public std::optional<facebook::react::SharedColor> tintColor;
   public std::string resizeMethod;
   public virtual facebook::react::ComponentName getDiffPropsImplementationTarget() const override;
   public virtual folly::dynamic getDiffProps(const facebook::react::Props* prevProps) const override;
@@ -2598,7 +2598,7 @@ class facebook::react::ImageRequest {
 
 class facebook::react::ImageRequestParams {
   public ImageRequestParams() = default;
-  public ImageRequestParams(facebook::react::Float blurRadius, facebook::react::ImageSource defaultSource, facebook::react::ImageResizeMode resizeMode, std::string resizeMethod, facebook::react::Float resizeMultiplier, bool shouldNotifyLoadEvents, facebook::react::SharedColor overlayColor, facebook::react::SharedColor tintColor, facebook::react::Float fadeDuration, bool progressiveRenderingEnabled, facebook::react::ImageSource loadingIndicatorSource, std::string analyticTag, facebook::react::Size size);
+  public ImageRequestParams(facebook::react::Float blurRadius, facebook::react::ImageSource defaultSource, facebook::react::ImageResizeMode resizeMode, std::string resizeMethod, facebook::react::Float resizeMultiplier, bool shouldNotifyLoadEvents, facebook::react::SharedColor overlayColor, std::optional<facebook::react::SharedColor> tintColor, facebook::react::Float fadeDuration, bool progressiveRenderingEnabled, facebook::react::ImageSource loadingIndicatorSource, std::string analyticTag, facebook::react::Size size);
   public bool operator==(const facebook::react::ImageRequestParams& rhs) const = default;
   public bool progressiveRenderingEnabled;
   public bool shouldNotifyLoadEvents;
@@ -2609,8 +2609,8 @@ class facebook::react::ImageRequestParams {
   public facebook::react::ImageSource defaultSource;
   public facebook::react::ImageSource loadingIndicatorSource;
   public facebook::react::SharedColor overlayColor;
-  public facebook::react::SharedColor tintColor;
   public facebook::react::Size size;
+  public std::optional<facebook::react::SharedColor> tintColor;
   public std::string analyticTag;
   public std::string resizeMethod;
 }

scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api

@@ -2591,7 +2591,7 @@ class facebook::react::ImageProps : public facebook::react::HostPlatformViewProp
   public facebook::react::ImageSource loadingIndicatorSource;
   public facebook::react::ImageSources sources;
   public facebook::react::SharedColor overlayColor;
-  public facebook::react::SharedColor tintColor;
+  public std::optional<facebook::react::SharedColor> tintColor;
   public std::string resizeMethod;
   public virtual facebook::react::ComponentName getDiffPropsImplementationTarget() const override;
   public virtual folly::dynamic getDiffProps(const facebook::react::Props* prevProps) const override;
@@ -2613,7 +2613,7 @@ class facebook::react::ImageRequest {
 
 class facebook::react::ImageRequestParams {
   public ImageRequestParams() = default;
-  public ImageRequestParams(facebook::react::Float blurRadius, facebook::react::ImageSource defaultSource, facebook::react::ImageResizeMode resizeMode, std::string resizeMethod, facebook::react::Float resizeMultiplier, bool shouldNotifyLoadEvents, facebook::react::SharedColor overlayColor, facebook::react::SharedColor tintColor, facebook::react::Float fadeDuration, bool progressiveRenderingEnabled, facebook::react::ImageSource loadingIndicatorSource, std::string analyticTag, facebook::react::Size size);
+  public ImageRequestParams(facebook::react::Float blurRadius, facebook::react::ImageSource defaultSource, facebook::react::ImageResizeMode resizeMode, std::string resizeMethod, facebook::react::Float resizeMultiplier, bool shouldNotifyLoadEvents, facebook::react::SharedColor overlayColor, std::optional<facebook::react::SharedColor> tintColor, facebook::react::Float fadeDuration, bool progressiveRenderingEnabled, facebook::react::ImageSource loadingIndicatorSource, std::string analyticTag, facebook::react::Size size);
   public bool operator==(const facebook::react::ImageRequestParams& rhs) const = default;
   public bool progressiveRenderingEnabled;
   public bool shouldNotifyLoadEvents;
@@ -2624,8 +2624,8 @@ class facebook::react::ImageRequestParams {
   public facebook::react::ImageSource defaultSource;
   public facebook::react::ImageSource loadingIndicatorSource;
   public facebook::react::SharedColor overlayColor;
-  public facebook::react::SharedColor tintColor;
   public facebook::react::Size size;
+  public std::optional<facebook::react::SharedColor> tintColor;
   public std::string analyticTag;
   public std::string resizeMethod;
 }

scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api

@@ -5008,7 +5008,7 @@ class facebook::react::ImageProps : public facebook::react::HostPlatformViewProp
   public facebook::react::ImageSource loadingIndicatorSource;
   public facebook::react::ImageSources sources;
   public facebook::react::SharedColor overlayColor;
-  public facebook::react::SharedColor tintColor;
+  public std::optional<facebook::react::SharedColor> tintColor;
   public std::string resizeMethod;
   public void setProp(const facebook::react::PropsParserContext& context, facebook::react::RawPropsPropNameHash hash, const char* propName, const facebook::react::RawValue& value);
 }

scripts/cxx-api/api-snapshots/ReactAppleNewarchCxx.api

@@ -4979,7 +4979,7 @@ class facebook::react::ImageProps : public facebook::react::HostPlatformViewProp
   public facebook::react::ImageSource loadingIndicatorSource;
   public facebook::react::ImageSources sources;
   public facebook::react::SharedColor overlayColor;
-  public facebook::react::SharedColor tintColor;
+  public std::optional<facebook::react::SharedColor> tintColor;
   public std::string resizeMethod;
   public void setProp(const facebook::react::PropsParserContext& context, facebook::react::RawPropsPropNameHash hash, const char* propName, const facebook::react::RawValue& value);
 }