Layout Animations rewrite

Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp

@@ -11,35 +11,117 @@ namespace reanimated {
 const long long idOffset = 1e9;
 
 LayoutAnimationsProxy::LayoutAnimationsProxy(
-    std::function<void(int, jsi::Object newProps)> _notifyAboutProgress,
-    std::function<void(int, bool)> _notifyAboutEnd)
-    : notifyAboutProgress(std::move(_notifyAboutProgress)),
-      notifyAboutEnd(std::move(_notifyAboutEnd)) {}
+    std::function<void(int, jsi::Object newProps)> progressHandler,
+    std::function<void(int, bool, bool)> endHandler,
+    std::weak_ptr<ErrorHandler> weakErrorHandler)
+    : progressHandler_(std::move(progressHandler)),
+      endHandler_(std::move(endHandler)),
+      weakErrorHandler_(weakErrorHandler) {}
 
 void LayoutAnimationsProxy::startObserving(
     int tag,
     std::shared_ptr<MutableValue> sv,
     jsi::Runtime &rt) {
-  observedValues[tag] = sv;
+  observedValues_[tag] = sv;
+  this->progressHandler_(tag, sv->value->toJSValue(rt).asObject(rt));
   sv->addListener(tag + idOffset, [sv, tag, this, &rt]() {
-    std::shared_ptr<FrozenObject> newValue =
-        ValueWrapper::asFrozenObject(sv->value->valueContainer);
-    this->notifyAboutProgress(tag, newValue->shallowClone(rt));
+    this->progressHandler_(tag, sv->value->toJSValue(rt).asObject(rt));
   });
 }
 
-void LayoutAnimationsProxy::stopObserving(int tag, bool finished) {
-  if (observedValues.count(tag) == 0) {
+void LayoutAnimationsProxy::stopObserving(
+    int tag,
+    bool finished,
+    bool removeView) {
+  if (observedValues_.count(tag) == 0) {
     return;
   }
-  std::shared_ptr<MutableValue> sv = observedValues[tag];
+  std::shared_ptr<MutableValue> sv = observedValues_[tag];
   sv->removeListener(tag + idOffset);
-  observedValues.erase(tag);
-  this->notifyAboutEnd(tag, !finished);
+  observedValues_.erase(tag);
+  this->endHandler_(tag, !finished, removeView);
+}
+
+void LayoutAnimationsProxy::configureAnimation(
+    int tag,
+    const std::string &type,
+    std::shared_ptr<ShareableValue> config,
+    std::shared_ptr<ShareableValue> viewSharedValue) {
+  auto lock = std::unique_lock<std::mutex>(animationsMutex_);
+  if (type == "entering") {
+    enteringAnimations_[tag] = config;
+  } else if (type == "exiting") {
+    exitingAnimations_[tag] = config;
+  } else if (type == "layout") {
+    layoutAnimations_[tag] = config;
+  }
+  viewSharedValues_[tag] = viewSharedValue;
+}
+
+bool LayoutAnimationsProxy::hasLayoutAnimation(
+    int tag,
+    const std::string &type) {
+  auto lock = std::unique_lock<std::mutex>(animationsMutex_);
+  if (type == "entering") {
+    return enteringAnimations_.find(tag) != enteringAnimations_.end();
+  } else if (type == "exiting") {
+    return exitingAnimations_.find(tag) != exitingAnimations_.end();
+  } else if (type == "layout") {
+    return layoutAnimations_.find(tag) != layoutAnimations_.end();
+  }
+  return false;
+}
+
+void LayoutAnimationsProxy::clearLayoutAnimationConfig(int tag) {
+  auto lock = std::unique_lock<std::mutex>(animationsMutex_);
+  enteringAnimations_.erase(tag);
+  exitingAnimations_.erase(tag);
+  layoutAnimations_.erase(tag);
+  viewSharedValues_.erase(tag);
 }
 
-void LayoutAnimationsProxy::notifyAboutCancellation(int tag) {
-  this->notifyAboutEnd(tag, false);
+void LayoutAnimationsProxy::startLayoutAnimation(
+    jsi::Runtime &rt,
+    int tag,
+    const std::string &type,
+    const jsi::Object &values) {
+  std::shared_ptr<ShareableValue> config;
+  std::shared_ptr<ShareableValue> viewSharedValue;
+  {
+    auto lock = std::unique_lock<std::mutex>(animationsMutex_);
+    if (type == "entering") {
+      config = enteringAnimations_[tag];
+    } else if (type == "exiting") {
+      config = exitingAnimations_[tag];
+    } else if (type == "layout") {
+      config = layoutAnimations_[tag];
+    }
+    viewSharedValue = viewSharedValues_[tag];
+  }
+
+  jsi::Value layoutAnimationRepositoryAsValue =
+      rt.global()
+          .getPropertyAsObject(rt, "global")
+          .getProperty(rt, "LayoutAnimationRepository");
+  if (layoutAnimationRepositoryAsValue.isUndefined()) {
+    auto errorHandler = weakErrorHandler_.lock();
+    if (errorHandler != nullptr) {
+      errorHandler->setError(
+          "startLayoutAnimation called before initializing LayoutAnimationRepository");
+      errorHandler->raise();
+    }
+    return;
+  }
+  jsi::Function startAnimationForTag =
+      layoutAnimationRepositoryAsValue.getObject(rt).getPropertyAsFunction(
+          rt, "startAnimationForTag");
+  startAnimationForTag.call(
+      rt,
+      jsi::Value(tag),
+      jsi::String::createFromAscii(rt, type),
+      values,
+      config->toJSValue(rt),
+      viewSharedValue->toJSValue(rt));
 }
 
 } // namespace reanimated

Common/cpp/LayoutAnimations/LayoutAnimationsProxy.h

@@ -1,32 +1,56 @@
 #pragma once
 
+#include <ErrorHandler.h>
 #include <jsi/jsi.h>
 #include <stdio.h>
 #include <functional>
-#include <map>
 #include <memory>
+#include <mutex>
+#include <string>
+#include <unordered_map>
 
 namespace reanimated {
 
 using namespace facebook;
 
 class MutableValue;
+class ShareableValue;
 
 class LayoutAnimationsProxy {
  public:
   LayoutAnimationsProxy(
-      std::function<void(int, jsi::Object newProps)> _notifyAboutProgress,
-      std::function<void(int, bool)> _notifyAboutEnd);
+      std::function<void(int, jsi::Object newProps)> progressHandler,
+      std::function<void(int, bool, bool)> endHandler,
+      std::weak_ptr<ErrorHandler> weakErrorHandler);
 
   void
   startObserving(int tag, std::shared_ptr<MutableValue> sv, jsi::Runtime &rt);
-  void stopObserving(int tag, bool finished);
-  void notifyAboutCancellation(int tag);
+  void stopObserving(int tag, bool finished, bool removeView);
+  void configureAnimation(
+      int tag,
+      const std::string &type,
+      std::shared_ptr<ShareableValue> config,
+      std::shared_ptr<ShareableValue> viewSharedValue);
+  bool hasLayoutAnimation(int tag, const std::string &type);
+  void startLayoutAnimation(
+      jsi::Runtime &rt,
+      int tag,
+      const std::string &type,
+      const jsi::Object &values);
+  void clearLayoutAnimationConfig(int tag);
 
  private:
-  std::function<void(int, jsi::Object newProps)> notifyAboutProgress;
-  std::function<void(int, bool)> notifyAboutEnd;
-  std::map<int, std::shared_ptr<MutableValue>> observedValues;
+  std::function<void(int, jsi::Object newProps)> progressHandler_;
+  std::function<void(int, bool, bool)> endHandler_;
+  std::weak_ptr<ErrorHandler> weakErrorHandler_;
+  std::unordered_map<int, std::shared_ptr<MutableValue>> observedValues_;
+  std::unordered_map<int, std::shared_ptr<ShareableValue>> viewSharedValues_;
+  std::unordered_map<int, std::shared_ptr<ShareableValue>> enteringAnimations_;
+  std::unordered_map<int, std::shared_ptr<ShareableValue>> exitingAnimations_;
+  std::unordered_map<int, std::shared_ptr<ShareableValue>> layoutAnimations_;
+  mutable std::mutex
+      animationsMutex_; // Protects `enteringAnimations_`, `exitingAnimations_`,
+                        // `layoutAnimations_` and `viewSharedValues_`.
 };
 
 } // namespace reanimated

Common/cpp/NativeModules/NativeReanimatedModule.cpp

@@ -87,6 +87,7 @@ NativeReanimatedModule::NativeReanimatedModule(
     PlatformDepMethodsHolder platformDepMethodsHolder)
     : NativeReanimatedModuleSpec(jsInvoker),
       RuntimeManager(rt, errorHandler, scheduler, RuntimeType::UI),
+      layoutAnimationsProxy_(layoutAnimationsProxy),
       mapperRegistry(std::make_shared<MapperRegistry>()),
       eventHandlerRegistry(std::make_shared<EventHandlerRegistry>()),
       requestRender(platformDepMethodsHolder.requestRender),
@@ -109,7 +110,7 @@ NativeReanimatedModule::NativeReanimatedModule(
     maybeRequestRender();
   };
 
-  this->layoutAnimationsProxy = layoutAnimationsProxy;
+  this->layoutAnimationsProxy_ = layoutAnimationsProxy;
 
 #ifdef RCT_NEW_ARCH_ENABLED
   auto updateProps = [this](
@@ -337,6 +338,20 @@ jsi::Value NativeReanimatedModule::configureProps(
   return jsi::Value::undefined();
 }
 
+jsi::Value NativeReanimatedModule::configureLayoutAnimation(
+    jsi::Runtime &rt,
+    const jsi::Value &viewTag,
+    const jsi::Value &type,
+    const jsi::Value &config,
+    const jsi::Value &viewSharedValue) {
+  layoutAnimationsProxy_->configureAnimation(
+      viewTag.asNumber(),
+      type.asString(rt).utf8(rt),
+      ShareableValue::adapt(rt, config, this),
+      ShareableValue::adapt(rt, viewSharedValue, this));
+  return jsi::Value::undefined();
+}
+
 void NativeReanimatedModule::onEvent(
     std::string eventName,
 #ifdef RCT_NEW_ARCH_ENABLED

Common/cpp/NativeModules/NativeReanimatedModule.h

@@ -144,11 +144,19 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec,
       jsi::Runtime &rt,
       const jsi::Value &listenerId) override;
 
+  jsi::Value configureLayoutAnimation(
+      jsi::Runtime &rt,
+      const jsi::Value &viewTag,
+      const jsi::Value &type,
+      const jsi::Value &config,
+      const jsi::Value &viewSharedValue) override;
+
  private:
 #ifdef RCT_NEW_ARCH_ENABLED
   bool isThereAnyLayoutProp(jsi::Runtime &rt, const jsi::Value &props);
 #endif // RCT_NEW_ARCH_ENABLED
 
+  std::shared_ptr<LayoutAnimationsProxy> layoutAnimationsProxy_;
   std::shared_ptr<MapperRegistry> mapperRegistry;
   std::shared_ptr<EventHandlerRegistry> eventHandlerRegistry;
   std::function<void(FrameCallback &, jsi::Runtime &)> requestRender;
@@ -158,7 +166,6 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec,
   std::function<jsi::Value(jsi::Runtime &, const int, const jsi::String &)>
       propObtainer;
   std::function<void(double)> onRenderCallback;
-  std::shared_ptr<LayoutAnimationsProxy> layoutAnimationsProxy;
   AnimatedSensorModule animatedSensorModule;
   ConfigurePropsFunction configurePropsPlatformFunction;
 

Common/cpp/NativeModules/NativeReanimatedModuleSpec.cpp

@@ -159,6 +159,20 @@ static jsi::Value SPEC_PREFIX(unsubscribeFromKeyboardEvents)(
   return jsi::Value::undefined();
 }
 
+static jsi::Value SPEC_PREFIX(configureLayoutAnimation)(
+    jsi::Runtime &rt,
+    TurboModule &turboModule,
+    const jsi::Value *args,
+    size_t count) {
+  return static_cast<NativeReanimatedModuleSpec *>(&turboModule)
+      ->configureLayoutAnimation(
+          rt,
+          std::move(args[0]),
+          std::move(args[1]),
+          std::move(args[2]),
+          std::move(args[3]));
+}
+
 NativeReanimatedModuleSpec::NativeReanimatedModuleSpec(
     std::shared_ptr<CallInvoker> jsInvoker)
     : TurboModule("NativeReanimated", jsInvoker) {
@@ -188,5 +202,8 @@ NativeReanimatedModuleSpec::NativeReanimatedModuleSpec(
       MethodMetadata{1, SPEC_PREFIX(subscribeForKeyboardEvents)};
   methodMap_["unsubscribeFromKeyboardEvents"] =
       MethodMetadata{1, SPEC_PREFIX(unsubscribeFromKeyboardEvents)};
+
+  methodMap_["configureLayoutAnimation"] =
+      MethodMetadata{4, SPEC_PREFIX(configureLayoutAnimation)};
 }
 } // namespace reanimated

Common/cpp/NativeModules/NativeReanimatedModuleSpec.h

@@ -85,6 +85,14 @@ class JSI_EXPORT NativeReanimatedModuleSpec : public TurboModule {
       jsi::Runtime &rt,
       const jsi::Value &uiProps,
       const jsi::Value &nativeProps) = 0;
+
+  // layout animations
+  virtual jsi::Value configureLayoutAnimation(
+      jsi::Runtime &rt,
+      const jsi::Value &viewTag,
+      const jsi::Value &type,
+      const jsi::Value &config,
+      const jsi::Value &viewSharedValue) = 0;
 };
 
 } // namespace reanimated

Common/cpp/Tools/RuntimeDecorator.cpp

@@ -277,7 +277,8 @@ void RuntimeDecorator::decorateUIRuntime(
     if (layoutProxy.expired()) {
       return jsi::Value::undefined();
     }
-    proxy->stopObserving(args[0].asNumber(), args[1].getBool());
+    proxy->stopObserving(
+        args[0].asNumber(), args[1].getBool(), args[2].getBool());
     return jsi::Value::undefined();
   };
   jsi::Value _stopObservingProgress = jsi::Function::createFromHostFunction(

Example/src/App.tsx

@@ -25,6 +25,11 @@ import {
   SpringLayoutAnimation,
   SwipeableList,
   NativeModals,
+  NestedTest,
+  CombinedTest,
+  BasicNestedLayoutAnimation,
+  BasicNestedAnimation,
+  BasicLayoutAnimation,
 } from './LayoutReanimation';
 
 import AnimatedStyleUpdateExample from './AnimatedStyleUpdateExample';
@@ -64,6 +69,26 @@ if (Platform.OS === 'android') {
 type Screens = Record<string, { screen: React.ComponentType; title?: string }>;
 
 const SCREENS: Screens = {
+  BasicLayoutAnimation: {
+    screen: BasicLayoutAnimation,
+    title: '🆕 Basic layout animation',
+  },
+  BasicNestedAnimation: {
+    screen: BasicNestedAnimation,
+    title: '🆕 Basic nested animation',
+  },
+  BasicNestedLayoutAnimation: {
+    screen: BasicNestedLayoutAnimation,
+    title: '🆕 Basic nested layout animation',
+  },
+  NestedLayoutAnimations: {
+    screen: NestedTest,
+    title: '🆕 Nested layout animations',
+  },
+  CombinedLayoutAnimations: {
+    screen: CombinedTest,
+    title: '🆕 Entering and Exiting with Layout',
+  },
   DefaultAnimations: {
     screen: DefaultAnimations,
     title: '🆕 Default layout animations',