Layout Reanimation (software-mansion#2058)

Introduce the very first version of Layout Animations in Reanimated Co-authored-by: Krzysztof Piaskowy <krzychu2956@gmail.com>
talut · May 28, 2021 · 9a71f34 · 9a71f34
1 parent b1fd5e3
commit 9a71f34
Show file tree

Hide file tree

Showing 70 changed files with 3,680 additions and 119 deletions.
diff --git a/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp b/Common/cpp/LayoutAnimations/LayoutAnimationsProxy.cpp
@@ -0,0 +1,36 @@
+#include "LayoutAnimationsProxy.h"
+#include "MutableValue.h"
+#include "ValueWrapper.h"
+#include "ShareableValue.h"
+#include "FrozenObject.h"
+
+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)) {
+}
+
+void LayoutAnimationsProxy::startObserving(int tag, std::shared_ptr<MutableValue> sv, jsi::Runtime &rt) {
+  observedValues[tag] = sv;
+  sv->addListener(tag + idOffset, [sv, tag, this, &rt](){
+    std::shared_ptr<FrozenObject> newValue = ValueWrapper::asFrozenObject(sv->value->valueContainer);
+    this->notifyAboutProgress(tag, newValue->shallowClone(rt));
+  });
+}
+
+void LayoutAnimationsProxy::stopObserving(int tag, bool finished) {
+  if (observedValues.count(tag) == 0) {
+    return;
+  }
+  std::shared_ptr<MutableValue> sv = observedValues[tag];
+  sv->removeListener(tag + idOffset);
+  observedValues.erase(tag);
+  this->notifyAboutEnd(tag, !finished);
+}
+
+void LayoutAnimationsProxy::notifyAboutCancellation(int tag) {
+  this->notifyAboutEnd(tag, false);
+}
+
+}
diff --git a/Common/cpp/NativeModules/NativeReanimatedModule.cpp b/Common/cpp/NativeModules/NativeReanimatedModule.cpp
@@ -58,12 +58,12 @@ std::vector<std::shared_ptr<MutableValue>> extractMutablesFromArray(jsi::Runtime
 
 NativeReanimatedModule::NativeReanimatedModule(std::shared_ptr<CallInvoker> jsInvoker,
                                                std::shared_ptr<Scheduler> scheduler,
-                                               std::unique_ptr<jsi::Runtime> rt,
+                                               std::shared_ptr<jsi::Runtime> rt,
                                                std::shared_ptr<ErrorHandler> errorHandler,
                                                std::function<jsi::Value(jsi::Runtime &, const int, const jsi::String &)> propObtainer,
-                                               PlatformDepMethodsHolder platformDepMethodsHolder) :
-                                                  NativeReanimatedModuleSpec(jsInvoker),
-                                                  RuntimeManager(std::move(rt), errorHandler, scheduler),
+                                               std::shared_ptr<LayoutAnimationsProxy> layoutAnimationsProxy,
+                                               PlatformDepMethodsHolder platformDepMethodsHolder) : NativeReanimatedModuleSpec(jsInvoker),
+                                                  RuntimeManager(rt, errorHandler, scheduler),
                                                   mapperRegistry(std::make_shared<MapperRegistry>()),
                                                   eventHandlerRegistry(std::make_shared<EventHandlerRegistry>()),
                                                   requestRender(platformDepMethodsHolder.requestRender),
@@ -74,12 +74,16 @@ NativeReanimatedModule::NativeReanimatedModule(std::shared_ptr<CallInvoker> jsIn
     frameCallbacks.push_back(callback);
     maybeRequestRender();
   };
+
+  this->layoutAnimationsProxy = layoutAnimationsProxy;
+
   RuntimeDecorator::decorateUIRuntime(*runtime,
                                       platformDepMethodsHolder.updaterFunction,
                                       requestAnimationFrame,
                                       platformDepMethodsHolder.scrollToFunction,
                                       platformDepMethodsHolder.measuringFunction,
-                                      platformDepMethodsHolder.getCurrentTime);
+                                      platformDepMethodsHolder.getCurrentTime,
+                                      layoutAnimationsProxy);
 }
 
 void NativeReanimatedModule::installCoreFunctions(jsi::Runtime &rt, const jsi::Value &valueSetter)

diff --git a/Common/cpp/SharedItems/MutableValue.cpp b/Common/cpp/SharedItems/MutableValue.cpp
@@ -50,6 +50,9 @@ void MutableValue::set(jsi::Runtime &rt, const jsi::PropNameID &name, const jsi:
         animation = getWeakRef(rt);
       }
       *animation.lock() = jsi::Value(rt, newValue);
+    } else if (propName == "_value") {
+      auto setter = std::make_shared<MutableValueSetterProxy>(shared_from_this());
+      setter->set(rt, jsi::PropNameID::forAscii(rt, "_value"), newValue);
     }
   } else {
     // React-JS Thread or another threaded Runtime.
@@ -66,7 +69,6 @@ void MutableValue::set(jsi::Runtime &rt, const jsi::PropNameID &name, const jsi:
       });
     }
   }
-
 }
 
 jsi::Value MutableValue::get(jsi::Runtime &rt, const jsi::PropNameID &name) {

diff --git a/Common/cpp/Tools/RuntimeDecorator.cpp b/Common/cpp/Tools/RuntimeDecorator.cpp
@@ -2,6 +2,8 @@
 #include "ReanimatedHiddenHeaders.h"
 #include <unordered_map>
 #include <memory>
+#include "MutableValue.h"
+#include "LayoutAnimationsProxy.h"
 
 namespace reanimated {
 
@@ -65,7 +67,8 @@ void RuntimeDecorator::decorateUIRuntime(jsi::Runtime &rt,
                                          RequestFrameFunction requestFrame,
                                          ScrollToFunction scrollTo,
                                          MeasuringFunction measure,
-                                         TimeProviderFunction getCurrentTime) {
+                                         TimeProviderFunction getCurrentTime,
+                                         std::shared_ptr<LayoutAnimationsProxy> layoutAnimationsProxy) {
   RuntimeDecorator::decorateRuntime(rt, "UI");
   rt.global().setProperty(rt, "_UI", jsi::Value(true));
 
@@ -146,6 +149,40 @@ void RuntimeDecorator::decorateUIRuntime(jsi::Runtime &rt,
 
   rt.global().setProperty(rt, "_frameTimestamp", jsi::Value::undefined());
   rt.global().setProperty(rt, "_eventTimestamp", jsi::Value::undefined());
+
+  // layout animation
+  std::weak_ptr<LayoutAnimationsProxy> layoutProxy = layoutAnimationsProxy;
+  auto clb7 = [layoutProxy](
+                               jsi::Runtime &rt,
+                               const jsi::Value &thisValue,
+                               const jsi::Value *args,
+                               size_t count
+                               ) -> jsi::Value {
+    std::shared_ptr<LayoutAnimationsProxy> proxy = layoutProxy.lock();
+    if (layoutProxy.expired()) {
+      return jsi::Value::undefined();
+    }
+    proxy->startObserving(args[0].asNumber(), args[1].asObject(rt).getHostObject<MutableValue>(rt), rt);
+    return jsi::Value::undefined();
+  };
+  jsi::Value _startObservingProgress = jsi::Function::createFromHostFunction(rt, jsi::PropNameID::forAscii(rt, "_startObservingProgress"), 0, clb7);
+  rt.global().setProperty(rt, "_startObservingProgress", _startObservingProgress);
+
+  auto clb8 = [layoutProxy](
+                               jsi::Runtime &rt,
+                               const jsi::Value &thisValue,
+                               const jsi::Value *args,
+                               size_t count
+                               ) -> jsi::Value {
+    std::shared_ptr<LayoutAnimationsProxy> proxy = layoutProxy.lock();
+    if (layoutProxy.expired()) {
+      return jsi::Value::undefined();
+    }
+    proxy->stopObserving(args[0].asNumber(), args[1].getBool());
+    return jsi::Value::undefined();
+  };
+  jsi::Value _stopObservingProgress = jsi::Function::createFromHostFunction(rt, jsi::PropNameID::forAscii(rt, "_stopObservingProgress"), 0, clb8);
+  rt.global().setProperty(rt, "_stopObservingProgress", _stopObservingProgress);
 }
 
 bool RuntimeDecorator::isUIRuntime(jsi::Runtime& rt) {

diff --git a/Common/cpp/headers/LayoutAnimations/LayoutAnimationsProxy.h b/Common/cpp/headers/LayoutAnimations/LayoutAnimationsProxy.h
@@ -0,0 +1,31 @@
+#pragma once
+
+#include <stdio.h>
+#include <memory>
+#include <functional>
+#include <map>
+#include <jsi/jsi.h>
+
+namespace reanimated {
+
+using namespace facebook;
+
+class MutableValue;
+
+class LayoutAnimationsProxy {
+
+public:
+  LayoutAnimationsProxy(std::function<void(int, jsi::Object newProps)> _notifyAboutProgress, std::function<void(int, bool)> _notifyAboutEnd);
+
+  void startObserving(int tag, std::shared_ptr<MutableValue> sv, jsi::Runtime &rt);
+  void stopObserving(int tag, bool finished);
+  void notifyAboutCancellation(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;
+};
+
+}
+
diff --git a/Common/cpp/headers/NativeModules/NativeReanimatedModule.h b/Common/cpp/headers/NativeModules/NativeReanimatedModule.h
@@ -9,6 +9,7 @@
 #include <memory>
 #include <vector>
 #include "RuntimeManager.h"
+#include "LayoutAnimationsProxy.h"
 
 namespace reanimated
 {
@@ -28,9 +29,10 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec, public Runtime
 public:
   NativeReanimatedModule(std::shared_ptr<CallInvoker> jsInvoker,
                          std::shared_ptr<Scheduler> scheduler,
-                         std::unique_ptr<jsi::Runtime> rt,
+                         std::shared_ptr<jsi::Runtime> rt,
                          std::shared_ptr<ErrorHandler> errorHandler,
                          std::function<jsi::Value(jsi::Runtime &, const int, const jsi::String &)> propObtainer,
+                         std::shared_ptr<LayoutAnimationsProxy> layoutAnimationsProxy,
                          PlatformDepMethodsHolder platformDepMethodsHolder);
 
   virtual ~NativeReanimatedModule();
@@ -62,6 +64,7 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec, public Runtime
   std::vector<FrameCallback> frameCallbacks;
   bool renderRequested = false;
   std::function<jsi::Value(jsi::Runtime &, const int, const jsi::String &)> propObtainer;
+  std::shared_ptr<LayoutAnimationsProxy> layoutAnimationsProxy;
 };
 
 } // namespace reanimated
diff --git a/Common/cpp/headers/SharedItems/MutableValue.h b/Common/cpp/headers/SharedItems/MutableValue.h
@@ -7,6 +7,7 @@
 #include <map>
 #include "JSIStoreValueUser.h"
 #include "RuntimeManager.h"
+#include "LayoutAnimationsProxy.h"
 
 using namespace facebook;
 
@@ -16,6 +17,7 @@ class MutableValue : public jsi::HostObject, public std::enable_shared_from_this
 private:
   friend MutableValueSetterProxy;
   RuntimeManager *runtimeManager;
+  friend LayoutAnimationsProxy;
   std::mutex readWriteMutex;
   std::shared_ptr<ShareableValue> value;
   std::weak_ptr<jsi::Value> animation;

diff --git a/Common/cpp/headers/SharedItems/RuntimeManager.h b/Common/cpp/headers/SharedItems/RuntimeManager.h
@@ -16,9 +16,9 @@ using namespace facebook;
  */
 class RuntimeManager {
 public:
-  RuntimeManager(std::unique_ptr<jsi::Runtime>&& runtime,
+  RuntimeManager(std::shared_ptr<jsi::Runtime> runtime,
                  std::shared_ptr<ErrorHandler> errorHandler,
-                 std::shared_ptr<Scheduler> scheduler): runtime(std::move(runtime)), errorHandler(errorHandler), scheduler(scheduler), workletsCache(std::make_unique<WorkletsCache>()) { }
+                 std::shared_ptr<Scheduler> scheduler): runtime(runtime), errorHandler(errorHandler), scheduler(scheduler), workletsCache(std::make_unique<WorkletsCache>()) { }
 public:
   /**
    Holds the jsi::Function worklet that is responsible for updating values in JS.
@@ -28,7 +28,7 @@ class RuntimeManager {
   /**
    Holds the jsi::Runtime this RuntimeManager is managing.
    */
-  std::unique_ptr<jsi::Runtime> runtime;
+  std::shared_ptr<jsi::Runtime> runtime;
   /**
    Holds the error handler that will be invoked when any kind of error occurs.
    */

diff --git a/Common/cpp/headers/SharedItems/ShareableValue.h b/Common/cpp/headers/SharedItems/ShareableValue.h
@@ -11,6 +11,7 @@
 #include <mutex>
 #include <unordered_map>
 #include <jsi/jsi.h>
+#include "LayoutAnimationsProxy.h"
 
 using namespace facebook;
 
@@ -19,6 +20,7 @@ namespace reanimated {
 class ShareableValue: public std::enable_shared_from_this<ShareableValue>, public StoreUser {
 friend WorkletsCache;
 friend FrozenObject;
+friend LayoutAnimationsProxy;
 friend void extractMutables(jsi::Runtime &rt,
                             std::shared_ptr<ShareableValue> sv,
                             std::vector<std::shared_ptr<MutableValue>> &res);

diff --git a/Common/cpp/headers/Tools/RuntimeDecorator.h b/Common/cpp/headers/Tools/RuntimeDecorator.h
@@ -3,6 +3,7 @@
 #include "PlatformDepMethodsHolder.h"
 #include <stdio.h>
 #include <jsi/jsi.h>
+#include "LayoutAnimationsProxy.h"
 
 using namespace facebook;
 
@@ -18,7 +19,8 @@ class RuntimeDecorator {
                                 RequestFrameFunction requestFrame,
                                 ScrollToFunction scrollTo,
                                 MeasuringFunction measure,
-                                TimeProviderFunction getCurrentTime);
+                                TimeProviderFunction getCurrentTime,
+                                std::shared_ptr<LayoutAnimationsProxy> layoutAnimationsProxy);
 
   /**
    Returns true if the given Runtime is the Reanimated UI-Thread Runtime.

diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
@@ -435,7 +435,7 @@ SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
-  FBReactNativeSpec: 6d46d7c05350e10b3e711c32af90bb188b792a56
+  FBReactNativeSpec: a231a5702f05925855ad8d6449930e1a024bf38b
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: 2f8cb5b7533219bf4218a045f92768129cf7050a