react-native-windows 0.70.7 → 0.71.0-preview.1

package/Microsoft.ReactNative/Modules/Animated/CalculatedAnimationDriver.h

@@ -13,12 +13,10 @@ class CalculatedAnimationDriver : public AnimationDriver {
   using AnimationDriver::AnimationDriver;
 
   std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> MakeAnimation(
-      const folly::dynamic &config) override;
+      const winrt::Microsoft::ReactNative::JSValueObject &config) override;
 
  protected:
   virtual std::tuple<float, double> GetValueAndVelocityForTime(double time) = 0;
-
   virtual bool IsAnimationDone(double currentValue, std::optional<double> previousValue, double currentVelocity) = 0;
-  double m_startValue{0};
 };
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/DecayAnimationDriver.cpp

@@ -11,17 +11,17 @@ DecayAnimationDriver::DecayAnimationDriver(
     int64_t id,
     int64_t animatedValueTag,
     const Callback &endCallback,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
     : CalculatedAnimationDriver(id, animatedValueTag, endCallback, config, manager) {
-  m_deceleration = config.find(s_decelerationName).dereference().second.asDouble();
+  m_deceleration = config[s_decelerationName].AsDouble();
   assert(m_deceleration > 0);
-  m_velocity = config.find(s_velocityName).dereference().second.asDouble();
+  m_velocity = config[s_velocityName].AsDouble();
 }
 
 std::tuple<float, double> DecayAnimationDriver::GetValueAndVelocityForTime(double time) {
-  const auto value =
-      m_startValue + m_velocity / (1 - m_deceleration) * (1 - std::exp(-(1 - m_deceleration) * (1000 * time)));
+  const auto value = m_originalValue.value() +
+      m_velocity / (1 - m_deceleration) * (1 - std::exp(-(1 - m_deceleration) * (1000 * time)));
   return std::make_tuple(static_cast<float>(value),
                          42.0f); // we don't need the velocity, so set it to a dummy value
 }
@@ -33,4 +33,30 @@ bool DecayAnimationDriver::IsAnimationDone(
   return previousValue.has_value() && std::abs(currentValue - previousValue.value()) < 0.1;
 }
 
+bool DecayAnimationDriver::Update(double timeDeltaMs, bool restarting) {
+  if (const auto node = GetAnimatedValue()) {
+    if (restarting) {
+      const auto value = node->RawValue();
+      if (!m_originalValue) {
+        // First iteration, assign m_fromValue based on AnimatedValue
+        m_originalValue = value;
+      } else {
+        // Not the first iteration, reset AnimatedValue based on m_originalValue
+        node->RawValue(m_originalValue.value());
+      }
+
+      m_lastValue = value;
+    }
+
+    const auto [value, velocity] = GetValueAndVelocityForTime(timeDeltaMs / 1000.0);
+    if (restarting || IsAnimationDone(value, m_lastValue, 0.0 /* ignored */)) {
+      m_lastValue = value;
+      node->RawValue(value);
+      return false;
+    }
+  }
+
+  return true;
+}
+
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/DecayAnimationDriver.h

@@ -13,16 +13,18 @@ class DecayAnimationDriver : public CalculatedAnimationDriver {
       int64_t id,
       int64_t animatedValueTag,
       const Callback &endCallback,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
  protected:
+  bool Update(double timeDeltaMs, bool restarting) override;
   std::tuple<float, double> GetValueAndVelocityForTime(double time) override;
   bool IsAnimationDone(double currentValue, std::optional<double> previousValue, double currentVelocity) override;
 
  private:
   double m_velocity{0};
   double m_deceleration{0};
+  double m_lastValue{0};
 
   static constexpr std::string_view s_velocityName{"velocity"};
   static constexpr std::string_view s_decelerationName{"deceleration"};

package/Microsoft.ReactNative/Modules/Animated/DiffClampAnimatedNode.cpp

@@ -9,22 +9,37 @@
 namespace Microsoft::ReactNative {
 DiffClampAnimatedNode::DiffClampAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : ValueAnimatedNode(tag, manager) {
-  m_inputNodeTag = static_cast<int64_t>(config.find(s_inputName).dereference().second.asDouble());
-  m_min = config.find(s_minName).dereference().second.asDouble();
-  m_max = config.find(s_maxName).dereference().second.asDouble();
+    : ValueAnimatedNode(tag, config, manager) {
+  m_inputNodeTag = static_cast<int64_t>(config[s_inputName].AsDouble());
+  assert(HasCompatibleAnimationDriver(m_inputNodeTag));
+  m_min = config[s_minName].AsDouble();
+  m_max = config[s_maxName].AsDouble();
 
-  m_propertySet.StartAnimation(s_valueName, [node = m_inputNodeTag, min = m_min, max = m_max, manager]() {
-    const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
-    anim.SetReferenceParameter(s_inputParameterName, manager->GetValueAnimatedNode(node)->PropertySet());
-    anim.SetScalarParameter(s_minParameterName, static_cast<float>(min));
-    anim.SetScalarParameter(s_maxParameterName, static_cast<float>(max));
-    anim.Expression(
-        static_cast<winrt::hstring>(L"Clamp(") + s_inputParameterName + L"." + s_valueName + L" + " +
-        s_inputParameterName + L"." + s_offsetName + L", " + s_minParameterName + L", " + s_maxParameterName + L")");
-    return anim;
-  }());
+  if (m_useComposition) {
+    m_propertySet.StartAnimation(s_valueName, [node = m_inputNodeTag, min = m_min, max = m_max, manager]() {
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
+      anim.SetReferenceParameter(s_inputParameterName, manager->GetValueAnimatedNode(node)->PropertySet());
+      anim.SetScalarParameter(s_minParameterName, static_cast<float>(min));
+      anim.SetScalarParameter(s_maxParameterName, static_cast<float>(max));
+      anim.Expression(
+          static_cast<winrt::hstring>(L"Clamp(") + s_inputParameterName + L"." + s_valueName + L" + " +
+          s_inputParameterName + L"." + s_offsetName + L", " + s_minParameterName + L", " + s_maxParameterName + L")");
+      return anim;
+    }());
+  }
+}
+
+void DiffClampAnimatedNode::Update() {
+  assert(!m_useComposition);
+  if (const auto manager = m_manager.lock()) {
+    if (const auto node = manager->GetValueAnimatedNode(m_inputNodeTag)) {
+      const auto value = node->Value();
+      const auto diff = value - m_lastValue;
+      m_lastValue = value;
+      RawValue(std::clamp(Value() + diff, m_min, m_max));
+    }
+  }
 }
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/DiffClampAnimatedNode.h

@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 
 #pragma once
-#include <folly/dynamic.h>
 #include "ValueAnimatedNode.h"
 
 namespace Microsoft::ReactNative {
@@ -10,13 +9,16 @@ class DiffClampAnimatedNode final : public ValueAnimatedNode {
  public:
   DiffClampAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
+  virtual void Update() override;
+
  private:
   int64_t m_inputNodeTag{};
   double m_min{};
   double m_max{};
+  double m_lastValue{};
 
   static constexpr std::string_view s_minName{"min"};
   static constexpr std::string_view s_maxName{"max"};

package/Microsoft.ReactNative/Modules/Animated/DivisionAnimatedNode.cpp

@@ -9,32 +9,55 @@
 namespace Microsoft::ReactNative {
 DivisionAnimatedNode::DivisionAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : ValueAnimatedNode(tag, manager) {
-  for (const auto &inputNode : config.find(s_inputName).dereference().second) {
+    : ValueAnimatedNode(tag, config, manager) {
+  for (const auto &inputNode : config[s_inputName].AsArray()) {
+    const auto inputTag = inputNode.AsInt64();
+    assert(HasCompatibleAnimationDriver(inputTag));
     if (m_firstInput == s_firstInputUnset) {
-      m_firstInput = static_cast<int64_t>(inputNode.asDouble());
+      m_firstInput = inputTag;
     } else {
-      m_inputNodes.insert(static_cast<int64_t>(inputNode.asDouble()));
+      m_inputNodes.insert(inputTag);
     }
   }
 
-  m_propertySet.StartAnimation(s_valueName, [firstNode = m_firstInput, nodes = m_inputNodes, manager]() {
-    const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
-
-    anim.Expression([firstNode, nodes, manager, anim]() {
-      anim.SetReferenceParameter(s_baseName, manager->GetValueAnimatedNode(firstNode)->PropertySet());
-      winrt::hstring expr = static_cast<winrt::hstring>(L"(") + s_baseName + L"." + s_valueName + L" + " + s_baseName +
-          L"." + s_offsetName + L")";
-      for (const auto tag : nodes) {
-        const auto identifier = L"n" + std::to_wstring(tag);
-        anim.SetReferenceParameter(identifier, manager->GetValueAnimatedNode(tag)->PropertySet());
-        expr = expr + L" / (" + identifier + L"." + s_valueName + L" + " + identifier + L"." + s_offsetName + L")";
-      }
-      return expr;
+  if (m_useComposition) {
+    m_propertySet.StartAnimation(s_valueName, [firstNode = m_firstInput, nodes = m_inputNodes, manager]() {
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
+
+      anim.Expression([firstNode, nodes, manager, anim]() {
+        anim.SetReferenceParameter(s_baseName, manager->GetValueAnimatedNode(firstNode)->PropertySet());
+        winrt::hstring expr = static_cast<winrt::hstring>(L"(") + s_baseName + L"." + s_valueName + L" + " +
+            s_baseName + L"." + s_offsetName + L")";
+        for (const auto tag : nodes) {
+          const auto identifier = L"n" + std::to_wstring(tag);
+          anim.SetReferenceParameter(identifier, manager->GetValueAnimatedNode(tag)->PropertySet());
+          expr = expr + L" / (" + identifier + L"." + s_valueName + L" + " + identifier + L"." + s_offsetName + L")";
+        }
+        return expr;
+      }());
+      return anim;
     }());
-    return anim;
-  }());
+  }
+}
+
+void DivisionAnimatedNode::Update() {
+  assert(!m_useComposition);
+  if (const auto manager = m_manager.lock()) {
+    auto rawValue = 0.0;
+    if (const auto firstNode = manager->GetValueAnimatedNode(m_firstInput)) {
+      rawValue = firstNode->Value();
+    }
+
+    for (const auto tag : m_inputNodes) {
+      if (const auto node = manager->GetValueAnimatedNode(tag)) {
+        const auto value = node->Value();
+        rawValue /= value;
+      }
+    }
+
+    RawValue(rawValue);
+  }
 }
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/DivisionAnimatedNode.h

@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 
 #pragma once
-#include <folly/dynamic.h>
 #include "ValueAnimatedNode.h"
 
 namespace Microsoft::ReactNative {
@@ -10,9 +9,11 @@ class DivisionAnimatedNode final : public ValueAnimatedNode {
  public:
   DivisionAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
+  virtual void Update() override;
+
  private:
   int64_t m_firstInput{s_firstInputUnset};
   std::unordered_set<int64_t> m_inputNodes{};

package/Microsoft.ReactNative/Modules/Animated/EventAnimationDriver.cpp

@@ -8,12 +8,12 @@
 
 namespace Microsoft::ReactNative {
 EventAnimationDriver::EventAnimationDriver(
-    const folly::dynamic &eventPath,
+    const std::vector<std::string> &eventPath,
     int64_t animatedValueTag,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
     : m_animatedValueTag(animatedValueTag), m_manager(manager) {
   for (const auto &path : eventPath) {
-    m_eventPath.push_back(path.getString());
+    m_eventPath.push_back(path);
   }
 }
 

package/Microsoft.ReactNative/Modules/Animated/EventAnimationDriver.h

@@ -11,7 +11,7 @@ class ValueAnimatedNode;
 class EventAnimationDriver {
  public:
   EventAnimationDriver(
-      const folly::dynamic &eventPath,
+      const std::vector<std::string> &eventPath,
       int64_t animatedValueTag,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
   ValueAnimatedNode *AnimatedValue();

package/Microsoft.ReactNative/Modules/Animated/FrameAnimationDriver.cpp

@@ -3,6 +3,7 @@
 
 #include "pch.h"
 
+#include "AnimationUtils.h"
 #include "FrameAnimationDriver.h"
 #include "Utils/Helpers.h"
 
@@ -11,19 +12,20 @@ FrameAnimationDriver::FrameAnimationDriver(
     int64_t id,
     int64_t animatedValueTag,
     const Callback &endCallback,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
     : AnimationDriver(id, animatedValueTag, endCallback, config, manager) {
-  for (const auto &frame : config.find("frames").dereference().second) {
-    m_frames.push_back(frame.asDouble());
+  for (const auto &frame : config["frames"].AsArray()) {
+    m_frames.push_back(frame.AsDouble());
   }
-  m_toValue = config.find("toValue").dereference().second.asDouble();
+  m_toValue = config["toValue"].AsDouble();
 }
 
 std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> FrameAnimationDriver::MakeAnimation(
-    const folly::dynamic & /*config*/) {
-  const auto [scopedBatch, animation] = []() {
-    const auto compositor = Microsoft::ReactNative::GetCompositor();
+    const winrt::Microsoft::ReactNative::JSValueObject & /*config*/) {
+  assert(m_useComposition);
+  const auto [scopedBatch, animation] = [manager = m_manager.lock()]() {
+    const auto compositor = manager->Compositor();
     return std::make_tuple(
         compositor.CreateScopedBatch(
             IsRS5OrHigher() ? comp::CompositionBatchTypes::AllAnimations : comp::CompositionBatchTypes::Animation),
@@ -32,7 +34,7 @@ std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> FrameAnimat
 
   // Frames contains 60 values per second of duration of the animation, convert
   // the size of frames to duration in ms.
-  std::chrono::milliseconds duration(static_cast<int>(m_frames.size() * 1000.0 / 60.0));
+  std::chrono::milliseconds duration(static_cast<int>(m_frames.size() * s_frameDurationMs));
   animation.Duration(duration);
 
   auto normalizedProgress = 0.0f;
@@ -57,4 +59,39 @@ double FrameAnimationDriver::ToValue() {
   return m_toValue;
 }
 
+bool FrameAnimationDriver::Update(double timeDeltaMs, bool restarting) {
+  assert(!m_useComposition);
+  if (const auto node = GetAnimatedValue()) {
+    if (!m_startValue) {
+      m_startValue = node->RawValue();
+    }
+
+    const auto startValue = m_startValue.value();
+    const auto startIndex = static_cast<size_t>(timeDeltaMs / s_frameDurationMs);
+    assert(startIndex >= 0);
+    const auto nextIndex = startIndex + 1;
+
+    double nextValue;
+    auto isComplete = false;
+    if (nextIndex >= m_frames.size()) {
+      nextValue = m_toValue;
+      isComplete = true;
+    } else {
+      const auto fromInterval = startIndex * s_frameDurationMs;
+      const auto toInterval = nextIndex * s_frameDurationMs;
+      const auto fromValue = m_frames[startIndex];
+      const auto toValue = m_frames[nextIndex];
+      const auto frameOutput = Interpolate(
+          timeDeltaMs, fromInterval, toInterval, fromValue, toValue, ExtrapolateTypeExtend, ExtrapolateTypeExtend);
+      nextValue = Interpolate(frameOutput, 0, 1, startValue, m_toValue, ExtrapolateTypeExtend, ExtrapolateTypeExtend);
+    }
+
+    node->RawValue(nextValue);
+
+    return isComplete;
+  }
+
+  return true;
+}
+
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/FrameAnimationDriver.h

@@ -13,20 +13,25 @@ class FrameAnimationDriver : public AnimationDriver {
       int64_t id,
       int64_t animatedValueTag,
       const Callback &endCallback,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
   std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> MakeAnimation(
-      const folly::dynamic &config) override;
+      const winrt::Microsoft::ReactNative::JSValueObject &config) override;
 
   double ToValue() override;
 
   inline std::vector<double> Frames() override {
+    assert(m_useComposition);
     return m_frames;
   }
 
+ protected:
+  bool Update(double timeDeltaMs, bool restarting) override;
+
  private:
   std::vector<double> m_frames{};
   double m_toValue{0};
+  std::optional<double> m_startValue{};
 };
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/InterpolationAnimatedNode.cpp

@@ -3,6 +3,7 @@
 
 #include "pch.h"
 
+#include "AnimationUtils.h"
 #include "ExtrapolationType.h"
 #include "InterpolationAnimatedNode.h"
 #include "NativeAnimatedNodeManager.h"
@@ -10,63 +11,80 @@
 namespace Microsoft::ReactNative {
 InterpolationAnimatedNode::InterpolationAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : ValueAnimatedNode(tag, manager) {
-  for (const auto &rangeValue : config.find(s_inputRangeName).dereference().second) {
-    m_inputRanges.push_back(rangeValue.asDouble());
+    : ValueAnimatedNode(tag, config, manager) {
+  for (const auto &rangeValue : config[s_inputRangeName].AsArray()) {
+    m_inputRanges.push_back(rangeValue.AsDouble());
   }
-  for (const auto &rangeValue : config.find(s_outputRangeName).dereference().second) {
-    m_outputRanges.push_back(rangeValue.asDouble());
+  for (const auto &rangeValue : config[s_outputRangeName].AsArray()) {
+    m_outputRanges.push_back(rangeValue.AsDouble());
   }
 
-  m_extrapolateLeft = config.find(s_extrapolateLeftName).dereference().second.asString();
-  m_extrapolateRight = config.find(s_extrapolateRightName).dereference().second.asString();
+  m_extrapolateLeft = config[s_extrapolateLeftName].AsString();
+  m_extrapolateRight = config[s_extrapolateRightName].AsString();
 }
 
-void InterpolationAnimatedNode::Update() {}
+void InterpolationAnimatedNode::Update() {
+  assert(!m_useComposition);
+  if (m_parentTag == s_parentTagUnset) {
+    return;
+  }
+
+  if (const auto manager = m_manager.lock()) {
+    if (const auto node = manager->GetValueAnimatedNode(m_parentTag)) {
+      RawValue(InterpolateValue(node->Value()));
+    }
+  }
+}
 
 void InterpolationAnimatedNode::OnDetachedFromNode([[maybe_unused]] int64_t animatedNodeTag) {
   assert(m_parentTag == animatedNodeTag);
   m_parentTag = s_parentTagUnset;
-  m_propertySet.StopAnimation(s_valueName);
-  m_propertySet.StopAnimation(s_offsetName);
-  m_rawValueAnimation = nullptr;
-  m_offsetAnimation = nullptr;
+
+  if (m_useComposition) {
+    m_propertySet.StopAnimation(s_valueName);
+    m_propertySet.StopAnimation(s_offsetName);
+    m_rawValueAnimation = nullptr;
+    m_offsetAnimation = nullptr;
+  }
 }
 
 void InterpolationAnimatedNode::OnAttachToNode(int64_t animatedNodeTag) {
+  assert(HasCompatibleAnimationDriver(animatedNodeTag));
   assert(m_parentTag == s_parentTagUnset);
   m_parentTag = animatedNodeTag;
 
-  const auto [rawValueAnimation, offsetAnimation] = [this]() {
-    if (const auto manager = m_manager.lock()) {
-      if (const auto parent = manager->GetValueAnimatedNode(m_parentTag)) {
-        const auto compositor = Microsoft::ReactNative::GetCompositor();
-
-        const auto rawValueAnimation = CreateExpressionAnimation(compositor, *parent);
-        rawValueAnimation.Expression(
-            GetExpression(s_parentPropsName + static_cast<winrt::hstring>(L".") + s_valueName));
-
-        const auto offsetAnimation = CreateExpressionAnimation(compositor, *parent);
-        offsetAnimation.Expression(
-            L"(" +
-            GetExpression(
-                s_parentPropsName + static_cast<winrt::hstring>(L".") + s_offsetName + L" + " + s_parentPropsName +
-                L"." + s_valueName) +
-            L") - this.target." + s_valueName);
-
-        return std::make_tuple(rawValueAnimation, offsetAnimation);
+  if (m_useComposition) {
+    const auto [rawValueAnimation, offsetAnimation] = [this]() {
+      if (const auto manager = m_manager.lock()) {
+        if (const auto parent = manager->GetValueAnimatedNode(m_parentTag)) {
+          const auto compositor = manager->Compositor();
+
+          const auto rawValueAnimation = CreateExpressionAnimation(compositor, *parent);
+          rawValueAnimation.Expression(
+              GetExpression(s_parentPropsName + static_cast<winrt::hstring>(L".") + s_valueName));
+
+          const auto offsetAnimation = CreateExpressionAnimation(compositor, *parent);
+          offsetAnimation.Expression(
+              L"(" +
+              GetExpression(
+                  s_parentPropsName + static_cast<winrt::hstring>(L".") + s_offsetName + L" + " + s_parentPropsName +
+                  L"." + s_valueName) +
+              L") - this.target." + s_valueName);
+
+          return std::make_tuple(rawValueAnimation, offsetAnimation);
+        }
       }
-    }
-    return std::tuple<comp::ExpressionAnimation, comp::ExpressionAnimation>(nullptr, nullptr);
-  }();
+      return std::tuple<comp::ExpressionAnimation, comp::ExpressionAnimation>(nullptr, nullptr);
+    }();
 
-  m_propertySet.StartAnimation(s_valueName, rawValueAnimation);
-  m_propertySet.StartAnimation(s_offsetName, offsetAnimation);
+    m_propertySet.StartAnimation(s_valueName, rawValueAnimation);
+    m_propertySet.StartAnimation(s_offsetName, offsetAnimation);
 
-  m_rawValueAnimation = rawValueAnimation;
-  m_offsetAnimation = offsetAnimation;
+    m_rawValueAnimation = rawValueAnimation;
+    m_offsetAnimation = offsetAnimation;
+  }
 }
 
 comp::ExpressionAnimation InterpolationAnimatedNode::CreateExpressionAnimation(
@@ -168,4 +186,24 @@ winrt::hstring InterpolationAnimatedNode::GetRightExpression(
   }
 }
 
+double InterpolationAnimatedNode::InterpolateValue(double value) {
+  // Compute range index
+  size_t index = 1;
+  for (; index < m_inputRanges.size() - 1; ++index) {
+    if (m_inputRanges[index] >= value) {
+      break;
+    }
+  }
+  index--;
+
+  return Interpolate(
+      value,
+      m_inputRanges[index],
+      m_inputRanges[index + 1],
+      m_outputRanges[index],
+      m_outputRanges[index + 1],
+      m_extrapolateLeft,
+      m_extrapolateRight);
+}
+
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/InterpolationAnimatedNode.h

@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 
 #pragma once
-#include <folly/dynamic.h>
 #include "ValueAnimatedNode.h"
 
 namespace Microsoft::ReactNative {
@@ -11,16 +10,16 @@ class InterpolationAnimatedNode final : public ValueAnimatedNode {
  public:
   InterpolationAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
   virtual void Update() override;
   virtual void OnDetachedFromNode(int64_t animatedNodeTag) override;
   virtual void OnAttachToNode(int64_t animatedNodeTag) override;
 
-  static constexpr std::wstring_view ExtrapolateTypeIdentity = L"identity";
-  static constexpr std::wstring_view ExtrapolateTypeClamp = L"clamp";
-  static constexpr std::wstring_view ExtrapolateTypeExtend = L"extend";
+  static constexpr std::string_view ExtrapolateTypeIdentity = "identity";
+  static constexpr std::string_view ExtrapolateTypeClamp = "clamp";
+  static constexpr std::string_view ExtrapolateTypeExtend = "extend";
 
  private:
   comp::ExpressionAnimation CreateExpressionAnimation(const winrt::Compositor &compositor, ValueAnimatedNode &parent);
@@ -35,6 +34,8 @@ class InterpolationAnimatedNode final : public ValueAnimatedNode {
   winrt::hstring GetLeftExpression(const winrt::hstring &value, const winrt::hstring &leftInterpolateExpression);
   winrt::hstring GetRightExpression(const winrt::hstring &, const winrt::hstring &rightInterpolateExpression);
 
+  double InterpolateValue(double value);
+
   comp::ExpressionAnimation m_rawValueAnimation{nullptr};
   comp::ExpressionAnimation m_offsetAnimation{nullptr};
   std::vector<double> m_inputRanges;

package/Microsoft.ReactNative/Modules/Animated/ModulusAnimatedNode.cpp

@@ -9,20 +9,32 @@
 namespace Microsoft::ReactNative {
 ModulusAnimatedNode::ModulusAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : ValueAnimatedNode(tag, manager) {
-  m_inputNodeTag = static_cast<int64_t>(config.find(s_inputName).dereference().second.asDouble());
-  m_modulus = static_cast<int64_t>(config.find(s_modulusName).dereference().second.asDouble());
+    : ValueAnimatedNode(tag, config, manager) {
+  m_inputNodeTag = config[s_inputName].AsInt64();
+  assert(HasCompatibleAnimationDriver(m_inputNodeTag));
+  m_modulus = config[s_modulusName].AsInt64();
 
-  m_propertySet.StartAnimation(s_valueName, [node = m_inputNodeTag, mod = m_modulus, manager]() {
-    const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
-    anim.SetReferenceParameter(s_inputParameterName, manager->GetValueAnimatedNode(node)->PropertySet());
-    anim.SetScalarParameter(s_modName, static_cast<float>(mod));
-    anim.Expression(
-        static_cast<winrt::hstring>(L"(") + s_inputParameterName + L"." + s_valueName + L" + " + s_inputParameterName +
-        L"." + s_offsetName + L") % " + s_modName);
-    return anim;
-  }());
+  if (m_useComposition) {
+    m_propertySet.StartAnimation(s_valueName, [node = m_inputNodeTag, mod = m_modulus, manager]() {
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
+      anim.SetReferenceParameter(s_inputParameterName, manager->GetValueAnimatedNode(node)->PropertySet());
+      anim.SetScalarParameter(s_modName, static_cast<float>(mod));
+      anim.Expression(
+          static_cast<winrt::hstring>(L"(") + s_inputParameterName + L"." + s_valueName + L" + " +
+          s_inputParameterName + L"." + s_offsetName + L") % " + s_modName);
+      return anim;
+    }());
+  }
+}
+
+void ModulusAnimatedNode::Update() {
+  assert(!m_useComposition);
+  if (const auto manager = m_manager.lock()) {
+    if (const auto node = manager->GetValueAnimatedNode(m_inputNodeTag)) {
+      RawValue(std::fmod(node->Value(), m_modulus));
+    }
+  }
 }
 } // namespace Microsoft::ReactNative