@@ -159,7 +159,7 @@ static void updateBorderWidthPropValue(
     if (newValue.has_value()) {
       result[propName] = newValue.value();
     } else {
-      result[propName] = NULL;
+      result[propName] = nullptr;
     }
   }
 }
@@ -449,6 +449,56 @@ inline static void updateAccessibilityStateProp(
   result["accessibilityState"] = resultState;
 }
 
+static folly::dynamic toDynamic(
+    const std::variant<std::monostate, ValueUnit>& lengthPercentageOrAuto) {
+  const auto* valueUnit = std::get_if<ValueUnit>(&lengthPercentageOrAuto);
+  return valueUnit != nullptr ? valueUnit->toDynamic() : "auto";
+}
+
+static folly::dynamic toDynamic(const BackgroundSize& backgroundSize) {
+  if (const auto* keyword =
+          std::get_if<BackgroundSizeKeyword>(&backgroundSize)) {
+    return *keyword == BackgroundSizeKeyword::Cover ? "cover" : "contain";
+  }
+  const auto& size = std::get<BackgroundSizeLengthPercentage>(backgroundSize);
+  return folly::dynamic::object("x", toDynamic(size.x))("y", toDynamic(size.y));
+}
+
+// JS sends one edge per axis, but the parser keeps the default top and left
+// next to a bottom or right.
+static folly::dynamic toDynamic(const BackgroundPosition& backgroundPosition) {
+  folly::dynamic result = folly::dynamic::object();
+  if (backgroundPosition.bottom.has_value()) {
+    result["bottom"] = backgroundPosition.bottom->toDynamic();
+  } else if (backgroundPosition.top.has_value()) {
+    result["top"] = backgroundPosition.top->toDynamic();
+  }
+  if (backgroundPosition.right.has_value()) {
+    result["right"] = backgroundPosition.right->toDynamic();
+  } else if (backgroundPosition.left.has_value()) {
+    result["left"] = backgroundPosition.left->toDynamic();
+  }
+  return result;
+}
+
+static const char* toString(BackgroundRepeatStyle backgroundRepeatStyle) {
+  switch (backgroundRepeatStyle) {
+    case BackgroundRepeatStyle::Repeat:
+      return "repeat";
+    case BackgroundRepeatStyle::Space:
+      return "space";
+    case BackgroundRepeatStyle::Round:
+      return "round";
+    case BackgroundRepeatStyle::NoRepeat:
+      return "no-repeat";
+  }
+}
+
+static folly::dynamic toDynamic(const BackgroundRepeat& backgroundRepeat) {
+  return folly::dynamic::object("x", toString(backgroundRepeat.x))(
+      "y", toString(backgroundRepeat.y));
+}
+
 ComponentName HostPlatformViewProps::getDiffPropsImplementationTarget() const {
   return "View";
 }
@@ -528,7 +578,8 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
   }
 
   if (shadowColor != oldProps->shadowColor) {
-    result["shadowColor"] = *shadowColor;
+    result["shadowColor"] =
+        shadowColor ? folly::dynamic(*shadowColor) : folly::dynamic(nullptr);
   }
 
   if (shadowOpacity != oldProps->shadowOpacity) {
@@ -580,6 +631,18 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
     result["backgroundImage"] = toDynamic(backgroundImage);
   }
 
+  if (backgroundSize != oldProps->backgroundSize) {
+    result["backgroundSize"] = toDynamic(backgroundSize);
+  }
+
+  if (backgroundPosition != oldProps->backgroundPosition) {
+    result["backgroundPosition"] = toDynamic(backgroundPosition);
+  }
+
+  if (backgroundRepeat != oldProps->backgroundRepeat) {
+    result["backgroundRepeat"] = toDynamic(backgroundRepeat);
+  }
+
   if (mixBlendMode != oldProps->mixBlendMode) {
     result["mixBlendMode"] = toString(mixBlendMode);
   }
 
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <gtest/gtest.h>
+
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/test_utils/PropsPayloads.h>
+
+#ifdef RN_SERIALIZABLE_STATE
+
+namespace facebook::react {
+
+namespace {
+
+using folly::dynamic;
+
+void expectPayloads(const std::vector<PropsCommit>& commits) {
+  expectPayloadsMatchRawProps<ViewProps>(commits);
+}
+
+const auto kRed = static_cast<int32_t>(0xFFFF0000);
+
+} // namespace
+
+// ReactViewManager has setters for all three; with
+// enableExclusivePropsUpdateAndroid there is no rawProps fallback.
+TEST(ViewPropsDiffTest, emitsBackgroundSizePositionAndRepeat) {
+  expectPayloads({{dynamic::object(
+      "backgroundSize",
+      dynamic::array(
+          dynamic::object("x", "50%")("y", "auto"),
+          dynamic::object("x", 20)("y", "25%")))(
+      "backgroundPosition",
+      dynamic::array(
+          dynamic::object("top", "10%")("left", 5),
+          dynamic::object("bottom", 0)("right", "20%")))(
+      "backgroundRepeat",
+      dynamic::array(dynamic::object("x", "no-repeat")("y", "space")))}});
+}
+
+// The Android transform parser knows `perspective`, not `perspectiveX`.
+TEST(ViewPropsDiffTest, emitsPerspectiveUnderItsOwnName) {
+  expectPayloads({{dynamic::object(
+      "transform", dynamic::array(dynamic::object("perspective", 850)))}});
+}
+
+// ReactViewManager resets a side to `borderWidth` only for null (NaN); 0 keeps
+// the side at width 0.
+TEST(ViewPropsDiffTest, removingASideBorderWidthEmitsNull) {
+  expectPayloads({
+      {dynamic::object("borderWidth", 4)("borderLeftWidth", 12)},
+      {dynamic::object("borderLeftWidth", nullptr)},
+  });
+}
+
+// BoxShadow.parse defaults an absent color to black; 0 is transparent.
+TEST(ViewPropsDiffTest, boxShadowWithoutColorOmitsColor) {
+  expectPayloads({{dynamic::object(
+      "boxShadow",
+      dynamic::array(
+          dynamic::object("offsetX", 0)("offsetY", 4)("blurRadius", 8)(
+              "spreadDistance", 0)("inset", false)))}});
+}
+
+// FilterHelper defaults an absent drop shadow color to black; 0 is
+// transparent.
+TEST(ViewPropsDiffTest, dropShadowWithoutColorOmitsColor) {
+  expectPayloads({{dynamic::object(
+      "filter",
+      dynamic::array(
+          dynamic::object(
+              "dropShadow",
+              dynamic::object("offsetX", 0)("offsetY", 4)(
+                  "standardDeviation", 4))))}});
+}
+
+// BaseViewManager.setShadowColor resets to black for null; 0 makes the
+// elevation shadow transparent.
+TEST(ViewPropsDiffTest, removingShadowColorEmitsNull) {
+  expectPayloads({
+      {dynamic::object("elevation", 8)("shadowColor", kRed)},
+      {dynamic::object("shadowColor", nullptr)},
+  });
+}
+
+// The Android gradients treat a stop with a null color as a transition hint;
+// 0 is a transparent stop.
+TEST(ViewPropsDiffTest, gradientColorHintEmitsNullColor) {
+  expectPayloads({{dynamic::object(
+      "backgroundImage",
+      dynamic::array(
+          dynamic::object("type", "linear-gradient")(
+              "direction", dynamic::object("type", "angle")("value", 180))(
+              "colorStops",
+              dynamic::array(
+                  dynamic::object("color", kRed)("position", nullptr),
+                  dynamic::object("color", nullptr)("position", "20%"),
+                  dynamic::object("color", static_cast<int32_t>(0xFF0000FF))(
+                      "position", nullptr)))))}});
+}
+
+} // namespace facebook::react
+
+#endif
@@ -32,7 +32,9 @@ struct BoxShadow {
     result["offsetY"] = offsetY;
     result["blurRadius"] = blurRadius;
     result["spreadDistance"] = spreadDistance;
-    result["color"] = *color;
+    if (color) {
+      result["color"] = *color;
+    }
     result["inset"] = inset;
     return result;
   }
 
@@ -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"] = color ? folly::dynamic(*color) : folly::dynamic(nullptr);
   result["position"] = position.toDynamic();
   return result;
 }
 
@@ -102,7 +102,9 @@ struct DropShadowParams {
     result["offsetX"] = offsetX;
     result["offsetY"] = offsetY;
     result["standardDeviation"] = standardDeviation;
-    result["color"] = *color;
+    if (color) {
+      result["color"] = *color;
+    }
     return result;
   }
 #endif
 
@@ -75,7 +75,7 @@ inline void updateTransformProps(
       serializeTransformAxis(operation, "rotate", 0, resultTranslateArray);
       return;
     case TransformOperationType::Perspective:
-      serializeTransformAxis(operation, "perspective", 0, resultTranslateArray);
+      serializeTransformOperationValue("perspective", operation.x, resultTranslateArray);
       return;
     case TransformOperationType::Arbitrary: {
       folly::dynamic result = folly::dynamic::object();
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ namespace facebook::react {`
`12`	`12`	`#ifdef RN_SERIALIZABLE_STATE`
`13`	`13`	`folly::dynamic ColorStop::toDynamic() const {`
`14`	`14`	`folly::dynamic result = folly::dynamic::object();`
`15`		`- result["color"] = *color;`
	`15`	`+ result["color"] = color ? folly::dynamic(*color) : folly::dynamic(nullptr);`
`16`	`16`	`result["position"] = position.toDynamic();`
`17`	`17`	`return result;`
`18`	`18`	`}`