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

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

@@ -12,31 +12,41 @@
 #include "PropsAnimatedNode.h"
 #include "StyleAnimatedNode.h"
 
+#ifdef USE_FABRIC
+#include <Fabric/Composition/CompositionContextHelper.h>
+#include <Fabric/Composition/CompositionUIService.h>
+#include <Fabric/FabricUIManagerModule.h>
+#endif
+
 namespace Microsoft::ReactNative {
 PropsAnimatedNode::PropsAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
-    const Mso::CntPtr<Mso::React::IReactContext> &context,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
+    const winrt::Microsoft::ReactNative::ReactContext &context,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : AnimatedNode(tag, manager), m_context(context) {
-  for (const auto &entry : config.find("props").dereference().second.items()) {
-    m_propMapping.insert({entry.first.getString(), static_cast<int64_t>(entry.second.asDouble())});
+    : AnimatedNode(tag, config, manager), m_context(context) {
+  for (const auto &entry : config["props"].AsObject()) {
+    const auto inputTag = entry.second.AsInt64();
+    m_propMapping.insert({entry.first, inputTag});
+  }
+
+  if (m_useComposition) {
+    auto compositor = manager->Compositor();
+    m_subchannelPropertySet = compositor.CreatePropertySet();
+    m_subchannelPropertySet.InsertScalar(L"TranslationX", 0.0f);
+    m_subchannelPropertySet.InsertScalar(L"TranslationY", 0.0f);
+    m_subchannelPropertySet.InsertScalar(L"ScaleX", 1.0f);
+    m_subchannelPropertySet.InsertScalar(L"ScaleY", 1.0f);
+
+    m_translationCombined =
+        compositor.CreateExpressionAnimation(L"Vector3(subchannels.TranslationX, subchannels.TranslationY, 0.0)");
+    m_translationCombined.SetReferenceParameter(L"subchannels", m_subchannelPropertySet);
+    m_translationCombined.Target(L"Translation");
+
+    m_scaleCombined = compositor.CreateExpressionAnimation(L"Vector3(subchannels.ScaleX, subchannels.ScaleY, 1.0)");
+    m_scaleCombined.SetReferenceParameter(L"subchannels", m_subchannelPropertySet);
+    m_scaleCombined.Target(L"Scale");
   }
-  auto compositor = Microsoft::ReactNative::GetCompositor();
-  m_subchannelPropertySet = compositor.CreatePropertySet();
-  m_subchannelPropertySet.InsertScalar(L"TranslationX", 0.0f);
-  m_subchannelPropertySet.InsertScalar(L"TranslationY", 0.0f);
-  m_subchannelPropertySet.InsertScalar(L"ScaleX", 1.0f);
-  m_subchannelPropertySet.InsertScalar(L"ScaleY", 1.0f);
-
-  m_translationCombined =
-      compositor.CreateExpressionAnimation(L"Vector3(subchannels.TranslationX, subchannels.TranslationY, 0.0)");
-  m_translationCombined.SetReferenceParameter(L"subchannels", m_subchannelPropertySet);
-  m_translationCombined.Target(L"Translation");
-
-  m_scaleCombined = compositor.CreateExpressionAnimation(L"Vector3(subchannels.ScaleX, subchannels.ScaleY, 1.0)");
-  m_scaleCombined.SetReferenceParameter(L"subchannels", m_subchannelPropertySet);
-  m_scaleCombined.Target(L"Scale");
 }
 
 void PropsAnimatedNode::ConnectToView(int64_t viewTag) {
@@ -46,7 +56,10 @@ void PropsAnimatedNode::ConnectToView(int64_t viewTag) {
     return;
   }
   m_connectedViewTag = viewTag;
-  UpdateView();
+
+  if (m_useComposition) {
+    UpdateView();
+  }
 }
 
 void PropsAnimatedNode::DisconnectFromView(int64_t viewTag) {
@@ -58,26 +71,36 @@ void PropsAnimatedNode::DisconnectFromView(int64_t viewTag) {
     return;
   }
 
-  std::vector<int64_t> keys{};
-  for (const auto &anim : m_expressionAnimations) {
-    keys.push_back(anim.first);
-  }
-  for (const auto &key : keys) {
-    DisposeCompletedAnimation(key);
-  }
+  if (m_useComposition) {
+    std::vector<int64_t> keys{};
+    for (const auto &anim : m_expressionAnimations) {
+      keys.push_back(anim.first);
+    }
+    for (const auto &key : keys) {
+      DisposeCompletedAnimation(key);
+    }
 
-  if (m_centerPointAnimation) {
-    if (const auto target = GetUIElement()) {
-      target.StopAnimation(m_centerPointAnimation);
+    if (m_centerPointAnimation) {
+      if (const auto target = GetUIElement()) {
+        target.StopAnimation(m_centerPointAnimation);
+      }
+      m_centerPointAnimation = nullptr;
     }
-    m_centerPointAnimation = nullptr;
+    m_needsCenterPointAnimation = false;
   }
 
   m_connectedViewTag = s_connectedViewTagUnset;
-  m_needsCenterPointAnimation = false;
 }
 
-void PropsAnimatedNode::RestoreDefaultValues() {}
+void PropsAnimatedNode::RestoreDefaultValues() {
+  if (!m_useComposition) {
+    for (const auto &entry : m_props) {
+      m_props[entry.first] = nullptr;
+    }
+
+    CommitProps();
+  }
+}
 
 void PropsAnimatedNode::UpdateView() {
   if (m_connectedViewTag == s_connectedViewTagUnset) {
@@ -87,19 +110,31 @@ void PropsAnimatedNode::UpdateView() {
   if (const auto manager = std::shared_ptr<NativeAnimatedNodeManager>(m_manager)) {
     for (const auto &entry : m_propMapping) {
       if (const auto &styleNode = manager->GetStyleAnimatedNode(entry.second)) {
-        for (const auto &styleEntry : styleNode->GetMapping()) {
-          MakeAnimation(styleEntry.second, styleEntry.first);
+        if (m_useComposition) {
+          for (const auto &styleEntry : styleNode->GetMapping()) {
+            MakeAnimation(styleEntry.second, styleEntry.first);
+          }
+        } else {
+          styleNode->CollectViewUpdates(m_props);
         }
       } else if (const auto &valueNode = manager->GetValueAnimatedNode(entry.second)) {
-        const auto &facade = StringToFacadeType(entry.first);
-        if (facade != FacadeType::None) {
-          MakeAnimation(entry.second, facade);
+        if (m_useComposition) {
+          const auto &facade = StringToFacadeType(entry.first);
+          if (facade != FacadeType::None) {
+            MakeAnimation(entry.second, facade);
+          }
+        } else {
+          m_props[entry.first] = valueNode->Value();
         }
       }
     }
   }
 
-  StartAnimations();
+  if (m_useComposition) {
+    StartAnimations();
+  } else {
+    CommitProps();
+  }
 }
 
 static void EnsureUIElementDirtyForRender(xaml::UIElement uiElement) {
@@ -117,40 +152,54 @@ static void EnsureUIElementDirtyForRender(xaml::UIElement uiElement) {
 }
 
 void PropsAnimatedNode::StartAnimations() {
+  assert(m_useComposition);
   if (m_expressionAnimations.size()) {
-    if (const auto uiElement = GetUIElement()) {
+    AnimationView view = GetAnimationView();
+    if (view) {
       // Work around for https://github.com/microsoft/microsoft-ui-xaml/issues/2511
-      EnsureUIElementDirtyForRender(uiElement);
+      if (view.m_element) {
+        EnsureUIElementDirtyForRender(view.m_element);
+      }
       for (const auto &anim : m_expressionAnimations) {
         if (anim.second.Target() == L"Translation.X") {
           m_subchannelPropertySet.StartAnimation(L"TranslationX", anim.second);
-          uiElement.StartAnimation(m_translationCombined);
+          StartAnimation(view, m_translationCombined);
         } else if (anim.second.Target() == L"Translation.Y") {
           m_subchannelPropertySet.StartAnimation(L"TranslationY", anim.second);
-          uiElement.StartAnimation(m_translationCombined);
+          StartAnimation(view, m_translationCombined);
         } else if (anim.second.Target() == L"Scale.X") {
           m_subchannelPropertySet.StartAnimation(L"ScaleX", anim.second);
-          uiElement.StartAnimation(m_scaleCombined);
+          StartAnimation(view, m_scaleCombined);
         } else if (anim.second.Target() == L"Scale.Y") {
           m_subchannelPropertySet.StartAnimation(L"ScaleY", anim.second);
-          uiElement.StartAnimation(m_scaleCombined);
+          StartAnimation(view, m_scaleCombined);
         } else if (anim.second.Target() == L"Rotation") {
-          uiElement.RotationAxis(m_rotationAxis);
-          uiElement.StartAnimation(anim.second);
+          if (view.m_element) {
+            view.m_element.RotationAxis(m_rotationAxis);
+#ifdef USE_FABRIC
+          } else {
+            auto visual =
+                winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerVisual(
+                    view.m_componentView->Visual());
+            visual.RotationAxis(m_rotationAxis);
+#endif
+          }
+          StartAnimation(view, anim.second);
         } else {
-          uiElement.StartAnimation(anim.second);
+          StartAnimation(view, anim.second);
         }
       }
       if (m_needsCenterPointAnimation) {
         if (!m_centerPointAnimation) {
-          m_centerPointAnimation = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
-          m_centerPointAnimation.Target(L"CenterPoint");
-          m_centerPointAnimation.SetReferenceParameter(
-              L"centerPointPropertySet", GetShadowNodeBase()->EnsureTransformPS());
-          m_centerPointAnimation.Expression(L"centerPointPropertySet.center");
+          if (const auto manager = m_manager.lock()) {
+            m_centerPointAnimation = manager->Compositor().CreateExpressionAnimation();
+            m_centerPointAnimation.Target(L"CenterPoint");
+            m_centerPointAnimation.SetReferenceParameter(L"centerPointPropertySet", EnsureCenterPointPropertySet(view));
+            m_centerPointAnimation.Expression(L"centerPointPropertySet.center");
+          }
         }
 
-        uiElement.StartAnimation(m_centerPointAnimation);
+        StartAnimation(view, m_centerPointAnimation);
       }
     } else {
       if (const auto manager = m_manager.lock()) {
@@ -161,6 +210,7 @@ void PropsAnimatedNode::StartAnimations() {
 }
 
 void PropsAnimatedNode::DisposeCompletedAnimation(int64_t valueTag) {
+  assert(m_useComposition);
   /*
   if (m_expressionAnimations.count(valueTag)) {
     if (const auto target = GetUIElement()) {
@@ -180,6 +230,7 @@ void PropsAnimatedNode::DisposeCompletedAnimation(int64_t valueTag) {
 }
 
 void PropsAnimatedNode::ResumeSuspendedAnimations(int64_t valueTag) {
+  assert(m_useComposition);
   /*
   const auto iterator =
       std::find(m_suspendedExpressionAnimationTags.begin(), m_suspendedExpressionAnimationTags.end(), valueTag);
@@ -196,7 +247,7 @@ void PropsAnimatedNode::ResumeSuspendedAnimations(int64_t valueTag) {
 void PropsAnimatedNode::MakeAnimation(int64_t valueNodeTag, FacadeType facadeType) {
   if (const auto manager = m_manager.lock()) {
     if (const auto valueNode = manager->GetValueAnimatedNode(valueNodeTag)) {
-      const auto animation = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
+      const auto animation = manager->Compositor().CreateExpressionAnimation();
       animation.SetReferenceParameter(L"ValuePropSet", valueNode->PropertySet());
       animation.Expression(
           static_cast<winrt::hstring>(L"ValuePropSet.") + ValueAnimatedNode::s_valueName + L" + ValuePropSet." +
@@ -267,7 +318,7 @@ void PropsAnimatedNode::MakeAnimation(int64_t valueNodeTag, FacadeType facadeTyp
 }
 
 Microsoft::ReactNative::ShadowNodeBase *PropsAnimatedNode::GetShadowNodeBase() {
-  if (const auto uiManager = Microsoft::ReactNative::GetNativeUIManager(*m_context).lock()) {
+  if (const auto uiManager = Microsoft::ReactNative::GetNativeUIManager(m_context).lock()) {
     if (const auto nativeUIManagerHost = uiManager->getHost()) {
       return static_cast<Microsoft::ReactNative::ShadowNodeBase *>(
           nativeUIManagerHost->FindShadowNodeForTag(m_connectedViewTag));
@@ -286,4 +337,81 @@ xaml::UIElement PropsAnimatedNode::GetUIElement() {
   }
   return nullptr;
 }
+
+void PropsAnimatedNode::CommitProps() {
+  if (const auto node = GetShadowNodeBase()) {
+    if (!node->m_zombie) {
+      node->updateProperties(m_props);
+    }
+  }
+}
+
+PropsAnimatedNode::AnimationView PropsAnimatedNode::GetAnimationView() {
+#ifdef USE_FABRIC
+  if (auto fabricuiManager = FabricUIManager::FromProperties(m_context.Properties())) {
+    auto componentView = fabricuiManager->GetViewRegistry().findComponentViewWithTag(
+        static_cast<facebook::react::Tag>(m_connectedViewTag));
+    if (componentView) {
+      return {nullptr, std::static_pointer_cast<CompositionBaseComponentView>(componentView)};
+    }
+  }
+#endif
+  if (IsRS5OrHigher()) {
+    if (const auto shadowNodeBase = GetShadowNodeBase()) {
+      if (const auto shadowNodeView = shadowNodeBase->GetView()) {
+#ifdef USE_FABRIC
+        return {shadowNodeView.as<xaml::UIElement>(), nullptr};
+#else
+        return {shadowNodeView.as<xaml::UIElement>()};
+#endif
+      }
+    }
+  }
+
+#ifdef USE_FABRIC
+  return {nullptr, nullptr};
+#else
+  return {nullptr};
+#endif
+}
+
+void PropsAnimatedNode::StartAnimation(
+    const AnimationView &view,
+    const comp::CompositionAnimation &animation) noexcept {
+  if (view.m_element) {
+    view.m_element.StartAnimation(animation);
+#ifdef USE_FABRIC
+  } else if (view.m_componentView) {
+    auto visual = winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerVisual(
+        view.m_componentView->Visual());
+    if (visual) {
+      auto targetProp = animation.Target();
+      if (targetProp == L"Rotation") {
+        targetProp = L"RotationAngleInDegrees";
+      } else if (targetProp == L"Transform") {
+        view.m_componentView->EnsureCenterPointPropertySet().StartAnimation(L"transform", animation);
+        return;
+      } else if (targetProp == L"Translation") {
+        view.m_componentView->EnsureTransformMatrixFacade();
+        view.m_componentView->EnsureCenterPointPropertySet().StartAnimation(L"translation", animation);
+
+        return;
+      }
+      visual.StartAnimation(targetProp, animation);
+    }
+#endif
+  }
+}
+
+comp::CompositionPropertySet PropsAnimatedNode::EnsureCenterPointPropertySet(const AnimationView &view) noexcept {
+  if (view.m_element) {
+    return GetShadowNodeBase()->EnsureTransformPS();
+#ifdef USE_FABRIC
+  } else if (view.m_componentView) {
+    return view.m_componentView->EnsureCenterPointPropertySet();
+#endif
+  }
+  return nullptr;
+}
+
 } // namespace Microsoft::ReactNative

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

@@ -4,10 +4,15 @@
 #pragma once
 #include <IReactInstance.h>
 #include <React.h>
+#include <ReactContext.h>
 #include <folly/dynamic.h>
 #include "AnimatedNode.h"
-
 #include "FacadeType.h"
+#include "JSValue.h"
+
+#ifdef USE_FABRIC
+#include <Fabric/Composition/CompositionViewComponentView.h>
+#endif
 
 namespace Microsoft::ReactNative {
 struct ShadowNodeBase;
@@ -18,8 +23,8 @@ class PropsAnimatedNode final : public AnimatedNode {
  public:
   PropsAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
-      const Mso::CntPtr<Mso::React::IReactContext> &context,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
+      const winrt::Microsoft::ReactNative::ReactContext &context,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
   void ConnectToView(int64_t viewTag);
   void DisconnectFromView(int64_t viewTag);
@@ -30,13 +35,31 @@ class PropsAnimatedNode final : public AnimatedNode {
   void ResumeSuspendedAnimations(int64_t valueTag);
 
  private:
+  struct AnimationView {
+    xaml::UIElement m_element;
+#ifdef USE_FABRIC
+    std::shared_ptr<CompositionBaseComponentView> m_componentView;
+#endif
+    operator bool() const noexcept {
+#ifdef USE_FABRIC
+      return m_element || m_componentView;
+#else
+      return m_element != nullptr;
+#endif
+    }
+  };
+
+  void CommitProps();
   void MakeAnimation(int64_t valueNodeTag, FacadeType facadeType);
   Microsoft::ReactNative::ShadowNodeBase *GetShadowNodeBase();
   xaml::UIElement GetUIElement();
+  AnimationView GetAnimationView();
+  void StartAnimation(const AnimationView &view, const comp::CompositionAnimation &animation) noexcept;
+  comp::CompositionPropertySet EnsureCenterPointPropertySet(const AnimationView &view) noexcept;
 
-  Mso::CntPtr<Mso::React::IReactContext> m_context{};
+  winrt::Microsoft::ReactNative::ReactContext m_context;
   std::map<std::string, int64_t> m_propMapping{};
-  folly::dynamic m_propMap{};
+  winrt::Microsoft::ReactNative::JSValueObject m_props{};
 
   int64_t m_connectedViewTag{s_connectedViewTagUnset};
   std::unordered_map<int64_t, comp::CompositionAnimation> m_expressionAnimations{};

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

@@ -8,25 +8,27 @@
 #include "SpringAnimationDriver.h"
 
 namespace Microsoft::ReactNative {
+
+static constexpr auto MAX_DELTA_TIME_MS = 4.0 * 1000.0 / 60.0;
+
 SpringAnimationDriver::SpringAnimationDriver(
     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,
-    const folly::dynamic &dynamicToValues)
+    const winrt::Microsoft::ReactNative::JSValueArray &dynamicToValues)
     : CalculatedAnimationDriver(id, animatedValueTag, endCallback, config, manager),
-      m_dynamicToValues(dynamicToValues) {
-  m_springStiffness = config.find(s_springStiffnessParameterName).dereference().second.asDouble();
-  m_springDamping = config.find(s_springDampingParameterName).dereference().second.asDouble();
-  m_springMass = config.find(s_springMassParameterName).dereference().second.asDouble();
-  m_initialVelocity = config.find(s_initialVelocityParameterName).dereference().second.asDouble();
-  m_endValue = config.find(s_endValueParameterName).dereference().second.asDouble();
-  m_restSpeedThreshold = config.find(s_restSpeedThresholdParameterName).dereference().second.asDouble();
-  m_displacementFromRestThreshold =
-      config.find(s_displacementFromRestThresholdParameterName).dereference().second.asDouble();
-  m_overshootClampingEnabled = config.find(s_overshootClampingEnabledParameterName).dereference().second.asBool();
-  m_iterations = static_cast<int>(config.find(s_iterationsParameterName).dereference().second.asDouble());
+      m_dynamicToValues(dynamicToValues.Copy()) {
+  m_springStiffness = config[s_springStiffnessParameterName].AsDouble();
+  m_springDamping = config[s_springDampingParameterName].AsDouble();
+  m_springMass = config[s_springMassParameterName].AsDouble();
+  m_initialVelocity = config[s_initialVelocityParameterName].AsDouble();
+  m_endValue = config[s_endValueParameterName].AsDouble();
+  m_restSpeedThreshold = config[s_restSpeedThresholdParameterName].AsDouble();
+  m_displacementFromRestThreshold = config[s_displacementFromRestThresholdParameterName].AsDouble();
+  m_overshootClampingEnabled = config[s_overshootClampingEnabledParameterName].AsBoolean();
+  m_iterations = static_cast<int>(config[s_iterationsParameterName].AsDouble());
 }
 
 bool SpringAnimationDriver::IsAnimationDone(
@@ -39,10 +41,13 @@ bool SpringAnimationDriver::IsAnimationDone(
 }
 
 std::tuple<float, double> SpringAnimationDriver::GetValueAndVelocityForTime(double time) {
-  const auto toValue = [this, time]() {
-    const auto frameFromTime = static_cast<int>(time * 60.0);
-    if (frameFromTime < static_cast<int>(m_dynamicToValues.size())) {
-      return m_startValue + (m_dynamicToValues[frameFromTime].asDouble() * (m_endValue - m_startValue));
+  const auto startValue = m_originalValue.value();
+  const auto toValue = [this, startValue, time]() {
+    if (m_useComposition) {
+      const auto frameFromTime = static_cast<int>(time * 60.0);
+      if (frameFromTime < static_cast<int>(m_dynamicToValues.size())) {
+        return startValue + (m_dynamicToValues[frameFromTime].AsDouble() * (m_endValue - startValue));
+      }
     }
     return m_endValue;
   }();
@@ -54,7 +59,7 @@ std::tuple<float, double> SpringAnimationDriver::GetValueAndVelocityForTime(doub
   const auto zeta = c / (2 * std::sqrt(k * m));
   const auto omega0 = std::sqrt(k / m);
   const auto omega1 = omega0 * std::sqrt(1.0 - (zeta * zeta));
-  const auto x0 = toValue - m_startValue;
+  const auto x0 = toValue - startValue;
 
   if (zeta < 1) {
     const auto envelope = std::exp(-zeta * omega0 * time);
@@ -73,15 +78,62 @@ std::tuple<float, double> SpringAnimationDriver::GetValueAndVelocityForTime(doub
   }
 }
 
+bool SpringAnimationDriver::Update(double timeDeltaMs, bool restarting) {
+  assert(!m_useComposition);
+  if (const auto node = GetAnimatedValue()) {
+    if (restarting) {
+      if (!m_originalValue) {
+        m_originalValue = node->RawValue();
+      } else {
+        node->RawValue(m_originalValue.value());
+      }
+
+      // Spring animations run a frame behind JS driven animations if we do
+      // not start the first frame at 16ms.
+      m_lastTime = timeDeltaMs - s_frameDurationMs;
+      m_timeAccumulator = 0.0;
+    }
+
+    // clamp the amount of timeDeltaMs to avoid stuttering in the UI.
+    // We should be able to catch up in a subsequent advance if necessary.
+    auto adjustedDeltaTime = timeDeltaMs - m_lastTime;
+    if (adjustedDeltaTime > MAX_DELTA_TIME_MS) {
+      adjustedDeltaTime = MAX_DELTA_TIME_MS;
+    }
+    m_timeAccumulator += adjustedDeltaTime;
+    m_lastTime = timeDeltaMs;
+
+    auto [value, velocity] = GetValueAndVelocityForTime(m_timeAccumulator / 1000.0);
+
+    auto isComplete = false;
+    if (IsAnimationDone(value, std::nullopt, velocity)) {
+      if (m_springStiffness > 0) {
+        value = static_cast<float>(m_endValue);
+      } else {
+        m_endValue = value;
+      }
+
+      isComplete = true;
+    }
+
+    node->RawValue(value);
+
+    return isComplete;
+  }
+
+  return true;
+}
+
 bool SpringAnimationDriver::IsAtRest(double currentVelocity, double currentValue, double endValue) {
   return std::abs(currentVelocity) <= m_restSpeedThreshold &&
       (std::abs(currentValue - endValue) <= m_displacementFromRestThreshold || m_springStiffness == 0);
 }
 
 bool SpringAnimationDriver::IsOvershooting(double currentValue) {
+  const auto startValue = m_originalValue.value();
   return m_springStiffness > 0 &&
-      ((m_startValue < m_endValue && currentValue > m_endValue) ||
-       (m_startValue > m_endValue && currentValue < m_endValue));
+      ((startValue < m_endValue && currentValue > m_endValue) ||
+       (startValue > m_endValue && currentValue < m_endValue));
 }
 
 double SpringAnimationDriver::ToValue() {

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

@@ -3,7 +3,6 @@
 // Licensed under the MIT License.
 
 #pragma once
-#include <folly/dynamic.h>
 #include "AnimatedNode.h"
 #include "CalculatedAnimationDriver.h"
 
@@ -14,13 +13,15 @@ class SpringAnimationDriver : 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,
-      const folly::dynamic &dynamicToValues = folly::dynamic::array());
+      const winrt::Microsoft::ReactNative::JSValueArray &dynamicToValues =
+          winrt::Microsoft::ReactNative::JSValueArray());
 
   double ToValue() override;
 
  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;
 
@@ -37,7 +38,10 @@ class SpringAnimationDriver : public CalculatedAnimationDriver {
   double m_displacementFromRestThreshold{0};
   bool m_overshootClampingEnabled{0};
   int m_iterations{0};
-  folly::dynamic m_dynamicToValues{};
+  winrt::Microsoft::ReactNative::JSValueArray m_dynamicToValues{};
+
+  double m_lastTime{0};
+  double m_timeAccumulator{0};
 
   static constexpr std::string_view s_springStiffnessParameterName{"stiffness"};
   static constexpr std::string_view s_springDampingParameterName{"damping"};

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

@@ -9,17 +9,32 @@
 namespace Microsoft::ReactNative {
 StyleAnimatedNode::StyleAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : AnimatedNode(tag, manager) {
-  for (const auto &entry : config.find(s_styleName).dereference().second.items()) {
-    m_propMapping.insert({entry.first.getString(), static_cast<int64_t>(entry.second.asDouble())});
+    : AnimatedNode(tag, config, manager) {
+  for (const auto &entry : config[s_styleName].AsObject()) {
+    const auto inputTag = entry.second.AsInt64();
+    assert(HasCompatibleAnimationDriver(inputTag));
+    m_propMapping.insert({entry.first, inputTag});
   }
 }
 
-void StyleAnimatedNode::CollectViewUpdates(const folly::dynamic & /*propsMap*/) {}
+void StyleAnimatedNode::CollectViewUpdates(winrt::Microsoft::ReactNative::JSValueObject &propsMap) {
+  assert(!m_useComposition);
+  auto rawValue = 0.0;
+  for (const auto &propMapping : m_propMapping) {
+    if (const auto manager = m_manager.lock()) {
+      if (const auto transformNode = manager->GetTransformAnimatedNode(propMapping.second)) {
+        transformNode->CollectViewUpdates(propsMap);
+      } else if (const auto node = manager->GetValueAnimatedNode(propMapping.second)) {
+        propsMap[propMapping.first] = node->Value();
+      }
+    }
+  }
+}
 
 std::unordered_map<FacadeType, int64_t> StyleAnimatedNode::GetMapping() {
+  assert(m_useComposition);
   std::unordered_map<FacadeType, int64_t> mapping;
   for (const auto &prop : m_propMapping) {
     if (const auto manager = m_manager.lock()) {

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

@@ -5,15 +5,16 @@
 #include <folly/dynamic.h>
 #include "AnimatedNode.h"
 #include "FacadeType.h"
+#include "JSValue.h"
 
 namespace Microsoft::ReactNative {
 class StyleAnimatedNode final : public AnimatedNode {
  public:
   StyleAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
-  void CollectViewUpdates(const folly::dynamic &propsMap);
+  void CollectViewUpdates(winrt::Microsoft::ReactNative::JSValueObject &propsMap);
 
   std::unordered_map<FacadeType, int64_t> GetMapping();