react-native 0.84.0-nightly-20251205-95cc1e767 → 0.84.0-nightly-20251206-63b0aef13

package/Libraries/Animated/nodes/AnimatedProps.js

@@ -14,7 +14,9 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
 import type {AnimatedStyleAllowlist} from './AnimatedStyle';
 
 import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
+import {getNodeFromPublicInstance} from '../../ReactPrivate/ReactNativePrivateInterface';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import {AnimatedEvent} from '../AnimatedEvent';
 import AnimatedNode from './AnimatedNode';
@@ -251,7 +253,9 @@ export default class AnimatedProps extends AnimatedNode {
       super.__setPlatformConfig(platformConfig);
 
       if (this._target != null) {
-        this.#connectAnimatedView(this._target);
+        const target = this._target;
+        this.#connectAnimatedView(target);
+        this.#connectShadowNode(target);
       }
     }
   }
@@ -260,9 +264,10 @@ export default class AnimatedProps extends AnimatedNode {
     if (this._target?.instance === instance) {
       return;
     }
-    this._target = {instance, connectedViewTag: null};
+    const target = (this._target = {instance, connectedViewTag: null});
     if (this.__isNative) {
-      this.#connectAnimatedView(this._target);
+      this.#connectAnimatedView(target);
+      this.#connectShadowNode(target);
     }
   }
 
@@ -283,6 +288,27 @@ export default class AnimatedProps extends AnimatedNode {
     target.connectedViewTag = viewTag;
   }
 
+  #connectShadowNode(target: TargetView): void {
+    if (
+      !ReactNativeFeatureFlags.cxxNativeAnimatedEnabled() ||
+      //eslint-disable-next-line
+      !ReactNativeFeatureFlags.useSharedAnimatedBackend()
+    ) {
+      return;
+    }
+
+    invariant(this.__isNative, 'Expected node to be marked as "native"');
+    // $FlowExpectedError[incompatible-type] - target.instance may be an HTMLElement but we need ReactNativeElement for Fabric
+    const shadowNode = getNodeFromPublicInstance(target.instance);
+    if (shadowNode == null) {
+      return;
+    }
+    NativeAnimatedHelper.API.connectAnimatedNodeToShadowNodeFamily(
+      this.__getNativeTag(),
+      shadowNode,
+    );
+  }
+
   #disconnectAnimatedView(target: TargetView): void {
     invariant(this.__isNative, 'Expected node to be marked as "native"');
     const viewTag = target.connectedViewTag;

package/Libraries/Core/ReactNativeVersion.js

@@ -29,7 +29,7 @@ export default class ReactNativeVersion {
   static major: number = 0;
   static minor: number = 84;
   static patch: number = 0;
-  static prerelease: string | null = 'nightly-20251205-95cc1e767';
+  static prerelease: string | null = 'nightly-20251206-63b0aef13';
 
   static getVersionString(): string {
     return `${this.major}.${this.minor}.${this.patch}${this.prerelease != null ? `-${this.prerelease}` : ''}`;

package/Libraries/NativeAnimation/RCTNativeAnimatedTurboModule.mm

@@ -10,6 +10,7 @@
 #import <React/RCTInitializing.h>
 #import <React/RCTNativeAnimatedNodesManager.h>
 #import <React/RCTNativeAnimatedTurboModule.h>
+#import <react/debug/react_native_assert.h>
 #import <react/featureflags/ReactNativeFeatureFlags.h>
 
 #import "RCTAnimationPlugins.h"
@@ -165,6 +166,12 @@ RCT_EXPORT_METHOD(connectAnimatedNodeToView : (double)nodeTag viewTag : (double)
   }];
 }
 
+RCT_EXPORT_METHOD(connectAnimatedNodeToShadowNodeFamily : (double)nodeTag shadowNode : (NSDictionary *)shadowNode)
+{
+  // This method should only be called when using CxxNativeAnimated
+  react_native_assert(false);
+}
+
 RCT_EXPORT_METHOD(disconnectAnimatedNodeFromView : (double)nodeTag viewTag : (double)viewTag)
 {
   [self queueOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {

package/Libraries/NativeAnimation/React-RCTAnimation.podspec

@@ -48,6 +48,7 @@ Pod::Spec.new do |s|
   add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])
   add_dependency(s, "React-NativeModulesApple")
   add_dependency(s, "React-featureflags")
+  add_dependency(s, "React-debug")
 
   add_rn_third_party_dependencies(s)
   add_rncore_dependency(s)

package/React/Base/RCTVersion.m

@@ -24,7 +24,7 @@ NSDictionary* RCTGetReactNativeVersion(void)
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(84),
                   RCTVersionPatch: @(0),
-                  RCTVersionPrerelease: @"nightly-20251205-95cc1e767",
+                  RCTVersionPrerelease: @"nightly-20251206-63b0aef13",
                   };
   });
   return __rnVersion;

package/React/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec-generated.mm

@@ -365,6 +365,10 @@ namespace facebook::react {
       return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, VoidKind, "connectAnimatedNodeToView", @selector(connectAnimatedNodeToView:viewTag:), args, count);
     }
 
+    static facebook::jsi::Value __hostFunction_NativeAnimatedModuleSpecJSI_connectAnimatedNodeToShadowNodeFamily(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
+      return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, VoidKind, "connectAnimatedNodeToShadowNodeFamily", @selector(connectAnimatedNodeToShadowNodeFamily:shadowNode:), args, count);
+    }
+
     static facebook::jsi::Value __hostFunction_NativeAnimatedModuleSpecJSI_disconnectAnimatedNodeFromView(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
       return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, VoidKind, "disconnectAnimatedNodeFromView", @selector(disconnectAnimatedNodeFromView:viewTag:), args, count);
     }
@@ -448,6 +452,9 @@ namespace facebook::react {
         methodMap_["connectAnimatedNodeToView"] = MethodMetadata {2, __hostFunction_NativeAnimatedModuleSpecJSI_connectAnimatedNodeToView};
         
         
+        methodMap_["connectAnimatedNodeToShadowNodeFamily"] = MethodMetadata {2, __hostFunction_NativeAnimatedModuleSpecJSI_connectAnimatedNodeToShadowNodeFamily};
+        
+        
         methodMap_["disconnectAnimatedNodeFromView"] = MethodMetadata {2, __hostFunction_NativeAnimatedModuleSpecJSI_disconnectAnimatedNodeFromView};
         
         

package/React/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec.h

@@ -323,6 +323,8 @@ saveValueCallback:(RCTResponseSenderBlock)saveValueCallback;
 - (void)extractAnimatedNodeOffset:(double)nodeTag;
 - (void)connectAnimatedNodeToView:(double)nodeTag
                           viewTag:(double)viewTag;
+- (void)connectAnimatedNodeToShadowNodeFamily:(double)nodeTag
+                                   shadowNode:(NSDictionary *)shadowNode;
 - (void)disconnectAnimatedNodeFromView:(double)nodeTag
                                viewTag:(double)viewTag;
 - (void)restoreDefaultValues:(double)nodeTag;

package/React/FBReactNativeSpec/FBReactNativeSpecJSI.h

@@ -1490,6 +1490,7 @@ protected:
     methodMap_["flattenAnimatedNodeOffset"] = MethodMetadata {.argCount = 1, .invoker = __flattenAnimatedNodeOffset};
     methodMap_["extractAnimatedNodeOffset"] = MethodMetadata {.argCount = 1, .invoker = __extractAnimatedNodeOffset};
     methodMap_["connectAnimatedNodeToView"] = MethodMetadata {.argCount = 2, .invoker = __connectAnimatedNodeToView};
+    methodMap_["connectAnimatedNodeToShadowNodeFamily"] = MethodMetadata {.argCount = 2, .invoker = __connectAnimatedNodeToShadowNodeFamily};
     methodMap_["disconnectAnimatedNodeFromView"] = MethodMetadata {.argCount = 2, .invoker = __disconnectAnimatedNodeFromView};
     methodMap_["restoreDefaultValues"] = MethodMetadata {.argCount = 1, .invoker = __restoreDefaultValues};
     methodMap_["dropAnimatedNode"] = MethodMetadata {.argCount = 1, .invoker = __dropAnimatedNode};
@@ -1638,6 +1639,15 @@ private:
       count <= 1 ? throw jsi::JSError(rt, "Expected argument in position 1 to be passed") : args[1].asNumber());return jsi::Value::undefined();
   }
 
+  static jsi::Value __connectAnimatedNodeToShadowNodeFamily(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
+    static_assert(
+      bridging::getParameterCount(&T::connectAnimatedNodeToShadowNodeFamily) == 3,
+      "Expected connectAnimatedNodeToShadowNodeFamily(...) to have 3 parameters");
+    bridging::callFromJs<void>(rt, &T::connectAnimatedNodeToShadowNodeFamily,  static_cast<NativeAnimatedModuleCxxSpec*>(&turboModule)->jsInvoker_, static_cast<T*>(&turboModule),
+      count <= 0 ? throw jsi::JSError(rt, "Expected argument in position 0 to be passed") : args[0].asNumber(),
+      count <= 1 ? throw jsi::JSError(rt, "Expected argument in position 1 to be passed") : args[1].asObject(rt));return jsi::Value::undefined();
+  }
+
   static jsi::Value __disconnectAnimatedNodeFromView(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
     static_assert(
       bridging::getParameterCount(&T::disconnectAnimatedNodeFromView) == 3,

package/ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.84.0-nightly-20251205-95cc1e767
+VERSION_NAME=0.84.0-nightly-20251206-63b0aef13
 react.internal.publishingGroup=com.facebook.react
 react.internal.hermesPublishingGroup=com.facebook.hermes
 

package/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.kt

@@ -15,6 +15,6 @@ public object ReactNativeVersion {
     "major" to 0,
     "minor" to 84,
     "patch" to 0,
-    "prerelease" to "nightly-20251205-95cc1e767"
+    "prerelease" to "nightly-20251206-63b0aef13"
   )
 }

package/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java

@@ -780,8 +780,6 @@ public class ReactScrollView extends ScrollView
     if (mPagingEnabled) {
       flingAndSnap(correctedVelocityY);
     } else if (mScroller != null) {
-      // FB SCROLLVIEW CHANGE
-
       // We provide our own version of fling that uses a different call to the standard OverScroller
       // which takes into account the possibility of adding new content while the ScrollView is
       // animating. Because we give essentially no max Y for the fling, the fling will continue as
@@ -806,8 +804,6 @@ public class ReactScrollView extends ScrollView
           );
 
       ViewCompat.postInvalidateOnAnimation(this);
-
-      // END FB SCROLLVIEW CHANGE
     } else {
       super.fling(correctedVelocityY);
     }
@@ -1266,11 +1262,8 @@ public class ReactScrollView extends ScrollView
   @Override
   protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
     if (mScroller != null && mContentView != null) {
-      // FB SCROLLVIEW CHANGE
-
       // This is part two of the reimplementation of fling to fix the bounce-back bug. See #fling()
-      // for
-      // more information.
+      // for more information.
 
       if (!mScroller.isFinished() && mScroller.getCurrY() != mScroller.getFinalY()) {
         int scrollRange = getMaxScrollY();
@@ -1279,8 +1272,6 @@ public class ReactScrollView extends ScrollView
           scrollY = scrollRange;
         }
       }
-
-      // END FB SCROLLVIEW CHANGE
     }
 
     if (ReactNativeFeatureFlags.shouldTriggerResponderTransferOnScrollAndroid()

package/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewAccessibilityDelegate.kt

@@ -219,6 +219,7 @@ internal class ReactTextViewAccessibilityDelegate(
     node.contentDescription = accessibleTextSpan.description
     node.addAction(AccessibilityNodeInfoCompat.ACTION_CLICK)
     node.setBoundsInParent(bounds)
+    node.setClickable(true)
     node.roleDescription = hostView.resources.getString(R.string.link_description)
     node.className = AccessibilityRole.getValue(AccessibilityRole.BUTTON)
   }

package/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.kt

@@ -902,21 +902,7 @@ internal object TextLayoutManager {
       paint: TextPaint,
   ): Unit {
     var boring = isBoring(text, paint)
-    var layout =
-        createLayout(
-            text,
-            boring,
-            width,
-            widthYogaMeasureMode,
-            includeFontPadding,
-            textBreakStrategy,
-            hyphenationFrequency,
-            alignment,
-            justificationMode,
-            null,
-            ReactConstants.UNSET,
-            paint,
-        )
+    var layout: Layout
 
     // Minimum font size is 4pts to match the iOS implementation.
     val minimumFontSize =
@@ -929,20 +915,20 @@ internal object TextLayoutManager {
       currentFontSize = max(currentFontSize, span.size).toInt()
     }
 
-    val initialFontSize = currentFontSize
-    while (
-        currentFontSize > minimumFontSize &&
-            ((maximumNumberOfLines != ReactConstants.UNSET &&
-                maximumNumberOfLines != 0 &&
-                layout.lineCount > maximumNumberOfLines) ||
-                (heightYogaMeasureMode != YogaMeasureMode.UNDEFINED && layout.height > height) ||
-                (text.length == 1 && layout.getLineWidth(0) > width))
-    ) {
-      // TODO: We could probably use a smarter algorithm here. This will require 0(n)
-      // measurements based on the number of points the font size needs to be reduced by.
-      currentFontSize -= max(1, 1.dpToPx().toInt())
+    var intervalStart = minimumFontSize
+    var intervalEnd = currentFontSize
+    var previousFontSize = currentFontSize
 
-      val ratio = currentFontSize.toFloat() / initialFontSize.toFloat()
+    // `true` instead of `intervalStart != intervalEnd` so that the last iteration where both are at
+    // the same size goes through and updates all relevant objects with the final font size
+    while (true) {
+      // Always use the point closer to the end of the interval, this way at the end when
+      // end - start == 1, we land at current = end instead of current = start. In the first case
+      // one measurement may be enough if intervalEnd is small enough to fit. In the second case
+      // we always end up doing two measurements to check whether intervalEnd would fit.
+      val currentFontSize = (intervalStart + intervalEnd + 1) / 2
+
+      val ratio = currentFontSize.toFloat() / previousFontSize.toFloat()
       paint.textSize = max((paint.textSize * ratio).toInt(), minimumFontSize).toFloat()
 
       val sizeSpans = text.getSpans(0, text.length, ReactAbsoluteSizeSpan::class.java)
@@ -973,6 +959,34 @@ internal object TextLayoutManager {
               ReactConstants.UNSET,
               paint,
           )
+
+      if (intervalStart == intervalEnd) {
+        // everything is updated at this point
+        break
+      }
+
+      val singleLineTextExceedsWidth = text.length == 1 && layout.getLineWidth(0) > width
+      val exceedsHeight =
+          heightYogaMeasureMode != YogaMeasureMode.UNDEFINED && layout.height > height
+      val exceedsMaximumNumberOfLines =
+          maximumNumberOfLines != ReactConstants.UNSET &&
+              maximumNumberOfLines != 0 &&
+              layout.lineCount > maximumNumberOfLines
+
+      if (
+          currentFontSize > minimumFontSize &&
+              (exceedsMaximumNumberOfLines || exceedsHeight || singleLineTextExceedsWidth)
+      ) {
+        // Text doesn't fit the constraints. If intervalEnd - intervalStart == 1, it's known that
+        // the correct font size is intervalStart. Set intervalEnd to match intervalStart and do one
+        // more iteration to update layout correctly.
+        intervalEnd = if (intervalEnd - intervalStart == 1) intervalStart else currentFontSize
+      } else {
+        // Text fits the constraints
+        intervalStart = currentFontSize
+      }
+
+      previousFontSize = currentFontSize
     }
   }
 

package/ReactCommon/cxxreact/ReactNativeVersion.h

@@ -22,7 +22,7 @@ constexpr struct {
   int32_t Major = 0;
   int32_t Minor = 84;
   int32_t Patch = 0;
-  std::string_view Prerelease = "nightly-20251205-95cc1e767";
+  std::string_view Prerelease = "nightly-20251206-63b0aef13";
 } ReactNativeVersion;
 
 } // namespace facebook::react

package/ReactCommon/jsi/jsi/jsi.cpp

@@ -231,8 +231,9 @@ inline char hexDigit(unsigned x) {
 // ASCII characters
 bool isAllASCII(const char16_t* utf16, size_t length) {
   for (const char16_t* e = utf16 + length; utf16 != e; ++utf16) {
-    if (*utf16 > 0x7F)
+    if (*utf16 > 0x7F) {
       return false;
+    }
   }
   return true;
 }

package/ReactCommon/jsinspector-modern/HostAgent.cpp

@@ -147,7 +147,7 @@ class HostAgent::Impl final {
     if (InspectorFlags::getInstance().getNetworkInspectionEnabled()) {
       if (req.method == "Network.enable") {
         auto& inspector = getInspectorInstance();
-        if (inspector.getSystemState().registeredPagesCount > 1) {
+        if (inspector.getSystemState().registeredHostsCount > 1) {
           frontendChannel_(
               cdp::jsonError(
                   req.id,
@@ -231,7 +231,7 @@ class HostAgent::Impl final {
               "ReactNativeApplication.metadataUpdated",
               createHostMetadataPayload(hostMetadata_)));
       auto& inspector = getInspectorInstance();
-      bool isSingleHost = inspector.getSystemState().registeredPagesCount <= 1;
+      bool isSingleHost = inspector.getSystemState().registeredHostsCount <= 1;
       if (!isSingleHost) {
         emitSystemStateChanged(isSingleHost);
       }

package/ReactCommon/jsinspector-modern/InspectorInterfaces.cpp

@@ -67,8 +67,8 @@ class InspectorImpl : public IInspector {
    public:
     explicit SystemStateListener(InspectorSystemState& state) : state_(state) {}
 
-    void onPageAdded(int /*pageId*/) override {
-      state_.registeredPagesCount++;
+    void unstable_onHostTargetAdded() override {
+      state_.registeredHostsCount++;
     }
 
    private:
@@ -94,6 +94,7 @@ class InspectorImpl : public IInspector {
     ConnectFunc connectFunc_;
     InspectorTargetCapabilities capabilities_;
   };
+
   mutable std::mutex mutex_;
   int nextPageId_{1};
   std::map<int, Page> pages_;
@@ -142,9 +143,13 @@ int InspectorImpl::addPage(
       pageId,
       Page{pageId, description, vm, std::move(connectFunc), capabilities});
 
-  for (const auto& listenerWeak : listeners_) {
-    if (auto listener = listenerWeak.lock()) {
-      listener->onPageAdded(pageId);
+  // Strong assumption: If prefersFuseboxFrontend is set, the page added is a
+  // HostTarget and not a legacy Hermes runtime target.
+  if (capabilities.prefersFuseboxFrontend) {
+    for (const auto& listenerWeak : listeners_) {
+      if (auto listener = listenerWeak.lock()) {
+        listener->unstable_onHostTargetAdded();
+      }
     }
   }
 

package/ReactCommon/jsinspector-modern/InspectorInterfaces.h

@@ -53,7 +53,7 @@ using InspectorPage = InspectorPageDescription;
 
 struct InspectorSystemState {
   /** The total count of pages registered during the app lifetime. */
-  int registeredPagesCount;
+  int registeredHostsCount;
 };
 
 /// IRemoteConnection allows the VM to send debugger messages to the client.
@@ -83,7 +83,7 @@ class JSINSPECTOR_EXPORT ILocalConnection : public IDestructible {
 class JSINSPECTOR_EXPORT IPageStatusListener : public IDestructible {
  public:
   virtual ~IPageStatusListener() = 0;
-  virtual void onPageAdded(int /*pageId*/) {}
+  virtual void unstable_onHostTargetAdded() {}
   virtual void onPageRemoved(int /*pageId*/) {}
 };
 

package/ReactCommon/jsinspector-modern/TracingAgent.cpp

@@ -50,7 +50,7 @@ TracingAgent::~TracingAgent() {
 bool TracingAgent::handleRequest(const cdp::PreparsedRequest& req) {
   if (req.method == "Tracing.start") {
     auto& inspector = getInspectorInstance();
-    if (inspector.getSystemState().registeredPagesCount > 1) {
+    if (inspector.getSystemState().registeredHostsCount > 1) {
       frontendChannel_(
           cdp::jsonError(
               req.id,

package/ReactCommon/react/renderer/animated/AnimatedModule.cpp

@@ -9,9 +9,9 @@
 
 #include <glog/logging.h>
 #include <jsi/JSIDynamic.h>
+#include <react/renderer/bridging/bridging.h>
 
 namespace facebook::react {
-
 AnimatedModule::AnimatedModule(
     std::shared_ptr<CallInvoker> jsInvoker,
     std::shared_ptr<NativeAnimatedNodesManagerProvider> nodesManagerProvider)
@@ -160,6 +160,19 @@ void AnimatedModule::connectAnimatedNodeToView(
       ConnectAnimatedNodeToViewOp{.nodeTag = nodeTag, .viewTag = viewTag});
 }
 
+void AnimatedModule::connectAnimatedNodeToShadowNodeFamily(
+    jsi::Runtime& rt,
+    Tag nodeTag,
+    jsi::Object shadowNodeObj) {
+  const auto& shadowNode = Bridging<std::shared_ptr<const ShadowNode>>::fromJs(
+      rt, jsi::Value(rt, shadowNodeObj));
+
+  operations_.emplace_back(
+      ConnectAnimatedNodeToShadowNodeFamilyOp{
+          .nodeTag = nodeTag,
+          .shadowNodeFamily = shadowNode->getFamilyShared()});
+}
+
 void AnimatedModule::disconnectAnimatedNodeFromView(
     jsi::Runtime& /*rt*/,
     Tag nodeTag,
@@ -282,6 +295,11 @@ void AnimatedModule::executeOperation(
                                    DisconnectAnimatedNodeFromViewOp>) {
             nodesManager->disconnectAnimatedNodeFromView(
                 op.nodeTag, op.viewTag);
+          } else if constexpr (std::is_same_v<
+                                   T,
+                                   ConnectAnimatedNodeToShadowNodeFamilyOp>) {
+            nodesManager->connectAnimatedNodeToShadowNodeFamily(
+                op.nodeTag, op.shadowNodeFamily);
           } else if constexpr (std::is_same_v<T, RestoreDefaultValuesOp>) {
             nodesManager->restoreDefaultValues(op.nodeTag);
           } else if constexpr (std::is_same_v<T, DropAnimatedNodeOp>) {

package/ReactCommon/react/renderer/animated/AnimatedModule.h

@@ -87,6 +87,11 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
     Tag viewTag{};
   };
 
+  struct ConnectAnimatedNodeToShadowNodeFamilyOp {
+    Tag nodeTag{};
+    std::shared_ptr<const ShadowNodeFamily> shadowNodeFamily{};
+  };
+
   struct DisconnectAnimatedNodeFromViewOp {
     Tag nodeTag{};
     Tag viewTag{};
@@ -124,6 +129,7 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
       SetAnimatedNodeOffsetOp,
       SetAnimatedNodeValueOp,
       ConnectAnimatedNodeToViewOp,
+      ConnectAnimatedNodeToShadowNodeFamilyOp,
       DisconnectAnimatedNodeFromViewOp,
       RestoreDefaultValuesOp,
       FlattenAnimatedNodeOffsetOp,
@@ -176,6 +182,8 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>, publi
 
   void connectAnimatedNodeToView(jsi::Runtime &rt, Tag nodeTag, Tag viewTag);
 
+  void connectAnimatedNodeToShadowNodeFamily(jsi::Runtime &rt, Tag nodeTag, jsi::Object shadowNode);
+
   void disconnectAnimatedNodeFromView(jsi::Runtime &rt, Tag nodeTag, Tag viewTag);
 
   void restoreDefaultValues(jsi::Runtime &rt, Tag nodeTag);

package/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp

@@ -238,6 +238,20 @@ void NativeAnimatedNodesManager::connectAnimatedNodeToView(
   }
 }
 
+void NativeAnimatedNodesManager::connectAnimatedNodeToShadowNodeFamily(
+    Tag propsNodeTag,
+    std::shared_ptr<const ShadowNodeFamily> family) noexcept {
+  react_native_assert(propsNodeTag);
+  auto node = getAnimatedNode<PropsAnimatedNode>(propsNodeTag);
+  if (node != nullptr && family != nullptr) {
+    std::lock_guard<std::mutex> lock(tagToShadowNodeFamilyMutex_);
+    tagToShadowNodeFamily_[family->getTag()] = family;
+  } else {
+    LOG(WARNING)
+        << "Cannot ConnectAnimatedNodeToShadowNodeFamily, animated node has to be props type";
+  }
+}
+
 void NativeAnimatedNodesManager::disconnectAnimatedNodeFromView(
     Tag propsNodeTag,
     Tag viewTag) noexcept {
@@ -251,6 +265,10 @@ void NativeAnimatedNodesManager::disconnectAnimatedNodeFromView(
       std::lock_guard<std::mutex> lock(connectedAnimatedNodesMutex_);
       connectedAnimatedNodes_.erase(viewTag);
     }
+    {
+      std::lock_guard<std::mutex> lock(tagToShadowNodeFamilyMutex_);
+      tagToShadowNodeFamily_.erase(viewTag);
+    }
     updatedNodeTags_.insert(node->tag());
 
     onManagedPropsRemoved(viewTag);
@@ -705,7 +723,8 @@ void NativeAnimatedNodesManager::updateNodes(
     for (auto childTag : nextNode.node->getChildren()) {
       auto child = getAnimatedNode<AnimatedNode>(childTag);
       child->activeIncomingNodes--;
-      if (child->activeIncomingNodes == 0 && child->activeIncomingNodes == 0) {
+      if (child->activeIncomingNodes == 0 &&
+          child->bfsColor != animatedGraphBFSColor_) {
         child->bfsColor = animatedGraphBFSColor_;
 #ifdef REACT_NATIVE_DEBUG
         updatedNodesCount++;
@@ -985,15 +1004,47 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
       }
 
       for (auto& [tag, props] : updateViewPropsDirect_) {
-        // TODO: also handle layout props (updateViewProps_). It is skipped for
-        // now, because the backend requires shadowNodeFamilies to be able to
-        // commit to the ShadowTree
         propsBuilder.storeDynamic(props);
         mutations.push_back(
             AnimationMutation{tag, nullptr, propsBuilder.get()});
         containsChange = true;
       }
-      updateViewPropsDirect_.clear();
+      {
+        std::lock_guard<std::mutex> lock(tagToShadowNodeFamilyMutex_);
+        for (auto& [tag, props] : updateViewProps_) {
+          auto familyIt = tagToShadowNodeFamily_.find(tag);
+          if (familyIt == tagToShadowNodeFamily_.end()) {
+            continue;
+          }
+          if (auto family = familyIt->second.lock()) {
+            // C++ Animated produces props in the form of a folly::dynamic, so
+            // it wouldn't make sense to unpack it here. However, for the
+            // purposes of testing, we want to be able to use the statically
+            // typed AnimationMutation. At a later stage we will instead just
+            // pass the dynamic directly to propsBuilder and the new API could
+            // be used by 3rd party libraries or in the fututre by Animated.
+            if (props.find("width") != props.items().end()) {
+              propsBuilder.setWidth(
+                  yoga::Style::SizeLength::points(props["width"].asDouble()));
+            }
+            if (props.find("height") != props.items().end()) {
+              propsBuilder.setHeight(
+                  yoga::Style::SizeLength::points(props["height"].asDouble()));
+            }
+            mutations.push_back(
+                AnimationMutation{
+                    .tag = tag,
+                    .family = family,
+                    .props = propsBuilder.get(),
+                });
+          }
+          containsChange = true;
+        }
+      }
+      if (containsChange) {
+        updateViewPropsDirect_.clear();
+        updateViewProps_.clear();
+      }
     }
 
     if (!containsChange) {
@@ -1013,16 +1064,38 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
         }
       }
 
-      // Step 2: update all nodes that are connected to the finished animations.
+      // Step 2: update all nodes that are connected to the finished
+      // animations.
       updateNodes(finishedAnimationValueNodes);
 
       isEventAnimationInProgress_ = false;
 
       for (auto& [tag, props] : updateViewPropsDirect_) {
-        // TODO: handle layout props
         propsBuilder.storeDynamic(props);
         mutations.push_back(
-            AnimationMutation{tag, nullptr, propsBuilder.get()});
+            AnimationMutation{
+                .tag = tag,
+                .family = nullptr,
+                .props = propsBuilder.get(),
+            });
+      }
+      {
+        std::lock_guard<std::mutex> lock(tagToShadowNodeFamilyMutex_);
+        for (auto& [tag, props] : updateViewProps_) {
+          auto familyIt = tagToShadowNodeFamily_.find(tag);
+          if (familyIt == tagToShadowNodeFamily_.end()) {
+            continue;
+          }
+          if (auto family = familyIt->second.lock()) {
+            propsBuilder.storeDynamic(props);
+            mutations.push_back(
+                AnimationMutation{
+                    .tag = tag,
+                    .family = family,
+                    .props = propsBuilder.get(),
+                });
+          }
+        }
       }
     }
   } else {
@@ -1103,7 +1176,8 @@ void NativeAnimatedNodesManager::onRender() {
         }
       }
 
-      // Step 2: update all nodes that are connected to the finished animations.
+      // Step 2: update all nodes that are connected to the finished
+      // animations.
       updateNodes(finishedAnimationValueNodes);
 
       isEventAnimationInProgress_ = false;