background color

Author: coado

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

@@ -12,7 +12,15 @@
 
 namespace facebook::react {
 
-enum PropName { OPACITY, WIDTH, HEIGHT, BORDER_RADII, FLEX, TRANSFORM };
+enum PropName {
+  OPACITY,
+  WIDTH,
+  HEIGHT,
+  BORDER_RADII,
+  FLEX,
+  TRANSFORM,
+  BACKGROUND_COLOR
+};
 
 struct AnimatedPropBase {
   PropName propName;
@@ -24,13 +32,13 @@ template <typename T>
 struct AnimatedProp : AnimatedPropBase {
   T value;
   AnimatedProp() = default;
-  AnimatedProp(PropName propName, const T &value) : AnimatedPropBase{propName}, value(std::move(value)) {}
+  AnimatedProp(PropName propName, const T& value)
+      : AnimatedPropBase{propName}, value(std::move(value)) {}
 };
 
 template <typename T>
-T get(const std::unique_ptr<AnimatedPropBase> &animatedProp)
-{
-  return static_cast<AnimatedProp<T> *>(animatedProp.get())->value;
+T get(const std::unique_ptr<AnimatedPropBase>& animatedProp) {
+  return static_cast<AnimatedProp<T>*>(animatedProp.get())->value;
 }
 
 struct AnimatedProps {

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

@@ -15,36 +15,36 @@ struct AnimatedPropsBuilder {
   std::vector<std::unique_ptr<AnimatedPropBase>> props;
   std::unique_ptr<RawProps> rawProps;
 
-  void setOpacity(Float value)
-  {
+  void setOpacity(Float value) {
     props.push_back(std::make_unique<AnimatedProp<Float>>(OPACITY, value));
   }
-  void setWidth(yoga::Style::SizeLength value)
-  {
-    props.push_back(std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(WIDTH, value));
+  void setWidth(yoga::Style::SizeLength value) {
+    props.push_back(
+        std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(WIDTH, value));
   }
-  void setHeight(yoga::Style::SizeLength value)
-  {
-    props.push_back(std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(HEIGHT, value));
+  void setHeight(yoga::Style::SizeLength value) {
+    props.push_back(
+        std::make_unique<AnimatedProp<yoga::Style::SizeLength>>(HEIGHT, value));
   }
-  void setBorderRadii(CascadedBorderRadii &value)
-  {
-    props.push_back(std::make_unique<AnimatedProp<CascadedBorderRadii>>(BORDER_RADII, value));
+  void setBorderRadii(CascadedBorderRadii& value) {
+    props.push_back(std::make_unique<AnimatedProp<CascadedBorderRadii>>(
+        BORDER_RADII, value));
   }
-  void setTransform(Transform &t)
-  {
-    props.push_back(std::make_unique<AnimatedProp<Transform>>(TRANSFORM, std::move(t)));
+  void setTransform(Transform& t) {
+    props.push_back(
+        std::make_unique<AnimatedProp<Transform>>(TRANSFORM, std::move(t)));
   }
-  void storeDynamic(folly::dynamic &d)
-  {
+  void setBackgroundColor(SharedColor value) {
+    props.push_back(
+        std::make_unique<AnimatedProp<SharedColor>>(BACKGROUND_COLOR, value));
+  }
+  void storeDynamic(folly::dynamic& d) {
     rawProps = std::make_unique<RawProps>(std::move(d));
   }
-  void storeJSI(jsi::Runtime &runtime, jsi::Value &value)
-  {
+  void storeJSI(jsi::Runtime& runtime, jsi::Value& value) {
     rawProps = std::make_unique<RawProps>(runtime, value);
   }
-  AnimatedProps get()
-  {
+  AnimatedProps get() {
     return AnimatedProps{std::move(props), std::move(rawProps)};
   }
 };

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

@@ -6,6 +6,7 @@
  */
 
 #include "AnimationBackend.h"
+#include <react/renderer/graphics/Color.h>
 #include <chrono>
 
 namespace facebook::react {
@@ -68,6 +69,10 @@ static inline Props::Shared cloneProps(
       case TRANSFORM:
         viewProps->transform = get<Transform>(animatedProp);
         break;
+
+      case BACKGROUND_COLOR:
+        viewProps->backgroundColor = get<SharedColor>(animatedProp);
+        break;
     }
   }
   return newProps;
@@ -302,6 +307,17 @@ void AnimationBackend::synchronouslyUpdateProps(
           break;
         }
 
+        case BACKGROUND_COLOR: {
+          const auto& backgroundColor = get<SharedColor>(animatedProp);
+
+          if (backgroundColor) {
+            dyn.insert(
+                "backgroundColor", static_cast<int32_t>(*backgroundColor));
+          }
+
+          break;
+        }
+
         case WIDTH:
         case HEIGHT:
         case FLEX: