react-native-reanimated 2.10.0 → 2.12.0

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: (
@@ -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;
-      _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/index.js

@@ -9,3 +9,4 @@ export { useDerivedValue } from './useDerivedValue';
 export { useAnimatedSensor, SensorType } from './useAnimatedSensor';
 export { useFrameCallback } from './useFrameCallback';
 export { useAnimatedKeyboard } from './useAnimatedKeyboard';
+export { useScrollViewOffset } from './useScrollViewOffset';

package/lib/reanimated2/hook/useScrollViewOffset.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { findNodeHandle } from 'react-native';
+import { useEvent } from './utils';
+import { useSharedValue } from './useSharedValue';
+const subscribeForEvents = [
+    'onScroll',
+    'onScrollBeginDrag',
+    'onScrollEndDrag',
+    'onMomentumScrollBegin',
+    'onMomentumScrollEnd',
+];
+export function useScrollViewOffset(aref) {
+    const offsetRef = useRef(useSharedValue(0));
+    const event = useEvent((event) => {
+        'worklet';
+        offsetRef.current.value =
+            event.contentOffset.x === 0
+                ? event.contentOffset.y
+                : event.contentOffset.x;
+    }, subscribeForEvents);
+    useEffect(() => {
+        var _a;
+        const viewTag = findNodeHandle(aref.current);
+        (_a = event.current) === null || _a === void 0 ? void 0 : _a.registerForEvents(viewTag);
+    }, [aref.current]);
+    return offsetRef.current;
+}

package/lib/reanimated2/utils.js

@@ -1,9 +1,16 @@
 import { measure } from './NativeMethods';
-export function getRelativeCoords(parentRef, x, y) {
+/**
+ * Given an absolute position and a component ref, returns the relative
+ * position in the component's local coordinate space.
+ */
+export function getRelativeCoords(parentRef, absoluteX, absoluteY) {
     'worklet';
     const parentCoords = measure(parentRef);
+    if (parentCoords === null) {
+        return null;
+    }
     return {
-        x: x - parentCoords.x,
-        y: y - parentCoords.y,
+        x: absoluteX - parentCoords.x,
+        y: absoluteY - parentCoords.y,
     };
 }

package/lib/types/index.web.d.ts

@@ -1,3 +1,4 @@
 import './reanimated2/js-reanimated/global';
+export * from './reanimated1';
 export * from './reanimated2';
 export * as default from './Animated';

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

@@ -1,14 +1,7 @@
 import { Component } from 'react';
-import { RefObjectFunction } from './commonTypes';
+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 interface MeasuredDimensions {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    pageX: number;
-    pageY: number;
-}
-export declare function measure(animatedRef: RefObjectFunction<Component>): MeasuredDimensions;
-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/commonTypes.d.ts

@@ -89,3 +89,11 @@ export declare type AnimatedKeyboardInfo = {
     height: SharedValue<number>;
     state: SharedValue<KeyboardState>;
 };
+export interface MeasuredDimensions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    pageX: number;
+    pageY: number;
+}

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

@@ -1,7 +1,8 @@
+import { FrameInfo } from './FrameCallbackRegistryUI';
 export default class FrameCallbackRegistryJS {
     private nextCallbackId;
     constructor();
-    registerFrameCallback(callback: () => void): number;
-    unregisterFrameCallback(frameCallbackId: number): void;
-    manageStateFrameCallback(frameCallbackId: number, state: boolean): void;
+    registerFrameCallback(callback: (frameInfo: FrameInfo) => void): number;
+    unregisterFrameCallback(callbackId: number): void;
+    manageStateFrameCallback(callbackId: number, state: boolean): void;
 }

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

@@ -1,10 +1,20 @@
-export default interface FrameCallbackRegistryUI {
-    frameCallbackRegistry: Map<number, () => void>;
-    frameCallbackActive: Set<number>;
-    isFrameCallbackRunning: boolean;
+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: () => void, callbackId: number) => void;
-    unregisterFrameCallback: (frameCallbackId: number) => void;
-    manageStateFrameCallback: (frameCallbackId: number, state: boolean) => 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/lib/types/reanimated2/hook/index.d.ts

@@ -11,3 +11,4 @@ export { useAnimatedSensor, SensorType } from './useAnimatedSensor';
 export { useFrameCallback } from './useFrameCallback';
 export type { FrameCallback } from './useFrameCallback';
 export { useAnimatedKeyboard } from './useAnimatedKeyboard';
+export { useScrollViewOffset } from './useScrollViewOffset';

package/lib/types/reanimated2/hook/useAnimatedScrollHandler.d.ts

@@ -6,7 +6,7 @@ import { Context, DependencyList } from './commonTypes';
 export interface ScrollHandler<TContext extends Context> extends WorkletFunction {
     (event: NativeScrollEvent, context?: TContext): void;
 }
-interface ScrollEvent extends NativeScrollEvent, NativeEvent<ScrollEvent> {
+export interface ScrollEvent extends NativeScrollEvent, NativeEvent<ScrollEvent> {
     eventName: string;
 }
 export interface ScrollHandlers<TContext extends Context> {
@@ -18,4 +18,3 @@ export interface ScrollHandlers<TContext extends Context> {
     onMomentumEnd?: ScrollHandler<TContext>;
 }
 export declare function useAnimatedScrollHandler<TContext extends Context>(handlers: ScrollHandlers<TContext> | ScrollHandler<TContext>, dependencies?: DependencyList): RefObject<WorkletEventHandler<ScrollEvent>>;
-export {};

package/lib/types/reanimated2/hook/useFrameCallback.d.ts

@@ -1,6 +1,7 @@
+import { FrameInfo } from '../frameCallback/FrameCallbackRegistryUI';
 export declare type FrameCallback = {
     setActive: (isActive: boolean) => void;
     isActive: boolean;
     callbackId: number;
 };
-export declare function useFrameCallback(callback: () => void, autostart?: boolean): FrameCallback;
+export declare function useFrameCallback(callback: (frameInfo: FrameInfo) => void, autostart?: boolean): FrameCallback;

package/lib/types/reanimated2/hook/useScrollViewOffset.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+import type Animated from 'react-native-reanimated';
+import { SharedValue } from '../commonTypes';
+export declare function useScrollViewOffset(aref: RefObject<Animated.ScrollView>): SharedValue<number>;

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

@@ -4,4 +4,8 @@ export interface ComponentCoords {
     x: number;
     y: number;
 }
-export declare function getRelativeCoords(parentRef: RefObjectFunction<Component>, x: number, y: number): ComponentCoords;
+/**
+ * Given an absolute position and a component ref, returns the relative
+ * position in the component's local coordinate space.
+ */
+export declare function getRelativeCoords(parentRef: RefObjectFunction<Component>, absoluteX: number, absoluteY: number): ComponentCoords | null;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.10.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",
@@ -50,6 +51,7 @@
     "!ios/build/",
     "!android/build/",
     "RNReanimated.podspec",
+    "scripts/reanimated_utils.rb",
     "README.md",
     "react-native-reanimated.d.ts",
     "mock.js",
@@ -93,7 +95,7 @@
     "@react-native-community/bob": "^0.17.1",
     "@react-native-community/eslint-config": "^0.0.5",
     "@testing-library/jest-native": "^4.0.4",
-    "@testing-library/react-hooks": "^5.0.3",
+    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^7.1.0",
     "@types/babel-types": "^7.0.11",
     "@types/babel__core": "^7.1.18",
@@ -121,11 +123,11 @@
     "madge": "^5.0.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
-    "react-native": "0.70.0-rc.3",
+    "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",
-    "react-test-renderer": "18.0.0",
+    "react-test-renderer": "17.0.2",
     "release-it": "^13.7.2",
     "typescript": "^4.1.3"
   },

package/plugin.js

@@ -447,7 +447,7 @@ function makeWorklet(t, fun, state) {
   const workletHash = hash(funString);
 
   let location = state.file.opts.filename;
-  if (state.opts.relativeSourceLocation) {
+  if (state.opts && state.opts.relativeSourceLocation) {
     const path = require('path');
     location = path.relative(state.cwd, location);
   }

package/react-native-reanimated.d.ts

@@ -54,6 +54,8 @@ declare module 'react-native-reanimated' {
     import('./lib/types/lib/reanimated2/animation/index').StyleLayoutAnimation;
   export type Animation<T> =
     import('./lib/types/lib/reanimated2/commonTypes').Animation<T>;
+  export type MeasuredDimensions =
+    import('./lib/types/lib/reanimated2/commonTypes').MeasuredDimensions;
 
   namespace Animated {
     type Nullable<T> = T | null | undefined;
@@ -543,8 +545,13 @@ declare module 'react-native-reanimated' {
     isActive: boolean;
     callbackId: number;
   };
+  export type FrameInfo = {
+    timestamp: number;
+    timeSincePreviousFrame: number | null;
+    timeSinceFirstFrame: number;
+  };
   export function useFrameCallback(
-    callback: () => void,
+    callback: (frameInfo: FrameInfo) => void,
     autostart?: boolean
   ): FrameCallback;
 
@@ -561,6 +568,10 @@ declare module 'react-native-reanimated' {
   };
   export function useAnimatedKeyboard(): AnimatedKeyboardInfo;
 
+  export function useScrollViewOffset(
+    aref: RefObject<Animated.ScrollView>
+  ): SharedValue<number>;
+
   export interface ExitAnimationsValues {
     currentOriginX: number;
     currentOriginY: number;
@@ -803,14 +814,7 @@ declare module 'react-native-reanimated' {
   export function defineAnimation<T>(starting: any, factory: () => T): number;
   export function measure<T extends Component>(
     ref: RefObject<T>
-  ): {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    pageX: number;
-    pageY: number;
-  };
+  ): MeasuredDimensions | null;
 
   export function getRelativeCoords(
     ref: RefObject<Component>,

package/scripts/reanimated_utils.rb

@@ -0,0 +1,77 @@
+def try_to_parse_react_native_package_json(node_modules_dir)
+  react_native_package_json_path = File.join(node_modules_dir, 'react-native/package.json')
+  if !File.exists?(react_native_package_json_path)
+    return nil
+  end
+  return JSON.parse(File.read(react_native_package_json_path))
+end
+
+def find_config()
+  result = {
+    :is_reanimated_example_app => nil,
+    :react_native_version => nil,
+    :react_native_minor_version => nil,
+    :is_tvos_target => nil,
+    :react_native_node_modules_dir => nil,
+    :reanimated_node_modules_dir => nil,
+    :react_native_common_dir => nil,
+  }
+
+  react_native_node_modules_dir = File.join(File.dirname(`cd #{Pod::Config.instance.installation_root.to_s} && node --print "require.resolve('react-native/package.json')"`), '..')
+  react_native_json = try_to_parse_react_native_package_json(react_native_node_modules_dir)
+
+  if react_native_json == nil
+    # user configuration, just in case
+    node_modules_dir = ENV["REACT_NATIVE_NODE_MODULES_DIR"]
+    react_native_json = try_to_parse_react_native_package_json(node_modules_dir)
+  end
+
+  if react_native_json == nil
+    raise '[RNReanimated] Unable to recognize your `react-native` version! Please set environmental variable with `react-native` locations: `export REACT_NATIVE_NODE_MODULES_DIR="<path to react-native>" && pod install'
+  end
+
+  result[:is_reanimated_example_app] = ENV["REANIMATED_EXAMPLE_APP_NAME"] != nil
+  result[:is_tvos_target] = react_native_json['name'] == 'react-native-tvos'
+  result[:react_native_version] = react_native_json['version']
+  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__, '..', '..'))
+
+  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
+
+def assert_no_multiple_instances(react_native_info)
+  if react_native_info[:is_reanimated_example_app]
+    return
+  end
+
+  lib_instances_in_react_native_node_modules = %x[find #{react_native_info[:react_native_node_modules_dir]} -name "package.json" | grep "/react-native-reanimated/package.json"]
+  lib_instances_in_react_native_node_modules_array = lib_instances_in_react_native_node_modules.split("\n")
+  reanimated_instances = lib_instances_in_react_native_node_modules_array.length()
+  if react_native_info[:react_native_node_modules_dir] != react_native_info[:reanimated_node_modules_dir]
+    lib_instances_in_reanimated_node_modules = %x[find #{react_native_info[:reanimated_node_modules_dir]} -name "package.json" | grep "/react-native-reanimated/package.json"]
+    lib_instances_in_reanimated_node_modules_array = lib_instances_in_reanimated_node_modules.split("\n")
+    reanimated_instances += lib_instances_in_reanimated_node_modules_array.length()
+  end
+  if reanimated_instances > 1
+    parsed_location = ''
+    for location in lib_instances_in_react_native_node_modules_array + lib_instances_in_reanimated_node_modules_array
+      location['/package.json'] = ''
+      parsed_location += "- " + location + "\n"
+    end
+    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/index.web.ts

@@ -1,5 +1,7 @@
 // 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