react-native-reanimated 2.11.0 → 2.12.0

package/RNReanimated.podspec

@@ -4,6 +4,7 @@ require_relative './scripts/reanimated_utils'
 reanimated_package_json = JSON.parse(File.read(File.join(__dir__, "package.json")))
 config = find_config()
 assert_no_multiple_instances(config)
+assert_no_reanimated2_with_new_architecture(reanimated_package_json)
 
 folly_prefix = config[:react_native_minor_version] >= 64 ? 'RCT-' : ''
 folly_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32 -DREACT_NATIVE_MINOR_VERSION=' + config[:react_native_minor_version].to_s
@@ -34,14 +35,16 @@ Pod::Spec.new do |s|
     "Common/cpp/hidden_headers/**"
   ]
 
-  s.pod_target_xcconfig    = {
+  s.pod_target_xcconfig = {
     "USE_HEADERMAP" => "YES",
-    "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/ReactCommon\" \"$(PODS_TARGET_SRCROOT)\" \"$(PODS_ROOT)/#{folly_prefix}Folly\" \"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_ROOT)/Headers/Private/React-Core\" "
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/ReactCommon\" \"$(PODS_TARGET_SRCROOT)\" \"$(PODS_ROOT)/#{folly_prefix}Folly\" \"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_ROOT)/Headers/Private/React-Core\" ",
+    "FRAMEWORK_SEARCH_PATHS" => "\"${PODS_CONFIGURATION_BUILD_DIR}/React-hermes\"",
   }
   s.compiler_flags = folly_compiler_flags + ' ' + boost_compiler_flags
   s.xcconfig               = {
-    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/glog\" \"$(PODS_ROOT)/#{folly_prefix}Folly\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\" \"#{config[:react_native_common_dir]}\"",
-                               "OTHER_CFLAGS" => "$(inherited)" + " " + folly_flags }
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/glog\" \"$(PODS_ROOT)/#{folly_prefix}Folly\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\" \"$(PODS_ROOT)/#{config[:react_native_common_dir]}\"",
+    "OTHER_CFLAGS" => "$(inherited)" + " " + folly_flags 
+  }
 
   s.requires_arc = true
 

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +1,2 @@
-#Thu Oct 13 15:02:41 UTC 2022
+#Thu Oct 27 10:05:12 UTC 2022
 gradle.version=7.5.1

package/android/build.gradle

@@ -1,6 +1,6 @@
 import com.android.Version
 import org.apache.tools.ant.filters.ReplaceTokens
-
+import groovy.json.JsonSlurper
 import java.nio.file.Paths
 
 /**
@@ -43,12 +43,10 @@ def safeExtGet(prop, fallback) {
 }
 
 def safeAppExtGet(prop, fallback) {
-    def appProject = null
-    try {
-        appProject = project(":app")
-    } catch(Exception e) {
+    if (findProject(':app') == null) {
         return fallback
     }
+    def appProject = project(':app')
     appProject?.ext?.has(prop) ? appProject.ext.get(prop) : fallback
 }
 
@@ -150,7 +148,7 @@ def findReanimatedInstancesForPath(String path) {
     }.files
 }
 
-def assertNoMultipleInstances() {
+def checkNoMultipleInstances() {
     // Assert there are no multiple installations of Reanimated
     Set<File> files
     if (projectDir.path.contains(rootDir.parent)) {
@@ -167,9 +165,9 @@ def assertNoMultipleInstances() {
         String parsedLocation = files.stream().map({
             File file -> "- " + file.toString().replace("/package.json", "")
         }).collect().join("\n")
-        String exceptionMessage = "\nMultiple versions of Reanimated were detected. Only one " +
-            "instance of react-native-reanimated can be installed in a project. You need to " +
-            "resolve the conflict manually. Check out the documentation: " +
+        String exceptionMessage = "\n[react-native-reanimated] Multiple versions of Reanimated " +
+            "were detected. Only one instance of react-native-reanimated can be installed in a " +
+            "project. You need to resolve the conflict manually. Check out the documentation: " +
             "https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/" +
             "troubleshooting#multiple-versions-of-reanimated-were-detected \n\nConflict " +
             "between: \n" + parsedLocation + "\n";
@@ -177,6 +175,14 @@ def assertNoMultipleInstances() {
     }
 }
 
+def getReanimatedVersion() {
+    def inputFile = file(projectDir.path + '/../package.json')
+    def json = new JsonSlurper().parseText(inputFile.text)
+    String reanimatedVersion = json.version
+    def (major, minor, patch) = reanimatedVersion.tokenize('.')
+    return major.toInteger()
+}
+
 boolean CLIENT_SIDE_BUILD = resolveClientSideBuild()
 if (CLIENT_SIDE_BUILD) {
     configurations.maybeCreate("default")
@@ -195,6 +201,7 @@ def REACT_NATIVE_VERSION = reactProperties.getProperty("VERSION_NAME")
 def REACT_NATIVE_MINOR_VERSION = REACT_NATIVE_VERSION.split("\\.")[1].toInteger()
 def FBJNI_VERSION = "0.3.0"
 def REANIMATED_PACKAGE_BUILD = System.getenv("REANIMATED_PACKAGE_BUILD")
+def REANIMATED_MAJOR_VERSION = getReanimatedVersion()
 
 // We download various C++ open-source dependencies into downloads.
 // We then copy both the downloaded code and our custom makefiles and headers into third-party-ndk.
@@ -525,27 +532,57 @@ android {
     sourceSets.main {
         java {
             if (isNewArchitectureEnabled()) {
-                srcDirs += [
-                        "src/fabric/java",
-                ]
+                srcDirs += "src/fabric/java"
+            } else {
+                srcDirs += "src/paper/java"
+            }
+
+            // messageQueueThread
+            if (REANIMATED_MAJOR_VERSION > 2) {
+                if (REACT_NATIVE_MINOR_VERSION <= 67) {
+                    srcDirs += "src/reactNativeVersionPatch/messageQueueThread/67"
+                } else {
+                    srcDirs += "src/reactNativeVersionPatch/messageQueueThread/latest"
+                }
+            }
+
+            // UIImplementation
+            if (REACT_NATIVE_MINOR_VERSION <= 64) {
+                srcDirs += "src/reactNativeVersionPatch/UIImplementation/64"
+            } else {
+                srcDirs += "src/reactNativeVersionPatch/UIImplementation/latest"
+            }
+
+            // nativeHierarchyManager
+            if (REACT_NATIVE_MINOR_VERSION <= 62) {
+                srcDirs += "src/reactNativeVersionPatch/nativeHierarchyManager/62"
             } else {
-                srcDirs += [
-                        "src/paper/java",
-                ]
+                srcDirs += "src/reactNativeVersionPatch/nativeHierarchyManager/latest"
             }
         }
     }
 }
 
-def assertionTask = task assertNoMultipleInstancesTask {
+def assertNoMultipleInstances = task assertNoMultipleInstancesTask {
     onlyIf { shouldAssertNoMultipleInstances() && CLIENT_SIDE_BUILD }
     doFirst {
-        assertNoMultipleInstances()
+        checkNoMultipleInstances()
+    }
+}
+
+def assertNoReanimated2WithNewArchitecture = task assertNoReanimated2WithNewArchitectureTask {
+    onlyIf { isNewArchitectureEnabled() && REANIMATED_MAJOR_VERSION == 2 }
+    doFirst {
+        throw new Exception(
+            "\n[react-native-reanimated] Reanimated 2.x does not support Fabric. " +
+            "Please upgrade to 3.x to use Reanimated with the New Architecture. " +
+            "For details, see https://blog.swmansion.com/announcing-reanimated-3-16167428c5f7"
+        )
     }
 }
 
 tasks.preBuild {
-    dependsOn assertionTask
+    dependsOn assertNoMultipleInstances, assertNoReanimated2WithNewArchitecture
 }
 
 task cleanCmakeCache() {
@@ -560,21 +597,7 @@ task printVersions {
     println "Gradle: ${project.gradle.gradleVersion}"
 }
 
-task Log {
-    println("building Reanimated2")
-}
-
-task applyJavaPatches(type: Copy) {
-    def patchDirectory = file("${projectDir}/rnVersionPatch/${REACT_NATIVE_MINOR_VERSION}")
-    if (patchDirectory.exists()) {
-        from ("${patchDirectory}") {
-            include "**/*.java"
-        }
-        into ("${projectDir}/src/main/java/com/swmansion/reanimated")
-    }
-}
-
-task createNativeDepsDirectories(dependsOn: applyJavaPatches) {
+task createNativeDepsDirectories() {
     downloadsDir.mkdirs()
     thirdPartyNdkDir.mkdirs()
 }
@@ -967,8 +990,13 @@ task prepareThirdPartyNdkHeaders(dependsOn:[
 ) {}
 
 def nativeBuildDependsOn(dependsOnTask) {
-    def buildTasks = tasks.findAll({ task ->
-        !task.name.contains("Clean") && (task.name.contains("externalNative") || task.name.contains("CMake")) })
+    def buildTasks = tasks.findAll({ task -> (
+        !task.name.contains("Clean")
+        && (task.name.contains("externalNative")
+            || task.name.contains("CMake")
+            || task.name.contains("generateJsonModel")
+        )
+    ) })
     buildTasks.forEach { task -> task.dependsOn(dependsOnTask) }
 }
 

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.mm

@@ -2,8 +2,7 @@
 #import <RNReanimated/REAModule.h>
 #import <RNReanimated/REANodesManager.h>
 #import <RNReanimated/REATransitionManager.h>
-
-#import "SingleInstanceChecker.h"
+#import <RNReanimated/SingleInstanceChecker.h>
 
 using namespace reanimated;
 
@@ -15,14 +14,17 @@ typedef void (^AnimatedOperation)(REANodesManager *nodesManager);
 #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
 {
@@ -193,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/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/reanimated2/NativeMethods.js

@@ -1,53 +1,88 @@
 import { findNodeHandle } from 'react-native';
-import { shouldBeUseWeb } from './PlatformChecker';
+import { isChromeDebugger, isWeb, shouldBeUseWeb } from './PlatformChecker';
 export function getTag(view) {
     return findNodeHandle(view);
 }
 const isNative = !shouldBeUseWeb();
-export function measure(animatedRef) {
-    'worklet';
-    if (!isNative) {
-        console.warn('[Reanimated] measure() cannot be used on web or Chrome Debugger');
-        return null;
-    }
-    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.`);
+export let measure;
+if (isWeb()) {
+    measure = (animatedRef) => {
+        const element = animatedRef(); // TODO: fix typing of animated refs on web
+        const viewportOffset = element.getBoundingClientRect();
+        return {
+            width: element.offsetWidth,
+            height: element.offsetHeight,
+            x: element.offsetLeft,
+            y: element.offsetTop,
+            pageX: viewportOffset.left,
+            pageY: viewportOffset.top,
+        };
+    };
+}
+else if (isChromeDebugger()) {
+    measure = (_animatedRef) => {
+        console.warn('[Reanimated] measure() cannot be used with Chrome Debugger.');
         return null;
-    }
-    else {
-        return measured;
-    }
+    };
 }
-export function scrollTo(animatedRef, x, y, animated) {
-    'worklet';
-    if (!_WORKLET || !isNative) {
-        return;
-    }
-    const viewTag = animatedRef();
-    _scrollTo(viewTag, x, y, animated);
+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';

package/lib/reanimated2/globals.d.ts

@@ -1,13 +1,19 @@
-import { AnimatedStyle, StyleProps } from './commonTypes';
-import { ReanimatedConsole } from './core';
-import FrameCallbackRegistryUI from './frameCallback/FrameCallbackRegistryUI';
-import { MeasuredDimensions } from './NativeMethods';
-import { NativeReanimated } from './NativeReanimated/NativeReanimated';
+import type {
+  AnimatedStyle,
+  StyleProps,
+  MeasuredDimensions,
+} from './commonTypes';
+import type { ReanimatedConsole } from './core';
+import type { NativeReanimated } from './NativeReanimated/NativeReanimated';
+import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
+
 declare global {
   const _WORKLET: boolean;
-  const _frameTimestamp: number;
+  const _frameTimestamp: number | null;
   const _eventTimestamp: number;
+  const __reanimatedModuleProxy: NativeReanimated;
   const _setGlobalConsole: (console?: ReanimatedConsole) => void;
+  const _log: (s: string) => void;
   const _getCurrentTime: () => number;
   const _stopObservingProgress: (tag: number, flag: boolean) => void;
   const _startObservingProgress: (
@@ -20,7 +26,7 @@ declare global {
     name: string,
     updates: StyleProps | AnimatedStyle
   ) => void;
-  const _measure: (viewTag: number) => MeasuredDimensions | null;
+  const _measure: (viewTag: number) => MeasuredDimensions;
   const _scrollTo: (
     viewTag: number,
     x: number,
@@ -28,20 +34,40 @@ declare global {
     animated: boolean
   ) => void;
   const _chronoNow: () => number;
+  const performance: { now: () => number };
+  const LayoutAnimationRepository: {
+    configs: Record<string, unknown>;
+    registerConfig(tag: number, config: Record<string, unknown>): void;
+    removeConfig(tag: number): void;
+    startAnimationForTag(tag: number, type: string, yogaValues: unknown): void;
+  };
   const ReanimatedDataMock: {
     now: () => number;
   };
   const _frameCallbackRegistry: FrameCallbackRegistryUI;
   namespace NodeJS {
     interface Global {
-      _setGlobalConsole: (console?: ReanimatedConsole) => void;
-      _log: (s: string) => void;
-      _setGestureState: () => void;
       _WORKLET: boolean;
-      __reanimatedModuleProxy: NativeReanimated;
+      _IS_FABRIC: boolean;
       _frameTimestamp: number | null;
-      _measure: () => MeasuredDimensions | null;
-      _scrollTo: () => void;
+      _eventTimestamp: number;
+      __reanimatedModuleProxy: NativeReanimated;
+      _setGlobalConsole: (console?: ReanimatedConsole) => void;
+      _log: (s: string) => void;
+      _getCurrentTime: () => number;
+      _stopObservingProgress: (tag: number, flag: boolean) => void;
+      _startObservingProgress: (
+        tag: number,
+        flag: { value: boolean; _value: boolean }
+      ) => void;
+      _setGestureState: (handlerTag: number, newState: number) => void;
+      _measure: (viewTag: number) => MeasuredDimensions;
+      _scrollTo: (
+        viewTag: number,
+        x: number,
+        y: number,
+        animated: boolean
+      ) => void;
       _chronoNow: () => number;
       performance: { now: () => number };
       LayoutAnimationRepository: {

package/lib/reanimated2/hook/useScrollViewOffset.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { findNodeHandle } from 'react-native';
-import { useEvent, useSharedValue } from '.';
+import { useEvent } from './utils';
+import { useSharedValue } from './useSharedValue';
 const subscribeForEvents = [
     'onScroll',
     'onScrollBeginDrag',

package/lib/types/reanimated2/NativeMethods.d.ts

@@ -2,6 +2,6 @@ import { Component } from 'react';
 import { MeasuredDimensions } from './commonTypes';
 import { RefObjectFunction } from './hook/commonTypes';
 export declare function getTag(view: null | number | React.Component<any, any> | React.ComponentClass<any>): null | number;
-export declare function measure(animatedRef: RefObjectFunction<Component>): MeasuredDimensions | null;
-export declare function scrollTo(animatedRef: RefObjectFunction<Component>, x: number, y: number, animated: boolean): void;
+export declare let measure: (animatedRef: RefObjectFunction<Component>) => MeasuredDimensions | null;
+export declare let scrollTo: (animatedRef: RefObjectFunction<Component>, x: number, y: number, animated: boolean) => void;
 export declare function setGestureState(handlerTag: number, newState: number): void;

package/lib/types/reanimated2/frameCallback/FrameCallbackRegistryUI.d.ts

@@ -1,6 +1,20 @@
+declare type CallbackDetails = {
+    callback: (frameInfo: FrameInfo) => void;
+    startTime: number | null;
+};
 export declare type FrameInfo = {
     timestamp: number;
     timeSincePreviousFrame: number | null;
     timeSinceFirstFrame: number;
 };
+export interface FrameCallbackRegistryUI {
+    frameCallbackRegistry: Map<number, CallbackDetails>;
+    activeFrameCallbacks: Set<number>;
+    previousFrameTimestamp: number | null;
+    runCallbacks: () => void;
+    registerFrameCallback: (callback: (frameInfo: FrameInfo) => void, callbackId: number) => void;
+    unregisterFrameCallback: (callbackId: number) => void;
+    manageStateFrameCallback: (callbackId: number, state: boolean) => void;
+}
 export declare const prepareUIRegistry: () => void;
+export {};

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "test": "yarn run format:js && yarn run lint:js && yarn run test:unit",
     "test:unit": "jest",
-    "lint": "yarn lint:js && yarn lint:cpp && yarn lint:java",
+    "lint": "yarn lint:js && yarn lint:cpp && yarn lint:java && yarn lint:ios && yarn lint:docs",
     "lint:js": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/",
     "lint:java": "./android/gradlew -p android spotlessCheck -q",
     "lint:cpp": "./scripts/cpplint.sh",
+    "lint:ios": "./scripts/validate-ios.sh",
     "format": "yarn format:js && yarn format:java && yarn format:ios && yarn format:android && yarn format:common",
     "format:js": "prettier --write --list-different './src/'",
     "format:java": "node ./scripts/format-java.js",
@@ -26,7 +27,7 @@
     "type:generate:remove.tsx": "find ./lib -type f -name \"*.tsx\" -and -not -name \"*.d.ts\" -delete",
     "type:generate:remove.js:from-src": "find ./src/reanimated2 -type f -name \"*.js\" -delete",
     "prepare": "husky install",
-    "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular ./src",
+    "circular_dependency_check": "yarn madge --extensions js,ts,tsx --circular src lib",
     "setup": "yarn && cd Example && yarn && cd ios && pod install --verbose && cd ../..",
     "clean": "rm -rf node_modules && cd Example && rm -rf node_modules && cd ios && pod deintegrate && cd ../..",
     "reset": "yarn clean && yarn setup",
@@ -122,7 +123,7 @@
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.70.2",
+    "react-native": "0.70.3",
     "react-native-builder-bob": "^0.18.3",
     "react-native-codegen": "^0.0.7",
     "react-native-gesture-handler": "^1.6.1",

package/scripts/reanimated_utils.rb

@@ -36,7 +36,11 @@ def find_config()
   result[:react_native_minor_version] = react_native_json['version'].split('.')[1].to_i
   result[:react_native_node_modules_dir] = File.expand_path(react_native_node_modules_dir)
   result[:reanimated_node_modules_dir] = File.expand_path(File.join(__dir__, '..', '..'))
-  result[:react_native_common_dir] = File.join(react_native_node_modules_dir, 'react-native', 'ReactCommon')
+
+  pods_root = Pod::Config.instance.project_pods_root
+  react_native_common_dir_absolute = File.join(react_native_node_modules_dir, 'react-native', 'ReactCommon')
+  react_native_common_dir_relative = Pathname.new(react_native_common_dir_absolute).relative_path_from(pods_root).to_s
+  result[:react_native_common_dir] = react_native_common_dir_relative
 
   return result
 end
@@ -60,6 +64,14 @@ def assert_no_multiple_instances(react_native_info)
       location['/package.json'] = ''
       parsed_location += "- " + location + "\n"
     end
-    raise "[Reanimated] Multiple versions of Reanimated were detected. Only one instance of react-native-reanimated can be installed in a project. You need to resolve the conflict manually. Check out the documentation: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/troubleshooting#multiple-versions-of-reanimated-were-detected \n\nConflict between: \n" + parsed_location
+    raise "[react-native-reanimated] Multiple versions of Reanimated were detected. Only one instance of react-native-reanimated can be installed in a project. You need to resolve the conflict manually. Check out the documentation: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/troubleshooting#multiple-versions-of-reanimated-were-detected \n\nConflict between: \n" + parsed_location
+  end
+end
+
+def assert_no_reanimated2_with_new_architecture(reanimated_package_json)
+  reanimated_major_version = reanimated_package_json['version'].split('.')[0].to_i
+  fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
+  if fabric_enabled && reanimated_major_version == 2
+    raise "[react-native-reanimated] Reanimated 2.x does not support Fabric. Please upgrade to 3.x to use Reanimated with the New Architecture. For details, see https://blog.swmansion.com/announcing-reanimated-3-16167428c5f7"
   end
 end

package/src/createAnimatedComponent.tsx

@@ -534,12 +534,11 @@ export default function createAnimatedComponent(
         // TODO update config
         const tag = findNodeHandle(ref);
         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/src/reanimated2/NativeMethods.ts

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import { findNodeHandle } from 'react-native';
 import { MeasuredDimensions } from './commonTypes';
 import { RefObjectFunction } from './hook/commonTypes';
-import { shouldBeUseWeb } from './PlatformChecker';
+import { isChromeDebugger, isWeb, shouldBeUseWeb } from './PlatformChecker';
 
 export function getTag(
   view: null | number | React.Component<any, any> | React.ComponentClass<any>
@@ -13,70 +13,114 @@ export function getTag(
 
 const isNative = !shouldBeUseWeb();
 
-export function measure(
+export let measure: (
   animatedRef: RefObjectFunction<Component>
-): MeasuredDimensions | null {
-  'worklet';
-  if (!isNative) {
-    console.warn(
-      '[Reanimated] measure() cannot be used on web or Chrome Debugger'
-    );
-    return null;
-  }
+) => MeasuredDimensions | null;
 
-  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.'
-    );
+if (isWeb()) {
+  measure = (animatedRef: RefObjectFunction<Component>) => {
+    const element = animatedRef() as unknown as HTMLElement; // TODO: fix typing of animated refs on web
+    const viewportOffset = element.getBoundingClientRect();
+    return {
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+      x: element.offsetLeft,
+      y: element.offsetTop,
+      pageX: viewportOffset.left,
+      pageY: viewportOffset.top,
+    };
+  };
+} else if (isChromeDebugger()) {
+  measure = (_animatedRef: RefObjectFunction<Component>) => {
+    console.warn('[Reanimated] measure() cannot be used with Chrome Debugger.');
     return null;
-  }
+  };
+} else {
+  measure = (animatedRef: RefObjectFunction<Component>) => {
+    '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 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;
-  }
+    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 function scrollTo(
+export let scrollTo: (
   animatedRef: RefObjectFunction<Component>,
   x: number,
   y: number,
   animated: boolean
-): void {
-  'worklet';
-  if (!_WORKLET || !isNative) {
-    return;
-  }
-  const viewTag = animatedRef();
-  _scrollTo(viewTag, x, y, animated);
+) => void;
+
+if (isWeb()) {
+  scrollTo = (
+    animatedRef: RefObjectFunction<Component>,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => {
+    'worklet';
+    const element = animatedRef() as unknown as HTMLElement;
+    // @ts-ignore same call as in react-native-web
+    element.scrollTo({ x, y, animated });
+  };
+} else if (isNative) {
+  scrollTo = (
+    animatedRef: RefObjectFunction<Component>,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => {
+    'worklet';
+    if (!_WORKLET) {
+      return;
+    }
+    const viewTag = animatedRef();
+    _scrollTo(viewTag, x, y, animated);
+  };
+} else {
+  scrollTo = (
+    _animatedRef: RefObjectFunction<Component>,
+    _x: number,
+    _y: number
+  ) => {
+    // no-op
+  };
 }
 
 export function setGestureState(handlerTag: number, newState: number): void {

package/src/reanimated2/frameCallback/FrameCallbackRegistryUI.ts

@@ -11,7 +11,7 @@ export type FrameInfo = {
   timeSinceFirstFrame: number;
 };
 
-interface FrameCallbackRegistryUI {
+export interface FrameCallbackRegistryUI {
   frameCallbackRegistry: Map<number, CallbackDetails>;
   activeFrameCallbacks: Set<number>;
   previousFrameTimestamp: number | null;

package/src/reanimated2/globals.d.ts

@@ -1,13 +1,19 @@
-import { AnimatedStyle, StyleProps } from './commonTypes';
-import { ReanimatedConsole } from './core';
-import FrameCallbackRegistryUI from './frameCallback/FrameCallbackRegistryUI';
-import { MeasuredDimensions } from './NativeMethods';
-import { NativeReanimated } from './NativeReanimated/NativeReanimated';
+import type {
+  AnimatedStyle,
+  StyleProps,
+  MeasuredDimensions,
+} from './commonTypes';
+import type { ReanimatedConsole } from './core';
+import type { NativeReanimated } from './NativeReanimated/NativeReanimated';
+import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
+
 declare global {
   const _WORKLET: boolean;
-  const _frameTimestamp: number;
+  const _frameTimestamp: number | null;
   const _eventTimestamp: number;
+  const __reanimatedModuleProxy: NativeReanimated;
   const _setGlobalConsole: (console?: ReanimatedConsole) => void;
+  const _log: (s: string) => void;
   const _getCurrentTime: () => number;
   const _stopObservingProgress: (tag: number, flag: boolean) => void;
   const _startObservingProgress: (
@@ -20,7 +26,7 @@ declare global {
     name: string,
     updates: StyleProps | AnimatedStyle
   ) => void;
-  const _measure: (viewTag: number) => MeasuredDimensions | null;
+  const _measure: (viewTag: number) => MeasuredDimensions;
   const _scrollTo: (
     viewTag: number,
     x: number,
@@ -28,20 +34,40 @@ declare global {
     animated: boolean
   ) => void;
   const _chronoNow: () => number;
+  const performance: { now: () => number };
+  const LayoutAnimationRepository: {
+    configs: Record<string, unknown>;
+    registerConfig(tag: number, config: Record<string, unknown>): void;
+    removeConfig(tag: number): void;
+    startAnimationForTag(tag: number, type: string, yogaValues: unknown): void;
+  };
   const ReanimatedDataMock: {
     now: () => number;
   };
   const _frameCallbackRegistry: FrameCallbackRegistryUI;
   namespace NodeJS {
     interface Global {
-      _setGlobalConsole: (console?: ReanimatedConsole) => void;
-      _log: (s: string) => void;
-      _setGestureState: () => void;
       _WORKLET: boolean;
-      __reanimatedModuleProxy: NativeReanimated;
+      _IS_FABRIC: boolean;
       _frameTimestamp: number | null;
-      _measure: () => MeasuredDimensions | null;
-      _scrollTo: () => void;
+      _eventTimestamp: number;
+      __reanimatedModuleProxy: NativeReanimated;
+      _setGlobalConsole: (console?: ReanimatedConsole) => void;
+      _log: (s: string) => void;
+      _getCurrentTime: () => number;
+      _stopObservingProgress: (tag: number, flag: boolean) => void;
+      _startObservingProgress: (
+        tag: number,
+        flag: { value: boolean; _value: boolean }
+      ) => void;
+      _setGestureState: (handlerTag: number, newState: number) => void;
+      _measure: (viewTag: number) => MeasuredDimensions;
+      _scrollTo: (
+        viewTag: number,
+        x: number,
+        y: number,
+        animated: boolean
+      ) => void;
       _chronoNow: () => number;
       performance: { now: () => number };
       LayoutAnimationRepository: {

package/src/reanimated2/hook/useScrollViewOffset.ts

@@ -1,10 +1,11 @@
 import { RefObject, useEffect, useRef } from 'react';
 
-import { findNodeHandle } from 'react-native';
 import type Animated from 'react-native-reanimated';
-import { useEvent, useSharedValue } from '.';
-import { SharedValue } from '../commonTypes';
 import { ScrollEvent } from './useAnimatedScrollHandler';
+import { SharedValue } from '../commonTypes';
+import { findNodeHandle } from 'react-native';
+import { useEvent } from './utils';
+import { useSharedValue } from './useSharedValue';
 
 const subscribeForEvents = [
   'onScroll',

package/android/rnVersionPatch/63/layoutReanimation/ReanimatedUIImplementation.java

@@ -1,68 +0,0 @@
-package com.facebook.react.uimanager;
-
-import androidx.annotation.Nullable;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.uimanager.events.EventDispatcher;
-import com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager;
-import java.util.List;
-
-public class ReanimatedUIImplementation extends UIImplementation {
-  public ReanimatedUIImplementation(
-      ReactApplicationContext reactContext,
-      UIManagerModule.ViewManagerResolver viewManagerResolver,
-      EventDispatcher eventDispatcher,
-      int minTimeLeftInFrameForNonBatchedOperationMs) {
-    this(
-        reactContext,
-        new ViewManagerRegistry(viewManagerResolver),
-        eventDispatcher,
-        minTimeLeftInFrameForNonBatchedOperationMs);
-  }
-
-  public ReanimatedUIImplementation(
-      ReactApplicationContext reactContext,
-      List<ViewManager> viewManagerList,
-      EventDispatcher eventDispatcher,
-      int minTimeLeftInFrameForNonBatchedOperationMs) {
-    this(
-        reactContext,
-        new ViewManagerRegistry(viewManagerList),
-        eventDispatcher,
-        minTimeLeftInFrameForNonBatchedOperationMs);
-  }
-
-  public ReanimatedUIImplementation(
-      ReactApplicationContext reactContext,
-      ViewManagerRegistry viewManagerRegistry,
-      EventDispatcher eventDispatcher,
-      int minTimeLeftInFrameForNonBatchedOperationMs) {
-    super(
-        reactContext,
-        viewManagerRegistry,
-        new UIViewOperationQueue(
-            reactContext,
-            new ReanimatedNativeHierarchyManager(viewManagerRegistry, reactContext),
-            minTimeLeftInFrameForNonBatchedOperationMs),
-        eventDispatcher);
-  }
-
-  /**
-   * Invoked when there is a mutation in a node tree.
-   *
-   * @param tag react tag of the node we want to manage
-   * @param indicesToRemove ordered (asc) list of indicies at which view should be removed
-   * @param viewsToAdd ordered (asc based on mIndex property) list of tag-index pairs that represent
-   *     a view which should be added at the specified index
-   * @param tagsToDelete list of tags corresponding to views that should be removed
-   */
-  public void manageChildren(
-      int viewTag,
-      @Nullable ReadableArray moveFrom,
-      @Nullable ReadableArray moveTo,
-      @Nullable ReadableArray addChildTags,
-      @Nullable ReadableArray addAtIndices,
-      @Nullable ReadableArray removeFrom) {
-    super.manageChildren(viewTag, moveFrom, moveTo, addChildTags, addAtIndices, removeFrom);
-  }
-}

package/android/rnVersionPatch/64/layoutReanimation/ReanimatedUIImplementation.java

@@ -1,68 +0,0 @@
-package com.facebook.react.uimanager;
-
-import androidx.annotation.Nullable;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.uimanager.events.EventDispatcher;
-import com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager;
-import java.util.List;
-
-public class ReanimatedUIImplementation extends UIImplementation {
-  public ReanimatedUIImplementation(
-      ReactApplicationContext reactContext,
-      UIManagerModule.ViewManagerResolver viewManagerResolver,
-      EventDispatcher eventDispatcher,
-      int minTimeLeftInFrameForNonBatchedOperationMs) {
-    this(
-        reactContext,
-        new ViewManagerRegistry(viewManagerResolver),
-        eventDispatcher,
-        minTimeLeftInFrameForNonBatchedOperationMs);
-  }
-
-  public ReanimatedUIImplementation(
-      ReactApplicationContext reactContext,
-      List<ViewManager> viewManagerList,
-      EventDispatcher eventDispatcher,
-      int minTimeLeftInFrameForNonBatchedOperationMs) {
-    this(
-        reactContext,
-        new ViewManagerRegistry(viewManagerList),
-        eventDispatcher,
-        minTimeLeftInFrameForNonBatchedOperationMs);
-  }
-
-  public ReanimatedUIImplementation(
-      ReactApplicationContext reactContext,
-      ViewManagerRegistry viewManagerRegistry,
-      EventDispatcher eventDispatcher,
-      int minTimeLeftInFrameForNonBatchedOperationMs) {
-    super(
-        reactContext,
-        viewManagerRegistry,
-        new UIViewOperationQueue(
-            reactContext,
-            new ReanimatedNativeHierarchyManager(viewManagerRegistry, reactContext),
-            minTimeLeftInFrameForNonBatchedOperationMs),
-        eventDispatcher);
-  }
-
-  /**
-   * Invoked when there is a mutation in a node tree.
-   *
-   * @param tag react tag of the node we want to manage
-   * @param indicesToRemove ordered (asc) list of indicies at which view should be removed
-   * @param viewsToAdd ordered (asc based on mIndex property) list of tag-index pairs that represent
-   *     a view which should be added at the specified index
-   * @param tagsToDelete list of tags corresponding to views that should be removed
-   */
-  public void manageChildren(
-      int viewTag,
-      @Nullable ReadableArray moveFrom,
-      @Nullable ReadableArray moveTo,
-      @Nullable ReadableArray addChildTags,
-      @Nullable ReadableArray addAtIndices,
-      @Nullable ReadableArray removeFrom) {
-    super.manageChildren(viewTag, moveFrom, moveTo, addChildTags, addAtIndices, removeFrom);
-  }
-}