react-native-windows 0.70.9 → 0.71.0-preview.2

package/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -9,7 +9,7 @@
     <ProjectName>Microsoft.ReactNative</ProjectName>
     <RootNamespace>Microsoft.ReactNative</RootNamespace>
     <DefaultLanguage>en-US</DefaultLanguage>
-    <MinimumVisualStudioVersion>16.0</MinimumVisualStudioVersion>
+    <MinimumVisualStudioVersion>17.0</MinimumVisualStudioVersion>
     <AppContainerApplication>true</AppContainerApplication>
     <ApplicationType>Windows Store</ApplicationType>
     <ApplicationTypeRevision>10.0</ApplicationTypeRevision>
@@ -150,6 +150,9 @@
       <GenerateWindowsMetadata>true</GenerateWindowsMetadata>
       <ModuleDefinitionFile>Microsoft.ReactNative.def</ModuleDefinitionFile>
     </Link>
+    <Link Condition="'$(UseFabric)' == 'true'">
+      <AdditionalDependencies>User32.lib;%(AdditionalDependencies)</AdditionalDependencies>
+    </Link>
     <Midl>
       <AdditionalIncludeDirectories>$(ReactNativeWindowsDir)Microsoft.ReactNative\Views\cppwinrt;%(AdditionalIncludeDirectories)</AdditionalIncludeDirectories>
       <!-- #8430: This is needed to allow modules targeting older SDKs to consume the generated WinMD -->
@@ -230,9 +233,11 @@
     <ClInclude Include="Modules\AlertModule.h" />
     <ClInclude Include="Modules\Animated\AdditionAnimatedNode.h" />
     <ClInclude Include="Modules\Animated\AnimatedNode.h" />
+    <ClInclude Include="Modules\Animated\AnimatedPlatformConfig.h" />
     <ClInclude Include="Modules\Animated\AnimatedNodeType.h" />
     <ClInclude Include="Modules\Animated\AnimationDriver.h" />
     <ClInclude Include="Modules\Animated\AnimationType.h" />
+    <ClInclude Include="Modules\Animated\AnimationUtils.h" />
     <ClInclude Include="Modules\Animated\CalculatedAnimationDriver.h" />
     <ClInclude Include="Modules\Animated\DecayAnimationDriver.h" />
     <ClInclude Include="Modules\Animated\DiffClampAnimatedNode.h" />
@@ -377,6 +382,10 @@
     <ClInclude Include="Views\VirtualTextViewManager.h" />
     <ClInclude Include="Views\XamlFeatures.h" />
     <ClInclude Include="XamlLoadState.h" />
+    <ClInclude Include="LayoutService.h">
+      <DependentUpon>LayoutService.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="XamlUIService.h">
       <DependentUpon>XamlUIService.idl</DependentUpon>
       <SubType>Code</SubType>
@@ -410,22 +419,6 @@
       <SubType>Code</SubType>
     </ClInclude>
   </ItemGroup>
-  <ItemGroup Condition="'$(UseFabric)' == 'true'">
-    <ClCompile Include="Fabric\ActivityIndicatorComponentView.cpp" />
-    <ClCompile Include="Fabric\ImageComponentView.cpp" />
-    <ClCompile Include="Fabric\ParagraphComponentView.cpp" />
-    <ClCompile Include="Fabric\platform\react\renderer\components\slider\SliderMeasurementsManager.cpp" />
-    <ClCompile Include="Fabric\ScrollViewComponentView.cpp" />
-    <ClCompile Include="Fabric\SliderComponentView.cpp" />
-    <ClCompile Include="Fabric\SwitchComponentView.cpp" />
-    <ClCompile Include="Fabric\TextInput\WindowsTextInputComponentView.cpp" />
-    <ClCompile Include="Fabric\TextInput\WindowsTextInputEventEmitter.cpp" />
-    <ClCompile Include="Fabric\TextInput\WindowsTextInputProps.cpp" />
-    <ClCompile Include="Fabric\TextInput\WindowsTextInputShadowNode.cpp" />
-    <ClCompile Include="Fabric\TextInput\WindowsTextInputState.cpp" DisableSpecificWarnings="4244;%(DisableSpecificWarnings)" />
-    <ClCompile Include="Fabric\TextComponentView.cpp" />
-    <ClCompile Include="Fabric\ViewComponentView.cpp" />
-  </ItemGroup>
   <ItemGroup>
     <ClCompile Include="ABICxxModule.cpp" />
     <ClCompile Include="ABIViewManager.cpp" />
@@ -475,6 +468,7 @@
     <ClCompile Include="Modules\AlertModule.cpp" />
     <ClCompile Include="Modules\Animated\AdditionAnimatedNode.cpp" />
     <ClCompile Include="Modules\Animated\AnimatedNode.cpp" />
+    <ClCompile Include="Modules\Animated\AnimatedPlatformConfig.cpp" />
     <ClCompile Include="Modules\Animated\AnimationDriver.cpp" />
     <ClCompile Include="Modules\Animated\CalculatedAnimationDriver.cpp" />
     <ClCompile Include="Modules\Animated\DecayAnimationDriver.cpp" />
@@ -610,6 +604,10 @@
     <ClCompile Include="Views\XamlFeatures.cpp" />
     <ClCompile Include="XamlLoadState.cpp" />
     <ClCompile Include="XamlView.cpp" />
+    <ClCompile Include="LayoutService.cpp">
+      <DependentUpon>LayoutService.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="XamlUIService.cpp">
       <DependentUpon>XamlUIService.idl</DependentUpon>
       <SubType>Code</SubType>
@@ -639,6 +637,11 @@
     </ClCompile>
   </ItemGroup>
   <ItemGroup>
+    <Midl Condition="'$(UseFabric)' == 'true'" Include="CompositionHwndHost.idl" />
+    <Midl Condition="'$(UseFabric)' == 'true'" Include="CompositionContext.idl" />
+    <Midl Condition="'$(UseFabric)' == 'true'" Include="CompositionSwitcher.idl" />
+    <Midl Condition="'$(UseFabric)' == 'true'" Include="CompositionUIService.idl" />
+    <Midl Condition="'$(UseFabric)' == 'true'" Include="CompositionRootView.idl" />
     <Midl Include="CoreAppPage.idl">
       <DependentUpon>CoreAppPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -681,6 +684,9 @@
     <Midl Include="Views\cppwinrt\Effects.idl" />
     <Midl Include="Views\cppwinrt\DynamicAutomationPeer.idl" />
     <Midl Include="Views\cppwinrt\ViewPanel.idl" />
+    <Midl Include="LayoutService.idl">
+      <SubType>Designer</SubType>
+    </Midl>
     <Midl Include="XamlUIService.idl">
       <SubType>Designer</SubType>
     </Midl>
@@ -739,11 +745,10 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="boost" Version="1.76.0.0" />
-    <PackageReference Include="Microsoft.Windows.CppWinRT" Version="$(CppWinRTVersion)" />
+    <PackageReference Include="Microsoft.Windows.CppWinRT" Version="$(CppWinRTVersion)" PrivateAssets="all" />
     <PackageReference Include="ReactNative.Hermes.Windows" Version="$(HermesVersion)" />
     <PackageReference Include="$(WinUIPackageName)" Version="$(WinUIPackageVersion)" Condition="'$(OverrideWinUIPackage)'!='true'" />
     <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.22000.194" />
-    <PackageReference Include="$(V8PackageName)" Version="$(V8Version)" Condition="'$(UseV8)' == 'true'" />
   </ItemGroup>
   <Choose>
     <When Condition="'$(EnableSourceLink)' == 'true'">
@@ -754,6 +759,13 @@
       </ItemGroup>
     </When>
   </Choose>
+  <Choose>
+    <When Condition="'$(UseV8)' == 'true'">
+      <ItemGroup>
+        <PackageReference Include="ReactNative.V8Jsi.Windows.UWP" Version="$(V8Version)" />
+      </ItemGroup>
+    </When>
+  </Choose>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
   <Import Project="$(ReactNativeWindowsDir)PropertySheets\FastBuild.targets" />
   <Import Project="$(ReactNativeWindowsDir)PropertySheets\FixupRoslynCscWarnings.targets" />
@@ -782,4 +794,4 @@
       </ClCompile>
     </ItemGroup>
   </Target>
-</Project>
+</Project>

package/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj.filters

@@ -65,6 +65,9 @@
     <ClCompile Include="Modules\Animated\AnimatedNode.cpp">
       <Filter>Modules\Animated</Filter>
     </ClCompile>
+    <ClCompile Include="Modules\Animated\AnimatedPlatformConfig.cpp">
+      <Filter>Modules\Animated</Filter>
+    </ClCompile>
     <ClCompile Include="Modules\Animated\AnimationDriver.cpp">
       <Filter>Modules\Animated</Filter>
     </ClCompile>
@@ -412,6 +415,9 @@
     <ClInclude Include="Modules\Animated\AnimatedNode.h">
       <Filter>Modules\Animated</Filter>
     </ClInclude>
+    <ClInclude Include="Modules\Animated\AnimatedPlatformConfig.h">
+      <Filter>Modules\Animated</Filter>
+    </ClInclude>
     <ClInclude Include="Modules\Animated\AnimatedNodeType.h">
       <Filter>Modules\Animated</Filter>
     </ClInclude>
@@ -421,6 +427,9 @@
     <ClInclude Include="Modules\Animated\AnimationType.h">
       <Filter>Modules\Animated</Filter>
     </ClInclude>
+    <ClInclude Include="Modules\Animated\AnimationUtils.h">
+      <Filter>Modules\Animated</Filter>
+    </ClInclude>
     <ClInclude Include="Modules\Animated\CalculatedAnimationDriver.h">
       <Filter>Modules\Animated</Filter>
     </ClInclude>
@@ -752,6 +761,7 @@
     <Midl Include="RedBoxHandler.idl" />
     <Midl Include="QuirkSettings.idl" />
     <Midl Include="XamlHelper.idl" />
+    <Midl Include="LayoutService.idl" />
     <Midl Include="XamlUIService.idl" />
     <Midl Include="Views\cppwinrt\AccessibilityAction.idl">
       <Filter>Views\cppwinrt</Filter>
@@ -827,4 +837,4 @@
     <Page Include="DevMenuControl.xaml" />
     <Page Include="CoreAppPage.xaml" />
   </ItemGroup>
-</Project>
+</Project>

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

@@ -10,26 +10,43 @@
 namespace Microsoft::ReactNative {
 AdditionAnimatedNode::AdditionAnimatedNode(
     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) {
-    m_inputNodes.insert(static_cast<int64_t>(inputNode.asDouble()));
+    : ValueAnimatedNode(tag, config, manager) {
+  for (const auto &inputNode : config[s_inputName].AsArray()) {
+    const auto inputTag = inputNode.AsInt64();
+    assert(HasCompatibleAnimationDriver(inputTag));
+    m_inputNodes.insert(inputTag);
   }
 
-  m_propertySet.StartAnimation(s_valueName, [nodes = m_inputNodes, manager]() {
-    const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
+  if (m_useComposition) {
+    m_propertySet.StartAnimation(s_valueName, [nodes = m_inputNodes, manager]() {
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
 
-    anim.Expression([nodes, manager, anim]() {
-      winrt::hstring expr = L"0";
-      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;
-      }
-      return expr;
+      anim.Expression([nodes, manager, anim]() {
+        winrt::hstring expr = L"0";
+        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;
+        }
+        return expr;
+      }());
+      return anim;
     }());
-    return anim;
-  }());
+  }
+}
+
+void AdditionAnimatedNode::Update() {
+  assert(!m_useComposition);
+  auto rawValue = 0.0;
+  if (const auto manager = m_manager.lock()) {
+    for (const auto tag : m_inputNodes) {
+      if (const auto node = manager->GetValueAnimatedNode(tag)) {
+        rawValue += node->Value();
+      }
+    }
+  }
+  RawValue(rawValue);
 }
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/AdditionAnimatedNode.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 AdditionAnimatedNode final : public ValueAnimatedNode {
  public:
   AdditionAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
+  virtual void Update() override;
+
  private:
   std::unordered_set<int64_t> m_inputNodes{};
 };

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

@@ -4,12 +4,18 @@
 #include "pch.h"
 
 #include "AnimatedNode.h"
+#include "AnimatedPlatformConfig.h"
 #include "NativeAnimatedNodeManager.h"
 
 namespace Microsoft::ReactNative {
 
-AnimatedNode::AnimatedNode(int64_t tag, const std::shared_ptr<NativeAnimatedNodeManager> &manager)
-    : m_tag(tag), m_manager(manager) {}
+AnimatedNode::AnimatedNode(
+    int64_t tag,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
+    const std::shared_ptr<NativeAnimatedNodeManager> &manager)
+    : m_tag(tag), m_manager(manager) {
+  m_useComposition = AnimatedPlatformConfig::ShouldUseComposition(config);
+}
 
 int64_t AnimatedNode::Tag() {
   return m_tag;
@@ -36,4 +42,13 @@ AnimatedNode *AnimatedNode::GetChildNode(int64_t tag) {
 
   return static_cast<AnimatedNode *>(nullptr);
 }
+
+bool AnimatedNode::HasCompatibleAnimationDriver(int64_t tag) {
+#if DEBUG
+  if (const auto manager = m_manager.lock()) {
+    return manager->GetAnimatedNode(tag)->UseComposition() == m_useComposition;
+  }
+#endif
+  return true;
+}
 } // namespace Microsoft::ReactNative

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

@@ -3,6 +3,7 @@
 
 #pragma once
 
+#include <JSValue.h>
 #include <cstdint>
 #include <memory>
 #include <vector>
@@ -11,11 +12,22 @@ namespace Microsoft::ReactNative {
 class NativeAnimatedNodeManager;
 class AnimatedNode {
  public:
-  AnimatedNode(int64_t tag, const std::shared_ptr<NativeAnimatedNodeManager> &manager);
+  AnimatedNode(
+      int64_t tag,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
+      const std::shared_ptr<NativeAnimatedNodeManager> &manager);
   int64_t Tag();
   void AddChild(int64_t animatedNode);
   void RemoveChild(int64_t animatedNode);
 
+  std::vector<int64_t> &Children() {
+    return m_children;
+  }
+
+  virtual bool UseComposition() const noexcept {
+    return m_useComposition;
+  }
+
   virtual void Update(){};
   virtual void OnDetachedFromNode(int64_t /*animatedNodeTag*/){};
   virtual void OnAttachToNode(int64_t /*animatedNodeTag*/){};
@@ -26,5 +38,11 @@ class AnimatedNode {
   int64_t m_tag{0};
   const std::weak_ptr<NativeAnimatedNodeManager> m_manager;
   std::vector<int64_t> m_children{};
+  bool m_useComposition{false};
+
+  bool HasCompatibleAnimationDriver(int64_t tag);
+
+  static constexpr std::string_view s_platformConfigName{"platformConfig"};
+  static constexpr std::string_view s_useCompositionName{"useComposition"};
 };
 } // namespace Microsoft::ReactNative

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

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "AnimatedPlatformConfig.h"
+
+namespace Microsoft::ReactNative {
+
+// We could consider converting this value to a quirk setting in the future if
+// we want to change the default behavior to use the frame rendering approach.
+static constexpr auto DEFAULT_USE_COMPOSITION = true;
+
+/*static*/ bool AnimatedPlatformConfig::ShouldUseComposition(
+    const winrt::Microsoft::ReactNative::JSValueObject &config) {
+  if (config.count(s_platformConfigName)) {
+    const auto &platformConfig = config[s_platformConfigName].AsObject();
+    if (platformConfig.count(s_useCompositionName)) {
+      return platformConfig[s_useCompositionName].AsBoolean();
+    }
+  }
+  return DEFAULT_USE_COMPOSITION;
+}
+
+} // namespace Microsoft::ReactNative

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

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <JSValue.h>
+
+namespace Microsoft::ReactNative {
+class AnimatedPlatformConfig {
+ public:
+  static bool ShouldUseComposition(const winrt::Microsoft::ReactNative::JSValueObject &config);
+
+ private:
+  static constexpr std::string_view s_platformConfigName{"platformConfig"};
+  static constexpr std::string_view s_useCompositionName{"useComposition"};
+};
+} // namespace Microsoft::ReactNative

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

@@ -4,6 +4,7 @@
 #include "pch.h"
 
 #include <UI.Composition.h>
+#include "AnimatedPlatformConfig.h"
 #include "AnimationDriver.h"
 
 namespace Microsoft::ReactNative {
@@ -12,20 +13,20 @@ AnimationDriver::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)
-    : m_id(id), m_animatedValueTag(animatedValueTag), m_config(config), m_endCallback(endCallback), m_manager(manager) {
-  m_iterations = [iterations = config.find("iterations"), end = config.items().end()]() {
-    if (iterations != end) {
-      return static_cast<int64_t>(iterations.dereference().second.asDouble());
-    }
-    return static_cast<int64_t>(1);
-  }();
+    : m_id(id),
+      m_animatedValueTag(animatedValueTag),
+      m_config(config.Copy()),
+      m_endCallback(endCallback),
+      m_manager(manager) {
+  m_iterations = config.find("iterations") == config.end() ? 1 : config["iterations"].AsInt64();
+  m_useComposition = AnimatedPlatformConfig::ShouldUseComposition(config);
 }
 
 void AnimationDriver::DoCallback(bool value) {
   if (m_endCallback) {
-    m_endCallback(std::vector<folly::dynamic>{folly::dynamic::object("finished", value)});
+    m_endCallback(value);
   }
 #ifdef DEBUG
   m_debug_callbackAttempts++;
@@ -37,11 +38,12 @@ void AnimationDriver::DoCallback(bool value) {
 }
 
 AnimationDriver::~AnimationDriver() {
-  if (m_scopedBatch)
+  if (m_useComposition && m_scopedBatch)
     m_scopedBatch.Completed(m_scopedBatchCompletedToken);
 }
 
 void AnimationDriver::StartAnimation() {
+  assert(m_useComposition);
   m_started = true;
   const auto [animation, scopedBatch] = MakeAnimation(m_config);
   if (auto const animatedValue = GetAnimatedValue()) {
@@ -77,15 +79,44 @@ void AnimationDriver::StartAnimation() {
 }
 
 void AnimationDriver::StopAnimation(bool ignoreCompletedHandlers) {
-  if (!m_started) {
-    // The animation may have been deferred and never started. In this case,
-    // we will never get a scoped batch completion, so we need to fire the
-    // callback synchronously.
+  if (m_useComposition && m_started) {
+    if (const auto animatedValue = GetAnimatedValue()) {
+      animatedValue->PropertySet().StopAnimation(ValueAnimatedNode::s_valueName);
+      m_stopped = true;
+      m_ignoreCompletedHandlers = ignoreCompletedHandlers;
+    }
+  } else {
+    // For composition animations, the animation may have been deferred and
+    // never started. In this case, we will never get a scoped batch
+    // completion, so we need to fire the callback synchronously. For rendering
+    // animations, we always fire the callback synchronously.
     DoCallback(false);
-  } else if (const auto animatedValue = GetAnimatedValue()) {
-    animatedValue->PropertySet().StopAnimation(ValueAnimatedNode::s_valueName);
-    m_stopped = true;
-    m_ignoreCompletedHandlers = ignoreCompletedHandlers;
+  }
+}
+
+void AnimationDriver::RunAnimationStep(winrt::TimeSpan renderingTime) {
+  assert(!m_useComposition);
+  if (m_isComplete) {
+    return;
+  }
+
+  // winrt::TimeSpan ticks are 100 nanoseconds, divide by 10000 to get milliseconds.
+  const auto frameTimeMs = renderingTime.count() / 10000.0;
+  auto restarting = false;
+  if (m_startFrameTimeMs < 0) {
+    m_startFrameTimeMs = frameTimeMs;
+    restarting = true;
+  }
+
+  const auto timeDeltaMs = frameTimeMs - m_startFrameTimeMs;
+  const auto isComplete = Update(timeDeltaMs, restarting);
+
+  if (isComplete) {
+    if (m_iterations == -1 || ++m_iteration < m_iterations) {
+      m_startFrameTimeMs = -1;
+    } else {
+      m_isComplete = true;
+    }
   }
 }
 

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

@@ -2,12 +2,11 @@
 // Licensed under the MIT License.
 
 #pragma once
-#include <folly/dynamic.h>
 #include "NativeAnimatedNodeManager.h"
 #include "ValueAnimatedNode.h"
 
 namespace Microsoft::ReactNative {
-typedef std::function<void(std::vector<folly::dynamic>)> Callback;
+typedef std::function<void(bool)> Callback;
 
 class ValueAnimatedNode;
 class AnimationDriver : public std::enable_shared_from_this<AnimationDriver> {
@@ -16,14 +15,14 @@ class AnimationDriver : public std::enable_shared_from_this<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);
   virtual ~AnimationDriver();
   void StartAnimation();
   void StopAnimation(bool ignoreCompletedHandlers = false);
 
   virtual std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> MakeAnimation(
-      const folly::dynamic & /*config*/) {
+      const winrt::Microsoft::ReactNative::JSValueObject & /*config*/) {
     return std::make_tuple(nullptr, nullptr);
   };
 
@@ -35,11 +34,11 @@ class AnimationDriver : public std::enable_shared_from_this<AnimationDriver> {
     return m_animatedValueTag;
   }
 
-  inline Callback EndCallback() {
+  inline Callback EndCallback() noexcept {
     return m_endCallback;
   }
 
-  inline folly::dynamic AnimationConfig() {
+  inline const winrt::Microsoft::ReactNative::JSValueObject &AnimationConfig() const noexcept {
     return m_config;
   }
 
@@ -48,11 +47,23 @@ class AnimationDriver : public std::enable_shared_from_this<AnimationDriver> {
   };
 
   virtual std::vector<double> Frames() {
+    assert(m_useComposition);
     return std::vector<double>();
   }
 
   void DoCallback(bool value);
 
+  bool UseComposition() const noexcept {
+    return m_useComposition;
+  }
+
+  bool IsComplete() {
+    assert(!m_useComposition);
+    return m_isComplete;
+  }
+
+  void RunAnimationStep(winrt::TimeSpan renderingTime);
+
  private:
   Callback m_endCallback{};
 #ifdef DEBUG
@@ -61,13 +72,22 @@ class AnimationDriver : public std::enable_shared_from_this<AnimationDriver> {
 
  protected:
   ValueAnimatedNode *GetAnimatedValue();
+  virtual bool Update(double timeDeltaMs, bool restarting) {
+    return true;
+  };
 
+  bool m_useComposition{};
   int64_t m_id{0};
   int64_t m_animatedValueTag{};
   int64_t m_iterations{0};
-  folly::dynamic m_config{};
+  winrt::Microsoft::ReactNative::JSValueObject m_config{};
   std::weak_ptr<NativeAnimatedNodeManager> m_manager{};
 
+  bool m_isComplete{false};
+  int64_t m_iteration{0};
+  double m_startFrameTimeMs{-1};
+  std::optional<double> m_originalValue{};
+
   comp::CompositionAnimation m_animation{nullptr};
   comp::CompositionScopedBatch m_scopedBatch{nullptr};
   // auto revoker for scopedBatch.Completed is broken, tracked by internal bug
@@ -76,5 +96,7 @@ class AnimationDriver : public std::enable_shared_from_this<AnimationDriver> {
   bool m_started{false};
   bool m_stopped{false};
   bool m_ignoreCompletedHandlers{false};
+
+  static constexpr double s_frameDurationMs = 1000.0 / 60.0;
 };
 } // namespace Microsoft::ReactNative

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

@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+static constexpr std::string_view ExtrapolateTypeIdentity = "identity";
+static constexpr std::string_view ExtrapolateTypeClamp = "clamp";
+static constexpr std::string_view ExtrapolateTypeExtend = "extend";
+
+static double Interpolate(
+    double value,
+    double inputMin,
+    double inputMax,
+    double outputMin,
+    double outputMax,
+    std::string_view const &extrapolateLeft,
+    std::string_view const &extrapolateRight) {
+  auto result = value;
+
+  // Extrapolate
+  if (result < inputMin) {
+    if (extrapolateLeft == ExtrapolateTypeIdentity) {
+      return result;
+    } else if (extrapolateLeft == ExtrapolateTypeClamp) {
+      result = inputMin;
+    }
+  }
+
+  if (result > inputMax) {
+    if (extrapolateRight == ExtrapolateTypeIdentity) {
+      return result;
+    } else if (extrapolateRight == ExtrapolateTypeClamp) {
+      result = inputMax;
+    }
+  }
+
+  if (inputMin == inputMax) {
+    if (value <= inputMin) {
+      return outputMin;
+    }
+    return outputMax;
+  }
+
+  return outputMin + (outputMax - outputMin) * (result - inputMin) / (inputMax - inputMin);
+}

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

@@ -9,16 +9,17 @@
 namespace Microsoft::ReactNative {
 
 std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> CalculatedAnimationDriver::MakeAnimation(
-    const folly::dynamic & /*config*/) {
-  const auto [scopedBatch, animation, easingFunction] = []() {
-    const auto compositor = Microsoft::ReactNative::GetCompositor();
+    const winrt::Microsoft::ReactNative::JSValueObject & /*config*/) {
+  assert(m_useComposition);
+  const auto [scopedBatch, animation, easingFunction] = [manager = m_manager.lock()]() {
+    const auto compositor = manager->Compositor();
     return std::make_tuple(
         compositor.CreateScopedBatch(comp::CompositionBatchTypes::AllAnimations),
         compositor.CreateScalarKeyFrameAnimation(),
         compositor.CreateLinearEasingFunction());
   }();
 
-  m_startValue = GetAnimatedValue()->RawValue();
+  m_originalValue = GetAnimatedValue()->RawValue();
   std::vector<float> keyFrames = [this]() {
     std::vector<float> keyFrames;
     bool done = false;
@@ -39,7 +40,7 @@ std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> CalculatedA
   std::chrono::milliseconds duration(static_cast<int>(keyFrames.size() / 60.0f * 1000.0f));
   animation.Duration(duration);
   auto normalizedProgress = 0.0f;
-  auto fromValue = static_cast<float>(m_startValue);
+  auto fromValue = static_cast<float>(m_originalValue.value());
   animation.InsertKeyFrame(normalizedProgress, fromValue, easingFunction);
   for (const auto keyFrame : keyFrames) {
     normalizedProgress = std::min(normalizedProgress + 1.0f / keyFrames.size(), 1.0f);