react-native-reanimated 2.10.0 → 2.12.0

package/src/reanimated2/NativeMethods.ts

@@ -1,10 +1,9 @@
 /* global _WORKLET _measure _scrollTo _setGestureState */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import { Component } from 'react';
 import { findNodeHandle } from 'react-native';
-import { RefObjectFunction } from './commonTypes';
-import { shouldBeUseWeb } from './PlatformChecker';
+import { MeasuredDimensions } from './commonTypes';
+import { RefObjectFunction } from './hook/commonTypes';
+import { isChromeDebugger, isWeb, shouldBeUseWeb } from './PlatformChecker';
 
 export function getTag(
   view: null | number | React.Component<any, any> | React.ComponentClass<any>
@@ -12,64 +11,121 @@ export function getTag(
   return findNodeHandle(view);
 }
 
-export interface MeasuredDimensions {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  pageX: number;
-  pageY: number;
-}
-
-const isNativeIndefined = shouldBeUseWeb();
+const isNative = !shouldBeUseWeb();
 
-export function measure(
+export let measure: (
   animatedRef: RefObjectFunction<Component>
-): MeasuredDimensions {
-  'worklet';
-  if (!_WORKLET || isNativeIndefined) {
-    console.warn(
-      '[reanimated.measure] method cannot be used for web or Chrome Debugger'
-    );
+) => MeasuredDimensions | null;
+
+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 {
-      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;
+  };
+} 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 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 || isNativeIndefined) {
-    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 {
   'worklet';
-  if (!_WORKLET || isNativeIndefined) {
+  if (!_WORKLET || !isNative) {
     console.warn(
       '[Reanimated] You can not use setGestureState in non-worklet function.'
     );

package/src/reanimated2/commonTypes.ts

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

package/src/reanimated2/frameCallback/FrameCallbackRegistryJS.ts

@@ -1,5 +1,5 @@
 import { runOnUI } from '../core';
-import { prepareUIRegistry } from './FrameCallbackRegistryUI';
+import { FrameInfo, prepareUIRegistry } from './FrameCallbackRegistryUI';
 
 export default class FrameCallbackRegistryJS {
   private nextCallbackId = 0;
@@ -8,7 +8,7 @@ export default class FrameCallbackRegistryJS {
     prepareUIRegistry();
   }
 
-  registerFrameCallback(callback: () => void): number {
+  registerFrameCallback(callback: (frameInfo: FrameInfo) => void): number {
     if (!callback) {
       return -1;
     }
@@ -24,20 +24,17 @@ export default class FrameCallbackRegistryJS {
     return callbackId;
   }
 
-  unregisterFrameCallback(frameCallbackId: number): void {
+  unregisterFrameCallback(callbackId: number): void {
     runOnUI(() => {
       'worklet';
-      global._frameCallbackRegistry.unregisterFrameCallback(frameCallbackId);
+      global._frameCallbackRegistry.unregisterFrameCallback(callbackId);
     })();
   }
 
-  manageStateFrameCallback(frameCallbackId: number, state: boolean): void {
+  manageStateFrameCallback(callbackId: number, state: boolean): void {
     runOnUI(() => {
       'worklet';
-      global._frameCallbackRegistry.manageStateFrameCallback(
-        frameCallbackId,
-        state
-      );
+      global._frameCallbackRegistry.manageStateFrameCallback(callbackId, state);
     })();
   }
 }

package/src/reanimated2/frameCallback/FrameCallbackRegistryUI.ts

@@ -1,61 +1,112 @@
 import { runOnUI } from '../core';
 
-export default interface FrameCallbackRegistryUI {
-  frameCallbackRegistry: Map<number, () => void>;
-  frameCallbackActive: Set<number>;
-  isFrameCallbackRunning: boolean;
+type CallbackDetails = {
+  callback: (frameInfo: FrameInfo) => void;
+  startTime: number | null;
+};
+
+export 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 const prepareUIRegistry = runOnUI(() => {
   'worklet';
 
   const frameCallbackRegistry: FrameCallbackRegistryUI = {
-    frameCallbackRegistry: new Map<number, () => void>(),
-    frameCallbackActive: new Set<number>(),
-    isFrameCallbackRunning: false,
+    frameCallbackRegistry: new Map<number, CallbackDetails>(),
+    activeFrameCallbacks: new Set<number>(),
+    previousFrameTimestamp: null,
 
     runCallbacks() {
-      const loop = () => {
-        this.frameCallbackActive.forEach((key: number) => {
-          const callback = this.frameCallbackRegistry.get(key);
-          callback!();
+      const loop = (timestamp: number) => {
+        if (this.previousFrameTimestamp === null) {
+          this.previousFrameTimestamp = timestamp;
+        }
+
+        const delta = timestamp - this.previousFrameTimestamp;
+
+        this.activeFrameCallbacks.forEach((callbackId: number) => {
+          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: () => void, callbackId: number) {
-      this.frameCallbackRegistry.set(callbackId, callback);
+    registerFrameCallback(
+      callback: (frameInfo: FrameInfo) => void,
+      callbackId: number
+    ) {
+      this.frameCallbackRegistry.set(callbackId, {
+        callback: callback,
+        startTime: null,
+      });
     },
 
-    unregisterFrameCallback(frameCallbackId: number) {
-      this.manageStateFrameCallback(frameCallbackId, false);
-      this.frameCallbackRegistry.delete(frameCallbackId);
+    unregisterFrameCallback(callbackId: number) {
+      this.manageStateFrameCallback(callbackId, false);
+      this.frameCallbackRegistry.delete(callbackId);
     },
 
-    manageStateFrameCallback(frameCallbackId: number, state: boolean) {
-      if (frameCallbackId === -1) {
+    manageStateFrameCallback(callbackId: number, state: boolean) {
+      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);
       }
     },
   };

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: (
@@ -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/src/reanimated2/hook/index.ts

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

package/src/reanimated2/hook/useAnimatedScrollHandler.ts

@@ -10,7 +10,9 @@ export interface ScrollHandler<TContext extends Context>
   (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> {

package/src/reanimated2/hook/useFrameCallback.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import FrameCallbackRegistryJS from '../frameCallback/FrameCallbackRegistryJS';
+import { FrameInfo } from '../frameCallback/FrameCallbackRegistryUI';
 
 export type FrameCallback = {
   setActive: (isActive: boolean) => void;
@@ -9,7 +10,7 @@ export type FrameCallback = {
 const frameCallbackRegistry = new FrameCallbackRegistryJS();
 
 export function useFrameCallback(
-  callback: () => void,
+  callback: (frameInfo: FrameInfo) => void,
   autostart = true
 ): FrameCallback {
   const ref = useRef<FrameCallback>({

package/src/reanimated2/hook/useScrollViewOffset.ts

@@ -0,0 +1,37 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+import type Animated from 'react-native-reanimated';
+import { ScrollEvent } from './useAnimatedScrollHandler';
+import { SharedValue } from '../commonTypes';
+import { findNodeHandle } from 'react-native';
+import { useEvent } from './utils';
+import { useSharedValue } from './useSharedValue';
+
+const subscribeForEvents = [
+  'onScroll',
+  'onScrollBeginDrag',
+  'onScrollEndDrag',
+  'onMomentumScrollBegin',
+  'onMomentumScrollEnd',
+];
+
+export function useScrollViewOffset(
+  aref: RefObject<Animated.ScrollView>
+): SharedValue<number> {
+  const offsetRef = useRef(useSharedValue(0));
+
+  const event = useEvent<ScrollEvent>((event: ScrollEvent) => {
+    'worklet';
+    offsetRef.current.value =
+      event.contentOffset.x === 0
+        ? event.contentOffset.y
+        : event.contentOffset.x;
+  }, subscribeForEvents);
+
+  useEffect(() => {
+    const viewTag = findNodeHandle(aref.current);
+    event.current?.registerForEvents(viewTag as number);
+  }, [aref.current]);
+
+  return offsetRef.current;
+}

package/src/reanimated2/utils.ts

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