Add support for shadow props to AnimationBackend

Summary: Adds support for shadow color/offset/opacity/radius prop to the animation backend.

Differential Revision: D88007307

Author: coado

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp

@@ -85,9 +85,40 @@ void AnimatedPropsSerializer::packBackgroundColor(
     folly::dynamic& dyn,
     const AnimatedPropBase& animatedProp) {
   const auto& backgroundColor = get<SharedColor>(animatedProp);
-  if (backgroundColor) {
-    dyn.insert("backgroundColor", static_cast<int32_t>(*backgroundColor));
-  }
+  dyn.insert("backgroundColor", static_cast<int32_t>(*backgroundColor));
+}
+
+/* static */
+void packShadowColor(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  const auto& shadowColor = get<SharedColor>(animatedProp);
+  dyn.insert("shadowColor", static_cast<int32_t>(*shadowColor));
+}
+
+/* static */
+void packShadowOffset(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  const auto& shadowOffset = get<Size>(animatedProp);
+  dyn.insert(
+      "shadowOffset",
+      folly::dynamic::object("width", shadowOffset.width)(
+          "height", shadowOffset.height));
+}
+
+/* static */
+void packShadowOpacity(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  dyn.insert("shadowOpacity", get<Float>(animatedProp));
+}
+
+/* static */
+void packShadowRadius(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  dyn.insert("shadowRadius", get<Float>(animatedProp));
 }
 
 /* static */
@@ -111,6 +142,22 @@ void AnimatedPropsSerializer::packAnimatedProp(
       packBorderRadii(dyn, *animatedProp);
       break;
 
+    case SHADOW_COLOR:
+      packShadowColor(dyn, *animatedProp);
+      break;
+
+    case SHADOW_OFFSET:
+      packShadowOffset(dyn, *animatedProp);
+      break;
+
+    case SHADOW_OPACITY:
+      packShadowOpacity(dyn, *animatedProp);
+      break;
+
+    case SHADOW_RADIUS:
+      packShadowRadius(dyn, *animatedProp);
+      break;
+
     case WIDTH:
     case HEIGHT:
     case FLEX:

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedProps.h

@@ -12,7 +12,19 @@
 
 namespace facebook::react {
 
-enum PropName { OPACITY, WIDTH, HEIGHT, BORDER_RADII, FLEX, TRANSFORM, BACKGROUND_COLOR };
+enum PropName {
+  OPACITY,
+  WIDTH,
+  HEIGHT,
+  BORDER_RADII,
+  FLEX,
+  TRANSFORM,
+  BACKGROUND_COLOR,
+  SHADOW_COLOR,
+  SHADOW_OFFSET,
+  SHADOW_OPACITY,
+  SHADOW_RADIUS
+};
 
 struct AnimatedPropBase {
   PropName propName;
@@ -74,6 +86,25 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
     case BACKGROUND_COLOR:
       viewProps.backgroundColor = get<SharedColor>(animatedProp);
       break;
+
+    case SHADOW_COLOR:
+      viewProps.shadowColor = get<SharedColor>(animatedProp);
+      break;
+
+    case SHADOW_OFFSET:
+      viewProps.shadowOffset = get<Size>(animatedProp);
+      break;
+
+    case SHADOW_OPACITY:
+      viewProps.shadowOpacity = get<Float>(animatedProp);
+      break;
+
+    case SHADOW_RADIUS:
+      viewProps.shadowRadius = get<Float>(animatedProp);
+      break;
+
+    default:
+      break;
   }
 }
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsBuilder.h

@@ -39,6 +39,18 @@ struct AnimatedPropsBuilder {
   {
     props.push_back(std::make_unique<AnimatedProp<SharedColor>>(BACKGROUND_COLOR, value));
   }
+  void setShadowColor(SharedColor value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<SharedColor>>(SHADOW_COLOR, value));
+  }
+  void setShadowOpacity(Float value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<Float>>(SHADOW_OPACITY, value));
+  }
+  void setShadowRadius(Float value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<Float>>(SHADOW_RADIUS, value));
+  }
   void storeDynamic(folly::dynamic &d)
   {
     rawProps = std::make_unique<RawProps>(std::move(d));

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsSerializer.h

@@ -21,6 +21,10 @@ class AnimatedPropsSerializer {
   static void packBorderRadii(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
   static void packTransform(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
   static void packBackgroundColor(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
+  static void packShadowColor(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
+  static void packShadowOffset(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
+  static void packShadowOpacity(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
+  static void packShadowRadius(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
   static void
   packBorderRadiusCorner(folly::dynamic &dyn, const std::string &propName, const std::optional<ValueUnit> &cornerValue);
 };