Distinguish transparent colors from undefined props

packages/react-native-codegen/src/generators/components/GeneratePropsCpp.js

@@ -165,15 +165,15 @@ function generatePropsDiffString(
                 return `
   if (${prop.name} != oldProps->${prop.name}) {
     if (${prop.name}.has_value()) {
-      result["${prop.name}"] = *${prop.name}.value();
+      result["${prop.name}"] = static_cast<int32_t>(*${prop.name}.value());
     } else {
       result["${prop.name}"] = folly::dynamic(nullptr);
     }
   }`;
               } else {
                 return `
   if (${prop.name} != oldProps->${prop.name}) {
-    result["${prop.name}"] = *${prop.name};
+    result["${prop.name}"] = static_cast<int32_t>(*${prop.name});
   }`;
               }
             case 'ImageSourcePrimitive':

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GeneratePropsCpp-test.js.snap

@@ -1141,7 +1141,7 @@ folly::dynamic ColorPropNativeComponentProps::getDiffProps(
   folly::dynamic result = HostPlatformViewProps::getDiffProps(prevProps);
 
   if (tintColor != oldProps->tintColor) {
-    result[\\"tintColor\\"] = *tintColor;
+    result[\\"tintColor\\"] = static_cast<int32_t>(*tintColor);
   }
   return result;
 }
@@ -2180,11 +2180,11 @@ folly::dynamic ImageColorPropNativeComponentProps::getDiffProps(
   }
 
   if (color != oldProps->color) {
-    result[\\"color\\"] = *color;
+    result[\\"color\\"] = static_cast<int32_t>(*color);
   }
 
   if (thumbTintColor != oldProps->thumbTintColor) {
-    result[\\"thumbTintColor\\"] = *thumbTintColor;
+    result[\\"thumbTintColor\\"] = static_cast<int32_t>(*thumbTintColor);
   }
 
   if (point != oldProps->point) {

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

@@ -210,7 +210,7 @@ folly::dynamic ImageProps::getDiffProps(const Props* prevProps) const {
     // unset.
     if (tintColor != oldProps->tintColor) {
       if (tintColor.has_value()) {
-        result["tintColor"] = *tintColor.value();
+        result["tintColor"] = static_cast<int32_t>(*tintColor.value());
       } else {
         result["tintColor"] = folly::dynamic(nullptr);
       }
@@ -221,7 +221,7 @@ folly::dynamic ImageProps::getDiffProps(const Props* prevProps) const {
     SharedColor prevTintColorValue =
         oldProps->tintColor.value_or(SharedColor{});
     if (tintColorValue != prevTintColorValue) {
-      result["tintColor"] = *tintColorValue;
+      result["tintColor"] = static_cast<int32_t>(*tintColorValue);
     }
   }
 
@@ -242,7 +242,7 @@ folly::dynamic ImageProps::getDiffProps(const Props* prevProps) const {
   }
 
   if (overlayColor != oldProps->overlayColor) {
-    result["overlayColor"] = *overlayColor;
+    result["overlayColor"] = static_cast<int32_t>(*overlayColor);
   }
 
   if (fadeDuration != oldProps->fadeDuration) {

packages/react-native/ReactCommon/react/renderer/components/scrollview/platform/android/react/renderer/components/scrollview/HostPlatformScrollViewProps.cpp

@@ -377,7 +377,7 @@ folly::dynamic HostPlatformScrollViewProps::getDiffProps(
   }
 
   if (endFillColor != oldProps->endFillColor) {
-    result["endFillColor"] = *endFillColor;
+    result["endFillColor"] = static_cast<int32_t>(*endFillColor);
   }
 
   return result;

packages/react-native/ReactCommon/react/renderer/components/text/BaseTextProps.cpp

@@ -369,7 +369,7 @@ void BaseTextProps::appendTextAttributesProps(
     const BaseTextProps* oldProps) const {
   if (textAttributes.foregroundColor !=
       oldProps->textAttributes.foregroundColor) {
-    result["color"] = *textAttributes.foregroundColor;
+    result["color"] = static_cast<int32_t>(*textAttributes.foregroundColor);
   }
 
   if (textAttributes.fontFamily != oldProps->textAttributes.fontFamily) {
@@ -480,7 +480,8 @@ void BaseTextProps::appendTextAttributesProps(
 
   if (textAttributes.textDecorationColor !=
       oldProps->textAttributes.textDecorationColor) {
-    result["textDecorationColor"] = *textAttributes.textDecorationColor;
+    result["textDecorationColor"] =
+        static_cast<int32_t>(*textAttributes.textDecorationColor);
   }
 
   if (textAttributes.textDecorationLineType !=
@@ -514,7 +515,8 @@ void BaseTextProps::appendTextAttributesProps(
 
   if (textAttributes.textShadowColor !=
       oldProps->textAttributes.textShadowColor) {
-    result["textShadowColor"] = *textAttributes.textShadowColor;
+    result["textShadowColor"] =
+        static_cast<int32_t>(*textAttributes.textShadowColor);
   }
 
   if (textAttributes.isHighlighted != oldProps->textAttributes.isHighlighted) {
@@ -549,7 +551,8 @@ void BaseTextProps::appendTextAttributesProps(
 
   if (textAttributes.backgroundColor !=
       oldProps->textAttributes.backgroundColor) {
-    result["backgroundColor"] = *textAttributes.backgroundColor;
+    result["backgroundColor"] =
+        static_cast<int32_t>(*textAttributes.backgroundColor);
   }
 }
 

packages/react-native/ReactCommon/react/renderer/components/text/platform/android/react/renderer/components/text/HostPlatformParagraphProps.cpp

@@ -167,7 +167,7 @@ folly::dynamic HostPlatformParagraphProps::getDiffProps(
 
   if (selectionColor != oldProps->selectionColor) {
     if (selectionColor.has_value()) {
-      result["selectionColor"] = *selectionColor.value();
+      result["selectionColor"] = static_cast<int32_t>(*selectionColor.value());
     } else {
       result["selectionColor"] = folly::dynamic(nullptr);
     }

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,
@@ -432,23 +432,26 @@ folly::dynamic AndroidTextInputProps::getDiffProps(
   }
 
   if (placeholderTextColor != oldProps->placeholderTextColor) {
-    result["placeholderTextColor"] = *placeholderTextColor;
+    result["placeholderTextColor"] =
+        static_cast<int32_t>(*placeholderTextColor);
   }
 
   if (cursorColor != oldProps->cursorColor) {
-    result["cursorColor"] = *cursorColor;
+    result["cursorColor"] = static_cast<int32_t>(*cursorColor);
   }
 
   if (selectionColor != oldProps->selectionColor) {
-    result["selectionColor"] = *selectionColor;
+    result["selectionColor"] = static_cast<int32_t>(*selectionColor);
   }
 
   if (selectionHandleColor != oldProps->selectionHandleColor) {
-    result["selectionHandleColor"] = *selectionHandleColor;
+    result["selectionHandleColor"] =
+        static_cast<int32_t>(*selectionHandleColor);
   }
 
   if (underlineColorAndroid != oldProps->underlineColorAndroid) {
-    result["underlineColorAndroid"] = *underlineColorAndroid;
+    result["underlineColorAndroid"] =
+        static_cast<int32_t>(*underlineColorAndroid);
   }
 
   if (maxLength != oldProps->maxLength) {
@@ -575,7 +578,7 @@ folly::dynamic AndroidTextInputProps::getDiffProps(
   }
 
   if (textShadowColor != oldProps->textShadowColor) {
-    result["textShadowColor"] = *textShadowColor;
+    result["textShadowColor"] = static_cast<int32_t>(*textShadowColor);
   }
 
   if (textShadowRadius != oldProps->textShadowRadius) {

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() ? static_cast<int32_t>(*newColor.value()) : NULL;
   }
 }
 
@@ -502,11 +503,11 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
   }
 
   if (backgroundColor != oldProps->backgroundColor) {
-    result["backgroundColor"] = *backgroundColor;
+    result["backgroundColor"] = static_cast<int32_t>(*backgroundColor);
   }
 
   if (outlineColor != oldProps->outlineColor) {
-    result["outlineColor"] = *outlineColor;
+    result["outlineColor"] = static_cast<int32_t>(*outlineColor);
   }
 
   if (outlineOffset != oldProps->outlineOffset) {
@@ -532,7 +533,7 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
   }
 
   if (shadowColor != oldProps->shadowColor) {
-    result["shadowColor"] = *shadowColor;
+    result["shadowColor"] = static_cast<int32_t>(*shadowColor);
   }
 
   if (shadowOpacity != oldProps->shadowOpacity) {

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/BoxShadow.h

@@ -30,7 +30,7 @@ struct BoxShadow {
     result["offsetY"] = offsetY;
     result["blurRadius"] = blurRadius;
     result["spreadDistance"] = spreadDistance;
-    result["color"] = *color;
+    result["color"] = static_cast<int32_t>(*color);
     result["inset"] = inset;
     return result;
   }

packages/react-native/ReactCommon/react/renderer/graphics/Color.h

@@ -81,7 +81,7 @@ SharedColor whiteColor();
 #ifdef RN_SERIALIZABLE_STATE
 inline folly::dynamic toDynamic(const SharedColor &sharedColor)
 {
-  return *sharedColor;
+  return static_cast<int32_t>(*sharedColor);
 }
 #endif
 

packages/react-native/ReactCommon/react/renderer/graphics/ColorStop.cpp

@@ -12,7 +12,7 @@ namespace facebook::react {
 #ifdef RN_SERIALIZABLE_STATE
 folly::dynamic ColorStop::toDynamic() const {
   folly::dynamic result = folly::dynamic::object();
-  result["color"] = *color;
+  result["color"] = static_cast<int32_t>(*color);
   result["position"] = position.toDynamic();
   return result;
 }

packages/react-native/ReactCommon/react/renderer/graphics/Filter.h

@@ -100,7 +100,7 @@ struct DropShadowParams {
     result["offsetX"] = offsetX;
     result["offsetY"] = offsetY;
     result["standardDeviation"] = standardDeviation;
-    result["color"] = *color;
+    result["color"] = static_cast<int32_t>(*color);
     return result;
   }
 #endif

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

@@ -8,56 +8,80 @@
 #pragma once
 
 #include <react/renderer/graphics/ColorComponents.h>
+#include <react/utils/hash_combine.h>
 #include <cmath>
+#include <cstdint>
 
 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;
+  }
+};
 
 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 +90,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