Add support for PlatformColor type in AnimatedNodes and interpolation outputRange (#54459)

zeyap · meta-codesync[bot] · commit 7941a621f955 · 2025-11-17T09:49:42.000-08:00
Summary: Pull Request resolved: #54459 ## Changelog: [Android] [Added] Add c++ animated support for PlatformColor type of toValue and interpolation outputRange Reviewed By: sammy-SC Differential Revision: D86350392 fbshipit-source-id: f9ea02d444c54601306f0aa37afd3cb5d8f9b1e6
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp b/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp
@@ -73,11 +73,13 @@ thread_local bool NativeAnimatedNodesManager::isOnRenderThread_{false};
 NativeAnimatedNodesManager::NativeAnimatedNodesManager(
     DirectManipulationCallback&& directManipulationCallback,
     FabricCommitCallback&& fabricCommitCallback,
+    ResolvePlatformColor&& resolvePlatformColor,
     StartOnRenderCallback&& startOnRenderCallback,
     StopOnRenderCallback&& stopOnRenderCallback,
     FrameRateListenerCallback&& frameRateListenerCallback) noexcept
     : directManipulationCallback_(std::move(directManipulationCallback)),
       fabricCommitCallback_(std::move(fabricCommitCallback)),
+      resolvePlatformColor_(std::move(resolvePlatformColor)),
       startOnRenderCallback_(std::move(startOnRenderCallback)),
       stopOnRenderCallback_(std::move(stopOnRenderCallback)),
       frameRateListenerCallback_(std::move(frameRateListenerCallback)) {
@@ -847,6 +849,15 @@ bool NativeAnimatedNodesManager::isOnRenderThread() const noexcept {
   return isOnRenderThread_;
 }
 
+void NativeAnimatedNodesManager::resolvePlatformColor(
+    SurfaceId surfaceId,
+    const RawValue& value,
+    SharedColor& result) const {
+  if (resolvePlatformColor_) {
+    resolvePlatformColor_(surfaceId, value, result);
+  }
+}
+
 #pragma mark - Listeners
 
 void NativeAnimatedNodesManager::startListeningToAnimatedNodeValue(
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.h b/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.h
@@ -58,10 +58,12 @@ class NativeAnimatedNodesManager {
   using StartOnRenderCallback = std::function<void(std::function<void()> &&, bool isAsync)>;
   using StopOnRenderCallback = std::function<void(bool isAsync)>;
   using FrameRateListenerCallback = std::function<void(bool /* shouldEnableListener */)>;
+  using ResolvePlatformColor = std::function<void(SurfaceId surfaceId, const RawValue &value, SharedColor &result)>;
 
   explicit NativeAnimatedNodesManager(
       DirectManipulationCallback &&directManipulationCallback,
       FabricCommitCallback &&fabricCommitCallback,
+      ResolvePlatformColor &&resolvePlatformColor,
       StartOnRenderCallback &&startOnRenderCallback = nullptr,
       StopOnRenderCallback &&stopOnRenderCallback = nullptr,
       FrameRateListenerCallback &&frameRateListenerCallback = nullptr) noexcept;
@@ -185,6 +187,8 @@ class NativeAnimatedNodesManager {
 
   bool isOnRenderThread() const noexcept;
 
+  void resolvePlatformColor(SurfaceId surfaceId, const RawValue &value, SharedColor &result) const;
+
  private:
   void stopRenderCallbackIfNeeded(bool isAsync) noexcept;
 
@@ -233,6 +237,8 @@ class NativeAnimatedNodesManager {
   const DirectManipulationCallback directManipulationCallback_;
   const FabricCommitCallback fabricCommitCallback_;
 
+  const ResolvePlatformColor resolvePlatformColor_;
+
   /*
    * Tracks whether the render callback loop for animations is currently active.
    */
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManagerProvider.cpp b/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManagerProvider.cpp
@@ -14,6 +14,9 @@
 #ifdef RN_USE_ANIMATION_BACKEND
 #include <react/renderer/animationbackend/AnimationBackend.h>
 #endif
+#include <react/renderer/animated/internal/primitives.h>
+#include <react/renderer/components/view/conversions.h>
+#include <react/renderer/scheduler/Scheduler.h>
 #include <react/renderer/uimanager/UIManagerBinding.h>
 
 namespace facebook::react {
@@ -70,6 +73,24 @@ NativeAnimatedNodesManagerProvider::getOrCreate(
           uiManager->synchronouslyUpdateViewOnUIThread(viewTag, props);
         };
 
+    // TODO: remove force casting.
+    auto* scheduler = (Scheduler*)uiManager->getDelegate();
+    auto resolvePlatformColor = [scheduler, uiManager](
+                                    SurfaceId surfaceId,
+                                    const RawValue& value,
+                                    SharedColor& result) {
+      if (uiManager) {
+        if (surfaceId != animated::undefinedAnimatedNodeIdentifier) {
+          PropsParserContext propsParserContext{
+              surfaceId, *scheduler->getContextContainer()};
+          fromRawValue(propsParserContext, value, result);
+        } else {
+          LOG(ERROR)
+              << "Cannot resolve platformColor because surfaceId is unavailable.";
+        }
+      }
+    };
+
     if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
 #ifdef RN_USE_ANIMATION_BACKEND
       // TODO: this should be initialized outside of animated, but for now it
@@ -95,6 +116,7 @@ NativeAnimatedNodesManagerProvider::getOrCreate(
           std::make_shared<NativeAnimatedNodesManager>(
               std::move(directManipulationCallback),
               std::move(fabricCommitCallback),
+              std::move(resolvePlatformColor),
               std::move(startOnRenderCallback_),
               std::move(stopOnRenderCallback_),
               std::move(frameRateListenerCallback_));
@@ -128,8 +150,6 @@ NativeAnimatedNodesManagerProvider::getOrCreate(
 
     uiManager->setNativeAnimatedDelegate(nativeAnimatedDelegate_);
 
-    // TODO: remove force casting.
-    auto* scheduler = (Scheduler*)uiManager->getDelegate();
     animatedMountingOverrideDelegate_ =
         std::make_shared<AnimatedMountingOverrideDelegate>(
             *nativeAnimatedNodesManager_, *scheduler);
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/nodes/InterpolationAnimatedNode.cpp b/packages/react-native/ReactCommon/react/renderer/animated/nodes/InterpolationAnimatedNode.cpp
@@ -29,13 +29,19 @@ InterpolationAnimatedNode::InterpolationAnimatedNode(
     inputRanges_.push_back(rangeValue.asDouble());
   }
 
-  const bool isColorOutput = nodeConfig["outputType"].isString() &&
-      nodeConfig["outputType"].asString() == "color";
-  if (isColorOutput) {
+  const auto outputType = nodeConfig["outputType"].isString()
+      ? nodeConfig["outputType"].asString()
+      : "";
+  outputType_ = outputType;
+  if (outputType == "color") {
     isColorValue_ = true;
     for (const auto& rangeValue : nodeConfig["outputRange"]) {
       colorOutputRanges_.push_back(static_cast<int>(rangeValue.asInt()));
     }
+  } else if (outputType == "platform_color") {
+    for (const auto& rangeValue : nodeConfig["outputRange"]) {
+      platformColorOutputRanges_.push_back(rangeValue);
+    }
   } else {
     for (const auto& rangeValue : nodeConfig["outputRange"]) {
       defaultOutputRanges_.push_back(rangeValue.asDouble());
@@ -53,8 +59,10 @@ void InterpolationAnimatedNode::update() {
 
   if (const auto node =
           manager_->getAnimatedNode<ValueAnimatedNode>(parentTag_)) {
-    if (isColorValue_) {
+    if (outputType_ == "color") {
       setRawValue(interpolateColor(node->getValue()));
+    } else if (outputType_ == "platform_color") {
+      setRawValue(interpolatePlatformColor(node->getValue()));
     } else {
       setRawValue(interpolateValue(node->getValue()));
     }
@@ -141,4 +149,66 @@ double InterpolationAnimatedNode::interpolateColor(double value) {
       static_cast<uint8_t>(outputValueA)));
 }
 
+double InterpolationAnimatedNode::interpolatePlatformColor(double value) {
+  // Compute range index
+  size_t index = 1;
+  for (; index < inputRanges_.size() - 1; ++index) {
+    if (inputRanges_[index] >= value) {
+      break;
+    }
+  }
+  index--;
+  SharedColor outputMinSharedColor;
+  SharedColor outputMaxSharedColor;
+  if (manager_ != nullptr) {
+    manager_->resolvePlatformColor(
+        connectedRootTag_,
+        RawValue(platformColorOutputRanges_[index]),
+        outputMinSharedColor);
+    manager_->resolvePlatformColor(
+        connectedRootTag_,
+        RawValue(platformColorOutputRanges_[index + 1]),
+        outputMaxSharedColor);
+  }
+  auto outputMin = *outputMinSharedColor;
+  auto outputMax = *outputMaxSharedColor;
+
+  if (outputMin == outputMax) {
+    return outputMin;
+  }
+
+  const auto inputMin = inputRanges_[index];
+  const auto inputMax = inputRanges_[index + 1];
+  if (inputMin == inputMax) {
+    if (value <= inputMin) {
+      return static_cast<int32_t>(outputMin);
+    } else {
+      return static_cast<int32_t>(outputMax);
+    }
+  }
+
+  auto ratio = (value - inputMin) / (inputMax - inputMin);
+
+  auto outputMinA = alphaFromHostPlatformColor(outputMin);
+  auto outputMinR = redFromHostPlatformColor(outputMin);
+  auto outputMinG = greenFromHostPlatformColor(outputMin);
+  auto outputMinB = blueFromHostPlatformColor(outputMin);
+
+  auto outputMaxA = alphaFromHostPlatformColor(outputMax);
+  auto outputMaxR = redFromHostPlatformColor(outputMax);
+  auto outputMaxG = greenFromHostPlatformColor(outputMax);
+  auto outputMaxB = blueFromHostPlatformColor(outputMax);
+
+  auto outputValueA = ratio * (outputMaxA - outputMinA) + outputMinA;
+  auto outputValueR = ratio * (outputMaxR - outputMinR) + outputMinR;
+  auto outputValueG = ratio * (outputMaxG - outputMinG) + outputMinG;
+  auto outputValueB = ratio * (outputMaxB - outputMinB) + outputMinB;
+
+  return static_cast<int32_t>(hostPlatformColorFromRGBA(
+      static_cast<uint8_t>(outputValueR),
+      static_cast<uint8_t>(outputValueG),
+      static_cast<uint8_t>(outputValueB),
+      static_cast<uint8_t>(outputValueA)));
+}
+
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/nodes/InterpolationAnimatedNode.h b/packages/react-native/ReactCommon/react/renderer/animated/nodes/InterpolationAnimatedNode.h
@@ -29,13 +29,20 @@ class InterpolationAnimatedNode final : public ValueAnimatedNode {
  private:
   double interpolateValue(double value);
   double interpolateColor(double value);
+  double interpolatePlatformColor(double value);
 
   std::vector<double> inputRanges_;
   std::vector<double> defaultOutputRanges_;
   std::vector<Color> colorOutputRanges_;
+  std::vector<folly::dynamic> platformColorOutputRanges_;
   std::string extrapolateLeft_;
   std::string extrapolateRight_;
 
+  std::string outputType_;
+
   Tag parentTag_{animated::undefinedAnimatedNodeIdentifier};
+
+  // Needed for PlatformColor resolver
+  SurfaceId connectedRootTag_{animated::undefinedAnimatedNodeIdentifier};
 };
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/tests/AnimationTestsBase.h b/packages/react-native/ReactCommon/react/renderer/animated/tests/AnimationTestsBase.h
@@ -35,7 +35,8 @@ class AnimationTestsBase : public testing::Test {
             lastUpdatedNodeTag = nodesProps.begin()->first;
             lastCommittedProps = nodesProps.begin()->second;
           }
-        });
+        },
+        nullptr);
     NativeAnimatedNodesManager::isOnRenderThread_ = true;
   }
 

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,8 @@ class AnimationTestsBase : public testing::Test {`
`35`	`35`	`lastUpdatedNodeTag = nodesProps.begin()->first;`
`36`	`36`	`lastCommittedProps = nodesProps.begin()->second;`
`37`	`37`	`}`
`38`		`- });`
	`38`	`+ },`
	`39`	`+ nullptr);`
`39`	`40`	`NativeAnimatedNodesManager::isOnRenderThread_ = true;`
`40`	`41`	`}`
`41`	`42`