Distinguish transparent colors from undefined props (#58093)

Summary:
Fixes #58085.

Android represents both an undefined color and explicit transparent black as ARGB `0`. `SharedColor` previously compared only that raw value, so Props 2.0 considered an explicitly supplied transparent color equal to an absent prop and omitted it from the mount diff.

This change tracks color presence separately from the platform value and includes it in equality, boolean conversion, and hashing. Platform parsers and the few call sites that intentionally produce an undefined color now preserve that state explicitly.

## Changelog:

[ANDROID] [FIXED] - Preserve explicitly transparent colors during Props 2.0 reconciliation.

Pull Request resolved: #58093

Test Plan:
- Added `ColorTest.testTransparentColorIsDistinctFromUndefined`.
- Compiled and ran a standalone regression harness against Android `Color.cpp`; it failed before this change and passes afterward.
- Built `ReactAndroid` CMake Debug for `arm64-v8a` successfully.
- Validated all 9 ReactCommon, ReactAndroid, and ReactApple C++ API snapshots against Doxygen 1.16.1.
- Ran targeted clang-format and `git diff --check`.

Reviewed By: javache

Differential Revision: D117292692

Pulled By: Abbondanzo

fbshipit-source-id: 08120b7eb805dbed06cd76b6bd14fe29a556d88e

Author: ngocdevv

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput/AndroidTextInputProps.cpp

@@ -138,7 +138,7 @@ AndroidTextInputProps::AndroidTextInputProps(
           "textTransform",
           sourceProps.textTransform,
           {})),
-      color(0 /*convertRawProp(context, rawProps, "color", sourceProps.color, {0})*/),
+      color(/*convertRawProp(context, rawProps, "color", sourceProps.color, {})*/),
       letterSpacing(convertRawProp(context, rawProps,
           "letterSpacing",
           sourceProps.letterSpacing,

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput/AndroidTextInputProps.h

@@ -105,7 +105,7 @@ class AndroidTextInputProps final : public BaseTextInputProps {
   AndroidTextInputTextShadowOffsetStruct textShadowOffset{};
   Float lineHeight{0.0};
   std::string textTransform{};
-  SharedColor color{0};
+  SharedColor color{};
   Float letterSpacing{0.0};
   Float fontSize{0.0};
   std::string textAlign{};

packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -309,7 +309,8 @@ static void updateBorderColorPropValue(
     const std::optional<SharedColor>& newColor,
     const std::optional<SharedColor>& oldColor) {
   if (newColor != oldColor) {
-    result[propName] = newColor.has_value() ? *newColor.value() : NULL;
+    result[propName] = newColor.has_value() ? folly::dynamic(*newColor.value())
+                                            : folly::dynamic(nullptr);
   }
 }
 

packages/react-native/ReactCommon/react/renderer/core/propsConversions.h

@@ -17,6 +17,11 @@ namespace facebook::react {
 
 #ifdef RN_SERIALIZABLE_STATE
 
+inline folly::dynamic toDynamic(uint32_t value)
+{
+  return value;
+}
+
 inline folly::dynamic toDynamic(const std::vector<bool> &arrayValue)
 {
   folly::dynamic resultArray = folly::dynamic::array();

packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/HostPlatformColor.h

@@ -8,56 +8,91 @@
 #pragma once
 
 #include <react/renderer/graphics/ColorComponents.h>
+#include <react/utils/hash_combine.h>
 #include <cmath>
+#include <cstdint>
+
+#ifdef RN_SERIALIZABLE_STATE
+#include <folly/dynamic.h>
+#endif
 
 namespace facebook::react {
 
-using Color = int32_t;
+struct Color {
+  int32_t value{0};
+  bool isDefined{false};
+
+  constexpr Color() = default;
+  constexpr Color(int32_t colorValue) : value(colorValue), isDefined(true) {}
+
+  constexpr bool operator==(const Color &otherColor) const
+  {
+    return value == otherColor.value && isDefined == otherColor.isDefined;
+  }
+
+  constexpr bool operator!=(const Color &otherColor) const
+  {
+    return !(*this == otherColor);
+  }
+
+  constexpr operator int32_t() const
+  {
+    return value;
+  }
+
+#ifdef RN_SERIALIZABLE_STATE
+  operator folly::dynamic() const
+  {
+    return value;
+  }
+#endif
+};
 
 namespace HostPlatformColor {
-constexpr facebook::react::Color UndefinedColor = 0;
+constexpr facebook::react::Color UndefinedColor{};
 }
 
 inline Color hostPlatformColorFromRGBA(uint8_t r, uint8_t g, uint8_t b, uint8_t a)
 {
-  return (a & 0xff) << 24 | (r & 0xff) << 16 | (g & 0xff) << 8 | (b & 0xff);
+  return Color{(a & 0xff) << 24 | (r & 0xff) << 16 | (g & 0xff) << 8 | (b & 0xff)};
 }
 
 inline Color hostPlatformColorFromComponents(ColorComponents components)
 {
   float ratio = 255;
-  return ((int)round(components.alpha * ratio) & 0xff) << 24 | ((int)round(components.red * ratio) & 0xff) << 16 |
-      ((int)round(components.green * ratio) & 0xff) << 8 | ((int)round(components.blue * ratio) & 0xff);
+  return Color{
+      ((int)round(components.alpha * ratio) & 0xff) << 24 | ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 | ((int)round(components.blue * ratio) & 0xff)};
 }
 
 inline ColorComponents colorComponentsFromHostPlatformColor(Color color)
 {
   float ratio = 255;
   return ColorComponents{
-      .red = (float)((color >> 16) & 0xff) / ratio,
-      .green = (float)((color >> 8) & 0xff) / ratio,
-      .blue = (float)((color >> 0) & 0xff) / ratio,
-      .alpha = (float)((color >> 24) & 0xff) / ratio};
+      .red = (float)((color.value >> 16) & 0xff) / ratio,
+      .green = (float)((color.value >> 8) & 0xff) / ratio,
+      .blue = (float)((color.value >> 0) & 0xff) / ratio,
+      .alpha = (float)((color.value >> 24) & 0xff) / ratio};
 }
 
 inline float alphaFromHostPlatformColor(Color color)
 {
-  return static_cast<float>((color >> 24) & 0xff);
+  return static_cast<float>((color.value >> 24) & 0xff);
 }
 
 inline float redFromHostPlatformColor(Color color)
 {
-  return static_cast<float>((color >> 16) & 0xff);
+  return static_cast<float>((color.value >> 16) & 0xff);
 }
 
 inline float greenFromHostPlatformColor(Color color)
 {
-  return static_cast<float>((color >> 8) & 0xff);
+  return static_cast<float>((color.value >> 8) & 0xff);
 }
 
 inline float blueFromHostPlatformColor(Color color)
 {
-  return static_cast<uint8_t>((color >> 0) & 0xff);
+  return static_cast<uint8_t>((color.value >> 0) & 0xff);
 }
 
 inline bool hostPlatformColorIsColorMeaningful(Color color) noexcept
@@ -66,3 +101,11 @@ inline bool hostPlatformColorIsColorMeaningful(Color color) noexcept
 }
 
 } // namespace facebook::react
+
+template <>
+struct std::hash<facebook::react::Color> {
+  size_t operator()(const facebook::react::Color &color) const
+  {
+    return facebook::react::hash_combine(color.value, color.isDefined);
+  }
+};

packages/react-native/ReactCommon/react/renderer/graphics/platform/android/react/renderer/graphics/PlatformColorParser.h

@@ -38,7 +38,7 @@ inline size_t hashGetColourArguments(int32_t surfaceId, const std::vector<std::s
 inline SharedColor
 parsePlatformColor(const ContextContainer &contextContainer, int32_t surfaceId, const RawValue &value)
 {
-  Color color = 0;
+  Color color{};
   if (value.hasType<std::unordered_map<std::string, RawValue>>()) {
     // Mixed array + string values, so read as a map of RawValue (a map of
     // vector<string> would assert on the fallback string).

packages/react-native/ReactCommon/react/renderer/graphics/tests/ColorTest.cpp

@@ -36,3 +36,18 @@ TEST(ColorTest, testColorConversion) {
     EXPECT_EQ(std::round(colorComponents.blue * 10) / 10.f, 0);
   }
 }
+
+#ifdef ANDROID
+TEST(ColorTest, testTransparentColorIsDistinctFromUndefined) {
+  using namespace facebook::react;
+
+  EXPECT_NE(Color{}, Color{0});
+
+  SharedColor undefinedColor;
+  auto transparentColor = clearColor();
+
+  EXPECT_FALSE(undefinedColor);
+  EXPECT_TRUE(transparentColor);
+  EXPECT_NE(undefinedColor, transparentColor);
+}
+#endif

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

@@ -610,7 +610,6 @@ using facebook::react::CascadedBorderCurves = facebook::react::CascadedRectangle
 using facebook::react::CascadedBorderRadii = facebook::react::CascadedRectangleCorners<facebook::react::ValueUnit>;
 using facebook::react::CascadedBorderStyles = facebook::react::CascadedRectangleEdges<facebook::react::BorderStyle>;
 using facebook::react::CascadedBorderWidths = facebook::react::CascadedRectangleEdges<facebook::react::Float>;
-using facebook::react::Color = int32_t;
 using facebook::react::ComponentDescriptorConstructor = facebook::react::ComponentDescriptor::Unique(const facebook::react::ComponentDescriptorParameters& parameters);
 using facebook::react::ComponentDescriptorProviderRequest = std::function<void(facebook::react::ComponentName componentName)>;
 using facebook::react::ComponentHandle = int64_t;
@@ -932,6 +931,7 @@ folly::dynamic facebook::react::toDynamic(const std::vector<facebook::react::Flo
 folly::dynamic facebook::react::toDynamic(const std::vector<folly::dynamic>& arrayValue);
 folly::dynamic facebook::react::toDynamic(const std::vector<int>& arrayValue);
 folly::dynamic facebook::react::toDynamic(const std::vector<std::string>& arrayValue);
+folly::dynamic facebook::react::toDynamic(uint32_t value);
 int facebook::react::toAndroidRepr(const facebook::react::SharedColor& color);
 int facebook::react::toInt(const facebook::react::DisplayType& displayType);
 int facebook::react::toInt(const facebook::react::LayoutDirection& layoutDirection);
@@ -7267,6 +7267,17 @@ struct facebook::react::CascadedRectangleEdgesNames {
   public const char* vertical;
 }
 
+struct facebook::react::Color {
+  public bool isDefined;
+  public constexpr Color() = default;
+  public constexpr Color(int32_t colorValue);
+  public constexpr bool operator!=(const facebook::react::Color& otherColor) const;
+  public constexpr bool operator==(const facebook::react::Color& otherColor) const;
+  public constexpr operator int32_t() const;
+  public int32_t value;
+  public operator folly::dynamic() const;
+}
+
 struct facebook::react::ColorComponents {
   public facebook::react::ColorSpace colorSpace;
   public float alpha;
@@ -14005,6 +14016,10 @@ struct std::hash<facebook::react::AttributedStringBox> {
   public size_t operator()(const facebook::react::AttributedStringBox& attributedStringBox) const;
 }
 
+struct std::hash<facebook::react::Color> {
+  public size_t operator()(const facebook::react::Color& color) const;
+}
+
 struct std::hash<facebook::react::EventAnimationDriverKey> {
   public size_t operator()(const facebook::react::EventAnimationDriverKey& key) const;
 }

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

@@ -609,7 +609,6 @@ using facebook::react::CascadedBorderCurves = facebook::react::CascadedRectangle
 using facebook::react::CascadedBorderRadii = facebook::react::CascadedRectangleCorners<facebook::react::ValueUnit>;
 using facebook::react::CascadedBorderStyles = facebook::react::CascadedRectangleEdges<facebook::react::BorderStyle>;
 using facebook::react::CascadedBorderWidths = facebook::react::CascadedRectangleEdges<facebook::react::Float>;
-using facebook::react::Color = int32_t;
 using facebook::react::ComponentDescriptorConstructor = facebook::react::ComponentDescriptor::Unique(const facebook::react::ComponentDescriptorParameters& parameters);
 using facebook::react::ComponentDescriptorProviderRequest = std::function<void(facebook::react::ComponentName componentName)>;
 using facebook::react::ComponentHandle = int64_t;
@@ -931,6 +930,7 @@ folly::dynamic facebook::react::toDynamic(const std::vector<facebook::react::Flo
 folly::dynamic facebook::react::toDynamic(const std::vector<folly::dynamic>& arrayValue);
 folly::dynamic facebook::react::toDynamic(const std::vector<int>& arrayValue);
 folly::dynamic facebook::react::toDynamic(const std::vector<std::string>& arrayValue);
+folly::dynamic facebook::react::toDynamic(uint32_t value);
 int facebook::react::toAndroidRepr(const facebook::react::SharedColor& color);
 int facebook::react::toInt(const facebook::react::DisplayType& displayType);
 int facebook::react::toInt(const facebook::react::LayoutDirection& layoutDirection);
@@ -7077,6 +7077,17 @@ struct facebook::react::CascadedRectangleEdgesNames {
   public const char* vertical;
 }
 
+struct facebook::react::Color {
+  public bool isDefined;
+  public constexpr Color() = default;
+  public constexpr Color(int32_t colorValue);
+  public constexpr bool operator!=(const facebook::react::Color& otherColor) const;
+  public constexpr bool operator==(const facebook::react::Color& otherColor) const;
+  public constexpr operator int32_t() const;
+  public int32_t value;
+  public operator folly::dynamic() const;
+}
+
 struct facebook::react::ColorComponents {
   public facebook::react::ColorSpace colorSpace;
   public float alpha;
@@ -13618,6 +13629,10 @@ struct std::hash<facebook::react::AttributedStringBox> {
   public size_t operator()(const facebook::react::AttributedStringBox& attributedStringBox) const;
 }
 
+struct std::hash<facebook::react::Color> {
+  public size_t operator()(const facebook::react::Color& color) const;
+}
+
 struct std::hash<facebook::react::EventAnimationDriverKey> {
   public size_t operator()(const facebook::react::EventAnimationDriverKey& key) const;
 }

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

@@ -610,7 +610,6 @@ using facebook::react::CascadedBorderCurves = facebook::react::CascadedRectangle
 using facebook::react::CascadedBorderRadii = facebook::react::CascadedRectangleCorners<facebook::react::ValueUnit>;
 using facebook::react::CascadedBorderStyles = facebook::react::CascadedRectangleEdges<facebook::react::BorderStyle>;
 using facebook::react::CascadedBorderWidths = facebook::react::CascadedRectangleEdges<facebook::react::Float>;
-using facebook::react::Color = int32_t;
 using facebook::react::ComponentDescriptorConstructor = facebook::react::ComponentDescriptor::Unique(const facebook::react::ComponentDescriptorParameters& parameters);
 using facebook::react::ComponentDescriptorProviderRequest = std::function<void(facebook::react::ComponentName componentName)>;
 using facebook::react::ComponentHandle = int64_t;
@@ -932,6 +931,7 @@ folly::dynamic facebook::react::toDynamic(const std::vector<facebook::react::Flo
 folly::dynamic facebook::react::toDynamic(const std::vector<folly::dynamic>& arrayValue);
 folly::dynamic facebook::react::toDynamic(const std::vector<int>& arrayValue);
 folly::dynamic facebook::react::toDynamic(const std::vector<std::string>& arrayValue);
+folly::dynamic facebook::react::toDynamic(uint32_t value);
 int facebook::react::toAndroidRepr(const facebook::react::SharedColor& color);
 int facebook::react::toInt(const facebook::react::DisplayType& displayType);
 int facebook::react::toInt(const facebook::react::LayoutDirection& layoutDirection);
@@ -7258,6 +7258,17 @@ struct facebook::react::CascadedRectangleEdgesNames {
   public const char* vertical;
 }
 
+struct facebook::react::Color {
+  public bool isDefined;
+  public constexpr Color() = default;
+  public constexpr Color(int32_t colorValue);
+  public constexpr bool operator!=(const facebook::react::Color& otherColor) const;
+  public constexpr bool operator==(const facebook::react::Color& otherColor) const;
+  public constexpr operator int32_t() const;
+  public int32_t value;
+  public operator folly::dynamic() const;
+}
+
 struct facebook::react::ColorComponents {
   public facebook::react::ColorSpace colorSpace;
   public float alpha;
@@ -13849,6 +13860,10 @@ struct std::hash<facebook::react::AttributedStringBox> {
   public size_t operator()(const facebook::react::AttributedStringBox& attributedStringBox) const;
 }
 
+struct std::hash<facebook::react::Color> {
+  public size_t operator()(const facebook::react::Color& color) const;
+}
+
 struct std::hash<facebook::react::EventAnimationDriverKey> {
   public size_t operator()(const facebook::react::EventAnimationDriverKey& key) const;
 }