react-native-reanimated 2.10.0 → 2.12.0

package/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

package/android/src/main/cpp/AndroidErrorHandler.cpp

@@ -1,5 +1,6 @@
 #include "AndroidErrorHandler.h"
 #include <fbjni/fbjni.h>
+#include <exception>
 #include <string>
 #include "Logger.h"
 
@@ -17,11 +18,9 @@ void AndroidErrorHandler::raiseSpec() {
     return;
   }
 
-  static const auto cls = javaClassStatic();
-  static auto method = cls->getStaticMethod<void(std::string)>("raise");
-  method(cls, error->message);
-
+  // mark error as handled before this method throws exception
   this->error->handled = true;
+  throw std::runtime_error(this->error->message);
 }
 
 std::shared_ptr<Scheduler> AndroidErrorHandler::getScheduler() {

package/android/src/main/cpp/{headers/AndroidErrorHandler.h → AndroidErrorHandler.h}

@@ -11,15 +11,12 @@
 
 namespace reanimated {
 
-class AndroidErrorHandler : public JavaClass<AndroidErrorHandler>,
-                            public ErrorHandler {
+class AndroidErrorHandler : public ErrorHandler {
   std::shared_ptr<ErrorWrapper> error;
   std::shared_ptr<Scheduler> scheduler;
   void raiseSpec() override;
 
  public:
-  static auto constexpr kJavaDescriptor =
-      "Lcom/swmansion/reanimated/AndroidErrorHandler;";
   explicit AndroidErrorHandler(std::shared_ptr<Scheduler> scheduler);
   std::shared_ptr<Scheduler> getScheduler() override;
   std::shared_ptr<ErrorWrapper> getError() override;

package/android/src/main/cpp/AndroidLogger.cpp

@@ -1,6 +1,9 @@
-#include "AndroidLogger.h"
 #include <android/log.h>
+#include <memory>
+
+#include "AndroidLogger.h"
 #include "Logger.h"
+
 #define APPNAME "NATIVE_REANIMATED"
 
 namespace reanimated {

package/android/src/main/cpp/NativeProxy.cpp

@@ -73,11 +73,10 @@ void NativeProxy::installJSIBindings() {
   };
 
   auto getCurrentTime = [this]() {
-    auto method =
-        javaPart_->getClass()->getMethod<local_ref<JString>()>("getUptime");
-    local_ref<JString> output = method(javaPart_.get());
-    return static_cast<double>(
-        std::strtoll(output->toStdString().c_str(), NULL, 10));
+    static const auto method =
+        javaPart_->getClass()->getMethod<jlong()>("getCurrentTime");
+    jlong output = method(javaPart_.get());
+    return static_cast<double>(output);
   };
 
   auto requestRender = [this, getCurrentTime](
@@ -353,11 +352,10 @@ void NativeProxy::configureProps(
                         ReadableNativeArray::javaobject)>("configureProps");
   method(
       javaPart_.get(),
-      ReadableNativeArray::newObjectCxxArgs(
-          std::move(jsi::dynamicFromValue(rt, uiProps)))
+      ReadableNativeArray::newObjectCxxArgs(jsi::dynamicFromValue(rt, uiProps))
           .get(),
       ReadableNativeArray::newObjectCxxArgs(
-          std::move(jsi::dynamicFromValue(rt, nativeProps)))
+          jsi::dynamicFromValue(rt, nativeProps))
           .get());
 }
 

package/android/src/main/java/com/swmansion/reanimated/NativeProxy.java

@@ -203,14 +203,13 @@ public class NativeProxy {
   }
 
   @DoNotStrip
-  private String getUptime() {
+  private long getCurrentTime() {
     if (slowAnimationsEnabled) {
       final long ANIMATIONS_DRAG_FACTOR = 10;
-      return Long.toString(
-          this.firstUptime
-              + (SystemClock.uptimeMillis() - this.firstUptime) / ANIMATIONS_DRAG_FACTOR);
+      return this.firstUptime
+          + (SystemClock.uptimeMillis() - this.firstUptime) / ANIMATIONS_DRAG_FACTOR;
     } else {
-      return Long.toString(SystemClock.uptimeMillis());
+      return SystemClock.uptimeMillis();
     }
   }
 

package/android/src/main/java/com/swmansion/reanimated/keyboardObserver/ReanimatedKeyboardEventListener.java

@@ -57,7 +57,8 @@ public class ReanimatedKeyboardEventListener {
         rootView,
         (v, insets) -> {
           int paddingBottom = 0;
-          if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED && BuildConfig.REACT_NATIVE_VERSION < 70) {
+          if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+              && BuildConfig.REACT_NATIVE_MINOR_VERSION < 70) {
             paddingBottom = insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom;
           }
           int paddingTop = insets.getInsets(WindowInsetsCompat.Type.systemBars()).top;

package/android/src/main/java/com/swmansion/reanimated/layoutReanimation/AnimationsManager.java

@@ -229,8 +229,8 @@ public class AnimationsManager implements ViewHierarchyObserver {
   }
 
   private void removeLeftovers() {
-    //mToRemove may be null if onCatalystInstanceDestroy was called first
-    if(mToRemove != null){
+    // mToRemove may be null if onCatalystInstanceDestroy was called first
+    if (mToRemove != null) {
       HashSet<Integer> roots = new HashSet<>();
       // go through ready to remove from bottom to top
       for (int tag : mToRemove) {

package/android/src/main/java/com/swmansion/reanimated/layoutReanimation/ReanimatedUIManager.java

@@ -20,7 +20,7 @@ class ReaUiImplementationProvider extends UIImplementationProvider {
       ViewManagerRegistry viewManagerRegistry,
       EventDispatcher eventDispatcher,
       int minTimeLeftInFrameForNonBatchedOperationMs) {
-    return new ReanimatedUIImplementation(
+    return new com.facebook.react.uimanager.ReanimatedUIImplementation(
         reactContext,
         viewManagerRegistry,
         eventDispatcher,

package/android/src/reactNativeVersionPatch/messageQueueThread/67/com/swmansion/reanimated/ReanimatedMessageQueueThread.java

@@ -0,0 +1,12 @@
+package com.swmansion.reanimated;
+
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.swmansion.reanimated.ReanimatedMessageQueueThreadBase;
+
+@DoNotStrip
+public class ReanimatedMessageQueueThread extends ReanimatedMessageQueueThreadBase {
+  @Override
+  public void runOnQueue(Runnable runnable) {
+    messageQueueThread.runOnQueue(runnable);
+  }
+}

package/android/src/reactNativeVersionPatch/messageQueueThread/latest/com/swmansion/reanimated/ReanimatedMessageQueueThread.java

@@ -0,0 +1,12 @@
+package com.swmansion.reanimated;
+
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.swmansion.reanimated.ReanimatedMessageQueueThreadBase;
+
+@DoNotStrip
+public class ReanimatedMessageQueueThread extends ReanimatedMessageQueueThreadBase {
+  @Override
+  public boolean runOnQueue(Runnable runnable) {
+    return messageQueueThread.runOnQueue(runnable);
+  }
+}

package/ios/{REAModule.m → REAModule.mm}

@@ -2,16 +2,30 @@
 #import <RNReanimated/REAModule.h>
 #import <RNReanimated/REANodesManager.h>
 #import <RNReanimated/REATransitionManager.h>
+#import <RNReanimated/SingleInstanceChecker.h>
+
+using namespace reanimated;
 
 typedef void (^AnimatedOperation)(REANodesManager *nodesManager);
 
 @implementation REAModule {
   NSMutableArray<AnimatedOperation> *_operations;
   REATransitionManager *_transitionManager;
+#ifdef DEBUG
+  SingleInstanceChecker<REAModule> singleInstanceChecker_;
+#endif
+  bool hasListeners;
 }
 
 RCT_EXPORT_MODULE(ReanimatedModule);
 
+#ifdef RCT_NEW_ARCH_ENABLED
++ (BOOL)requiresMainQueueSetup
+{
+  return YES;
+}
+#endif // RCT_NEW_ARCH_ENABLED
+
 - (void)invalidate
 {
   _transitionManager = nil;
@@ -181,4 +195,19 @@ RCT_EXPORT_METHOD(triggerRender)
   [_nodesManager dispatchEvent:event];
 }
 
+- (void)startObserving {
+    hasListeners = YES;
+}
+
+- (void)stopObserving {
+    hasListeners = NO;
+}
+
+- (void)sendEventWithName:(NSString *)eventName body:(id)body
+{
+    if (hasListeners) {
+        [super sendEventWithName:eventName body:body];
+    }
+}
+
 @end

package/ios/keyboardObserver/REAKeyboardEventObserver.m

@@ -1,5 +1,5 @@
-#import "REAKeyboardEventObserver.h"
 #import <Foundation/Foundation.h>
+#import <RNReanimated/REAKeyboardEventObserver.h>
 #import <React/RCTDefines.h>
 #import <React/RCTUIManager.h>
 

package/ios/native/NativeProxy.mm

@@ -201,8 +201,10 @@ std::shared_ptr<NativeReanimatedModule> createReanimatedModule(
     }
   };
 
-  auto requestRender = [reanimatedModule, &module](std::function<void(double)> onRender, jsi::Runtime &rt) {
-    [reanimatedModule.nodesManager postOnAnimation:^(CADisplayLink *displayLink) {
+  auto nodesManager = reanimatedModule.nodesManager;
+
+  auto requestRender = [nodesManager, &module](std::function<void(double)> onRender, jsi::Runtime &rt) {
+    [nodesManager postOnAnimation:^(CADisplayLink *displayLink) {
       double frameTimestamp = calculateTimestampWithSlowAnimations(displayLink.targetTimestamp) * 1000;
       jsi::Object global = rt.global();
       jsi::String frameTimestampName = jsi::String::createFromAscii(rt, "_frameTimestamp");

package/ios/native/REAInitializer.h

@@ -7,11 +7,11 @@
 #import <ReactCommon/RCTTurboModuleManager.h>
 #import <jsireact/JSIExecutor.h>
 
-#if RNVERSION >= 64
+#if REACT_NATIVE_MINOR_VERSION >= 64
 #import <React/RCTJSIExecutorRuntimeInstaller.h>
 #endif
 
-#if RNVERSION < 63
+#if REACT_NATIVE_MINOR_VERSION < 63
 #import <ReactCommon/BridgeJSCallInvoker.h>
 #endif
 

package/ios/native/REAInitializer.mm

@@ -24,7 +24,7 @@ JSIExecutor::RuntimeInstaller REAJSIExecutorRuntimeInstaller(
 
   [bridge moduleForClass:[RCTEventDispatcher class]];
   RCTEventDispatcher *eventDispatcher = [REAEventDispatcher new];
-#if RNVERSION >= 66
+#if REACT_NATIVE_MINOR_VERSION >= 66
   RCTCallableJSModules *callableJSModules = [RCTCallableJSModules new];
   [bridge setValue:callableJSModules forKey:@"_callableJSModules"];
   [callableJSModules setBridge:bridge];
@@ -39,7 +39,7 @@ JSIExecutor::RuntimeInstaller REAJSIExecutorRuntimeInstaller(
     if (!bridge) {
       return;
     }
-#if RNVERSION >= 63
+#if REACT_NATIVE_MINOR_VERSION >= 63
     auto reanimatedModule = reanimated::createReanimatedModule(bridge, bridge.jsCallInvoker);
 #else
     auto callInvoker = std::make_shared<react::BridgeJSCallInvoker>(bridge.reactInstance);

package/ios/native/UIResponder+Reanimated.mm

@@ -20,7 +20,7 @@ typedef JSCExecutorFactory ExecutorFactory;
 {
   const auto installer = reanimated::REAJSIExecutorRuntimeInstaller(bridge, NULL);
 
-#if RNVERSION >= 64
+#if REACT_NATIVE_MINOR_VERSION >= 64
   // installs globals such as console, nativePerformanceNow, etc.
   return std::make_unique<ExecutorFactory>(RCTJSIExecutorRuntimeInstaller(installer));
 #else

package/lib/createAnimatedComponent.js

@@ -119,11 +119,10 @@ export default function createAnimatedComponent(Component, options) {
                 setLocalRef: (ref) => {
                     // TODO update config
                     const tag = findNodeHandle(ref);
-                    if ((this.props.layout || this.props.entering || this.props.exiting) &&
+                    if (!shouldBeUseWeb() &&
+                        (this.props.layout || this.props.entering || this.props.exiting) &&
                         tag != null) {
-                        if (!shouldBeUseWeb()) {
-                            enableLayoutAnimations(true, false);
-                        }
+                        enableLayoutAnimations(true, false);
                         let layout = this.props.layout ? this.props.layout : DefaultLayout;
                         let entering = this.props.entering
                             ? this.props.entering

package/lib/index.web.js

@@ -1,4 +1,6 @@
 // tree-shaken side effects
 import './reanimated2/js-reanimated/global';
+// @ts-ignore backward compatibility with treeshaking
+export * from './reanimated1';
 export * from './reanimated2';
 export * as default from './Animated'; // If this line fails, you probably forgot some installation steps. Check out the installation guide here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) 2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache

package/lib/reanimated2/NativeMethods.js

@@ -1,43 +1,92 @@
 import { findNodeHandle } from 'react-native';
-import { shouldBeUseWeb } from './PlatformChecker';
+import { isChromeDebugger, isWeb, shouldBeUseWeb } from './PlatformChecker';
 export function getTag(view) {
     return findNodeHandle(view);
 }
-const isNativeIndefined = shouldBeUseWeb();
-export function measure(animatedRef) {
-    'worklet';
-    if (!_WORKLET || isNativeIndefined) {
-        console.warn('[reanimated.measure] method cannot be used for web or Chrome Debugger');
+const isNative = !shouldBeUseWeb();
+export let measure;
+if (isWeb()) {
+    measure = (animatedRef) => {
+        const element = animatedRef(); // TODO: fix typing of animated refs on web
+        const viewportOffset = element.getBoundingClientRect();
         return {
-            x: NaN,
-            y: NaN,
-            width: NaN,
-            height: NaN,
-            pageX: NaN,
-            pageY: NaN,
+            width: element.offsetWidth,
+            height: element.offsetHeight,
+            x: element.offsetLeft,
+            y: element.offsetTop,
+            pageX: viewportOffset.left,
+            pageY: viewportOffset.top,
         };
-    }
-    const viewTag = animatedRef();
-    const result = _measure(viewTag);
-    if (result.x === -1234567) {
-        throw new Error(`The view with tag ${viewTag} could not be measured`);
-    }
-    if (isNaN(result.x)) {
-        console.warn('Trying to measure a component which gets view-flattened on Android. To disable view-flattening, set `collapsable={false}` on this component.');
-    }
-    return result;
+    };
 }
-export function scrollTo(animatedRef, x, y, animated) {
-    'worklet';
-    if (!_WORKLET || isNativeIndefined) {
-        return;
-    }
-    const viewTag = animatedRef();
-    _scrollTo(viewTag, x, y, animated);
+else if (isChromeDebugger()) {
+    measure = (_animatedRef) => {
+        console.warn('[Reanimated] measure() cannot be used with Chrome Debugger.');
+        return null;
+    };
+}
+else {
+    measure = (animatedRef) => {
+        'worklet';
+        if (!_WORKLET) {
+            console.warn('[Reanimated] measure() was called from the main JS context. Measure is ' +
+                'only available in the UI runtime. This may also happen if measure() ' +
+                'was called by a worklet in the useAnimatedStyle hook, because useAnimatedStyle ' +
+                'calls the given worklet on the JS runtime during render. If you want to ' +
+                'prevent this warning then wrap the call with `if (_WORKLET)`. Then it will ' +
+                'only be called on the UI runtime after the render has been completed.');
+            return null;
+        }
+        const viewTag = animatedRef();
+        if (viewTag === -1) {
+            console.warn(`[Reanimated] The view with tag ${viewTag} is not a valid argument for measure(). This may be because the view is not currently rendered, which may not be a bug (e.g. an off-screen FlatList item).`);
+            return null;
+        }
+        const measured = _measure(viewTag);
+        if (measured === null) {
+            console.warn(`[Reanimated] The view with tag ${viewTag} has some undefined, not-yet-computed or meaningless value of \`LayoutMetrics\` type. This may be because the view is not currently rendered, which may not be a bug (e.g. an off-screen FlatList item).`);
+            return null;
+        }
+        else if (measured.x === -1234567) {
+            console.warn(`[Reanimated] The view with tag ${viewTag} returned an invalid measurement response.`);
+            return null;
+        }
+        else if (isNaN(measured.x)) {
+            console.warn(`[Reanimated] The view with tag ${viewTag} gets view-flattened on Android. To disable view-flattening, set \`collapsable={false}\` on this component.`);
+            return null;
+        }
+        else {
+            return measured;
+        }
+    };
+}
+export let scrollTo;
+if (isWeb()) {
+    scrollTo = (animatedRef, x, y, animated) => {
+        'worklet';
+        const element = animatedRef();
+        // @ts-ignore same call as in react-native-web
+        element.scrollTo({ x, y, animated });
+    };
+}
+else if (isNative) {
+    scrollTo = (animatedRef, x, y, animated) => {
+        'worklet';
+        if (!_WORKLET) {
+            return;
+        }
+        const viewTag = animatedRef();
+        _scrollTo(viewTag, x, y, animated);
+    };
+}
+else {
+    scrollTo = (_animatedRef, _x, _y) => {
+        // no-op
+    };
 }
 export function setGestureState(handlerTag, newState) {
     'worklet';
-    if (!_WORKLET || isNativeIndefined) {
+    if (!_WORKLET || !isNative) {
         console.warn('[Reanimated] You can not use setGestureState in non-worklet function.');
         return;
     }

package/lib/reanimated2/frameCallback/FrameCallbackRegistryJS.js

@@ -17,16 +17,16 @@ export default class FrameCallbackRegistryJS {
         })();
         return callbackId;
     }
-    unregisterFrameCallback(frameCallbackId) {
+    unregisterFrameCallback(callbackId) {
         runOnUI(() => {
             'worklet';
-            global._frameCallbackRegistry.unregisterFrameCallback(frameCallbackId);
+            global._frameCallbackRegistry.unregisterFrameCallback(callbackId);
         })();
     }
-    manageStateFrameCallback(frameCallbackId, state) {
+    manageStateFrameCallback(callbackId, state) {
         runOnUI(() => {
             'worklet';
-            global._frameCallbackRegistry.manageStateFrameCallback(frameCallbackId, state);
+            global._frameCallbackRegistry.manageStateFrameCallback(callbackId, state);
         })();
     }
 }

package/lib/reanimated2/frameCallback/FrameCallbackRegistryUI.js

@@ -3,43 +3,72 @@ export const prepareUIRegistry = runOnUI(() => {
     'worklet';
     const frameCallbackRegistry = {
         frameCallbackRegistry: new Map(),
-        frameCallbackActive: new Set(),
-        isFrameCallbackRunning: false,
+        activeFrameCallbacks: new Set(),
+        previousFrameTimestamp: null,
         runCallbacks() {
-            const loop = () => {
-                this.frameCallbackActive.forEach((key) => {
-                    const callback = this.frameCallbackRegistry.get(key);
-                    callback();
+            const loop = (timestamp) => {
+                if (this.previousFrameTimestamp === null) {
+                    this.previousFrameTimestamp = timestamp;
+                }
+                const delta = timestamp - this.previousFrameTimestamp;
+                this.activeFrameCallbacks.forEach((callbackId) => {
+                    const callbackDetails = this.frameCallbackRegistry.get(callbackId);
+                    const { startTime } = callbackDetails;
+                    if (startTime === null) {
+                        // First frame
+                        callbackDetails.startTime = timestamp;
+                        callbackDetails.callback({
+                            timestamp,
+                            timeSincePreviousFrame: null,
+                            timeSinceFirstFrame: 0,
+                        });
+                    }
+                    else {
+                        // Next frame
+                        callbackDetails.callback({
+                            timestamp,
+                            timeSincePreviousFrame: delta,
+                            timeSinceFirstFrame: timestamp - startTime,
+                        });
+                    }
                 });
-                if (this.frameCallbackActive.size > 0) {
+                if (this.activeFrameCallbacks.size > 0) {
+                    this.previousFrameTimestamp = timestamp;
                     requestAnimationFrame(loop);
                 }
                 else {
-                    this.isFrameCallbackRunning = false;
+                    this.previousFrameTimestamp = null;
                 }
             };
-            if (!this.isFrameCallbackRunning) {
+            // runCallback() should only be called after registering a callback,
+            // so if there is only one active callback, then it means that there were
+            // zero previously and the loop isn't running yet.
+            if (this.activeFrameCallbacks.size === 1) {
                 requestAnimationFrame(loop);
-                this.isFrameCallbackRunning = true;
             }
         },
         registerFrameCallback(callback, callbackId) {
-            this.frameCallbackRegistry.set(callbackId, callback);
+            this.frameCallbackRegistry.set(callbackId, {
+                callback: callback,
+                startTime: null,
+            });
         },
-        unregisterFrameCallback(frameCallbackId) {
-            this.manageStateFrameCallback(frameCallbackId, false);
-            this.frameCallbackRegistry.delete(frameCallbackId);
+        unregisterFrameCallback(callbackId) {
+            this.manageStateFrameCallback(callbackId, false);
+            this.frameCallbackRegistry.delete(callbackId);
         },
-        manageStateFrameCallback(frameCallbackId, state) {
-            if (frameCallbackId === -1) {
+        manageStateFrameCallback(callbackId, state) {
+            if (callbackId === -1) {
                 return;
             }
             if (state) {
-                this.frameCallbackActive.add(frameCallbackId);
+                this.activeFrameCallbacks.add(callbackId);
                 this.runCallbacks();
             }
             else {
-                this.frameCallbackActive.delete(frameCallbackId);
+                const callback = this.frameCallbackRegistry.get(callbackId);
+                callback.startTime = null;
+                this.activeFrameCallbacks.delete(callbackId);
             }
         },
     };