Introduce AnimationBackendCommitHook (facebook#54138)

Summary:
Pull Request resolved: facebook#54138

This diff introduces `AnimationBackendCommitHook`. It is responsible for keeping animation updates in sync with React. When React does its updates, it doesn't look at the last mounted tree. Instead it hold its own references to ShadowNodes, and commits them whenever there is a (JS) rendering update. Any props that were commited from outside of React (e.g. by Reanimated) are lost.

To work around this we have the Commit Hook. It enables us to override any rendering updates that react does, just before the ShadowTree enters the layout phase.

In this implementation we utilize RNSRU to push those updates back to React (whenever there is a commit originating from React). So after a render React will now hold references to ShadowNodes with the current animation state (in props). This is a new approach, in Reanimated's current implementation this is disabled, and we reapply the changes via the Commit Hook on each React commit.

# Changelog
[General] [Added] - Add `AnimationBackendCommitHook` and `AnimatedPropsRegistry
[General] [Changed] - Use the commit hook to reconcile the UI updates with react

Reviewed By: sammy-SC, zeyap

Differential Revision: D84250600

fbshipit-source-id: c5e4b2030e55830ac5df29bde492d33a10f2de35

Author: Bartlomiej Bloniarz

packages/react-native/Libraries/Animated/__tests__/AnimatedBackend-itest.js

@@ -15,7 +15,7 @@ import type {HostInstance} from 'react-native';
 
 import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
 import * as Fantom from '@react-native/fantom';
-import {createRef} from 'react';
+import {createRef, useEffect, useState} from 'react';
 import {Animated, useAnimatedValue} from 'react-native';
 import {allowStyleProp} from 'react-native/Libraries/Animated/NativeAnimatedAllowlist';
 import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
@@ -141,3 +141,160 @@ test('animate layout props', () => {
     <rn-view height="100.000000" />,
   );
 });
+
+test('animate layout props and rerender', () => {
+  const viewRef = createRef<HostInstance>();
+  allowStyleProp('height');
+
+  let _animatedHeight;
+  let _heightAnimation;
+  let _setWidth;
+
+  function MyApp() {
+    const animatedHeight = useAnimatedValue(0);
+    const [width, setWidth] = useState(100);
+    _animatedHeight = animatedHeight;
+    _setWidth = setWidth;
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: width,
+            height: animatedHeight,
+          },
+        ]}
+      />
+    );
+  }
+
+  const root = Fantom.createRoot();
+
+  Fantom.runTask(() => {
+    root.render(<MyApp />);
+  });
+
+  Fantom.runTask(() => {
+    _heightAnimation = Animated.timing(_animatedHeight, {
+      toValue: 100,
+      duration: 1000,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  Fantom.unstable_produceFramesForDuration(500);
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="50.000000" width="100.000000" />,
+  );
+
+  Fantom.runTask(() => {
+    _setWidth(200);
+  });
+
+  // TODO: this shouldn't be neccessary since animation should be stopped after duration
+  Fantom.runTask(() => {
+    _heightAnimation?.stop();
+  });
+
+  // TODO: getFabricUpdateProps is not working with the cloneMutliple method
+  // expect(Fantom.unstable_getFabricUpdateProps(viewElement).height).toBe(50);
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="50.000000" width="200.000000" />,
+  );
+});
+
+test('animate layout props and rerender in many components', () => {
+  const viewRef = createRef<HostInstance>();
+  allowStyleProp('height');
+
+  let _animatedHeight;
+  let _heightAnimation;
+  let _setWidth;
+  const N = 100;
+
+  function AnimatedComponent() {
+    const animatedHeight = useAnimatedValue(0);
+
+    useEffect(() => {
+      Animated.timing(animatedHeight, {
+        toValue: 100,
+        duration: 1000,
+        useNativeDriver: true,
+      }).start();
+    });
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: 100,
+            height: animatedHeight,
+          },
+        ]}
+      />
+    );
+  }
+
+  function MyApp() {
+    const animatedHeight = useAnimatedValue(0);
+    const [width, setWidth] = useState(100);
+    _animatedHeight = animatedHeight;
+    _setWidth = setWidth;
+    return (
+      <Animated.View
+        ref={viewRef}
+        style={[
+          {
+            width: width,
+            height: animatedHeight,
+          },
+        ]}>
+        {Array.from({length: N}, (_, i) => (
+          <AnimatedComponent key={i} />
+        ))}
+      </Animated.View>
+    );
+  }
+
+  const root = Fantom.createRoot();
+
+  Fantom.runTask(() => {
+    root.render(<MyApp />);
+  });
+
+  Fantom.runTask(() => {
+    _heightAnimation = Animated.timing(_animatedHeight, {
+      toValue: 100,
+      duration: 1000,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  Fantom.unstable_produceFramesForDuration(500);
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="50.000000" width="100.000000">
+      {Array.from({length: N}, (_, i) => (
+        <rn-view key={i} height="50.000000" width="100.000000" />
+      ))}
+    </rn-view>,
+  );
+
+  Fantom.runTask(() => {
+    _setWidth(200);
+  });
+
+  // TODO: this shouldn't be neccessary since animation should be stopped after duration
+  Fantom.runTask(() => {
+    _heightAnimation?.stop();
+  });
+
+  // TODO: getFabricUpdateProps is not working with the cloneMutliple method
+  // expect(Fantom.unstable_getFabricUpdateProps(viewElement).height).toBe(50);
+  expect(root.getRenderedOutput({props: ['height', 'width']}).toJSX()).toEqual(
+    <rn-view height="50.000000" width="200.000000">
+      {Array.from({length: N}, (_, i) => (
+        <rn-view key={i} height="50.000000" width="100.000000" />
+      ))}
+    </rn-view>,
+  );
+});

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsRegistry.cpp

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "AnimatedPropsRegistry.h"
+#include <react/renderer/core/PropsParserContext.h>
+#include "AnimatedProps.h"
+
+namespace facebook::react {
+
+void AnimatedPropsRegistry::update(
+    const std::unordered_map<SurfaceId, SurfaceUpdates>& surfaceUpdates) {
+  auto lock = std::lock_guard(mutex_);
+  for (const auto& [surfaceId, updates] : surfaceUpdates) {
+    auto& surfaceContext = surfaceContexts_[surfaceId];
+    auto& pendingMap = surfaceContext.pendingMap;
+    auto& pendingFamilies = surfaceContext.pendingFamilies;
+
+    auto& updatesMap = updates.propsMap;
+    auto& updatesFamilies = updates.families;
+
+    for (auto& family : updatesFamilies) {
+      pendingFamilies.insert(family);
+    }
+
+    for (auto& [tag, animatedProps] : updatesMap) {
+      auto it = pendingMap.find(tag);
+      if (it == pendingMap.end()) {
+        it = pendingMap.insert_or_assign(tag, std::make_unique<PropsSnapshot>())
+                 .first;
+      }
+      auto& snapshot = it->second;
+      auto& viewProps = snapshot->props;
+
+      for (const auto& animatedProp : animatedProps.props) {
+        snapshot->propNames.insert(animatedProp->propName);
+        cloneProp(viewProps, *animatedProp);
+      }
+    }
+  }
+}
+
+std::pair<std::unordered_set<const ShadowNodeFamily*>&, SnapshotMap&>
+AnimatedPropsRegistry::getMap(SurfaceId surfaceId) {
+  auto lock = std::lock_guard(mutex_);
+  auto& [pendingMap, map, pendingFamilies, families] =
+      surfaceContexts_[surfaceId];
+
+  for (auto& family : pendingFamilies) {
+    families.insert(family);
+  }
+  for (auto& [tag, propsSnapshot] : pendingMap) {
+    auto currentIt = map.find(tag);
+    if (currentIt == map.end()) {
+      map.insert_or_assign(tag, std::move(propsSnapshot));
+    } else {
+      auto& currentSnapshot = currentIt->second;
+      for (auto& propName : propsSnapshot->propNames) {
+        currentSnapshot->propNames.insert(propName);
+        updateProp(propName, currentSnapshot->props, *propsSnapshot);
+      }
+    }
+  }
+  pendingMap.clear();
+  pendingFamilies.clear();
+
+  return {families, map};
+}
+
+void AnimatedPropsRegistry::clear(SurfaceId surfaceId) {
+  auto lock = std::lock_guard(mutex_);
+
+  auto& surfaceContext = surfaceContexts_[surfaceId];
+  surfaceContext.families.clear();
+  surfaceContext.map.clear();
+}
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsRegistry.h

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <folly/dynamic.h>
+#include <react/renderer/components/view/BaseViewProps.h>
+#include <react/renderer/core/ReactPrimitives.h>
+#include <react/renderer/uimanager/UIManager.h>
+#include <react/renderer/uimanager/UIManagerCommitHook.h>
+#include "AnimatedProps.h"
+
+namespace facebook::react {
+
+struct PropsSnapshot {
+  BaseViewProps props;
+  std::unordered_set<PropName> propNames;
+};
+
+struct SurfaceContext {
+  std::unordered_map<Tag, std::unique_ptr<PropsSnapshot>> pendingMap, map;
+  std::unordered_set<const ShadowNodeFamily *> pendingFamilies, families;
+};
+
+struct SurfaceUpdates {
+  std::unordered_set<const ShadowNodeFamily *> families;
+  std::unordered_map<Tag, AnimatedProps> propsMap;
+};
+
+using SnapshotMap = std::unordered_map<Tag, std::unique_ptr<PropsSnapshot>>;
+
+class AnimatedPropsRegistry {
+ public:
+  void update(const std::unordered_map<SurfaceId, SurfaceUpdates> &surfaceUpdates);
+  void clear(SurfaceId surfaceId);
+  std::pair<std::unordered_set<const ShadowNodeFamily *> &, SnapshotMap &> getMap(SurfaceId surfaceId);
+
+ private:
+  std::unordered_map<SurfaceId, SurfaceContext> surfaceContexts_;
+  std::mutex mutex_;
+};
+
+inline void updateProp(const PropName propName, BaseViewProps &viewProps, const PropsSnapshot &snapshot)
+{
+  switch (propName) {
+    case OPACITY:
+      viewProps.opacity = snapshot.props.opacity;
+      break;
+
+    case WIDTH:
+      viewProps.yogaStyle.setDimension(
+          yoga::Dimension::Width, snapshot.props.yogaStyle.dimension(yoga::Dimension::Width));
+      break;
+
+    case HEIGHT: {
+      auto d = snapshot.props.yogaStyle.dimension(yoga::Dimension::Height);
+      viewProps.yogaStyle.setDimension(yoga::Dimension::Height, d);
+      break;
+    }
+
+    case TRANSFORM:
+      viewProps.transform = snapshot.props.transform;
+      break;
+
+    case BORDER_RADII:
+      viewProps.borderRadii = snapshot.props.borderRadii;
+      break;
+
+    case FLEX:
+      viewProps.yogaStyle.setFlex(snapshot.props.yogaStyle.flex());
+      break;
+
+    case BACKGROUND_COLOR:
+      viewProps.backgroundColor = snapshot.props.backgroundColor;
+      break;
+  }
+}
+
+} // namespace facebook::react