Add support for shadow props to AnimationBackend (#54728)

Summary:
Pull Request resolved: #54728

Adds support for `shadowColor`, `shadowOffset`, `shadowOpacity`, and `shadowRadius` props to the animation backend.

## Changelog:

[General][Added] - Added support for `shadowColor`, `shadowOffset`, `shadowOpacity`, and `shadowRadius` props to the animation backend.

Reviewed By: zeyap

Differential Revision: D88007307

fbshipit-source-id: ac12043d5d42ef17b3330abb687722b2aedf30b2

Author: coado

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

@@ -78,9 +78,36 @@ void 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));
+}
+
+void packShadowColor(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  const auto& shadowColor = get<SharedColor>(animatedProp);
+  dyn.insert("shadowColor", static_cast<int32_t>(*shadowColor));
+}
+
+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));
+}
+
+void packShadowOpacity(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  dyn.insert("shadowOpacity", get<Float>(animatedProp));
+}
+
+void packShadowRadius(
+    folly::dynamic& dyn,
+    const AnimatedPropBase& animatedProp) {
+  dyn.insert("shadowRadius", get<Float>(animatedProp));
 }
 
 void packAnimatedProp(
@@ -103,6 +130,22 @@ void 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,22 @@ 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 setShadowOffset(Size value)
+  {
+    props.push_back(std::make_unique<AnimatedProp<Size>>(SHADOW_OFFSET, value));
+  }
   void storeDynamic(folly::dynamic &d)
   {
     rawProps = std::make_unique<RawProps>(std::move(d));