react-native-reanimated 3.0.0-rc.3 → 3.0.0-rc.4

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,39 +13,71 @@ export function getTag(
 
 const isNative = !shouldBeUseWeb();
 
-export function measure(
+export let measure: (
   animatedRef: RefObjectFunction<Component>
-): MeasuredDimensions | null {
-  'worklet';
-  if (!_WORKLET || !isNative) {
-    console.warn(
-      '[Reanimated] measure() cannot be used for web or Chrome Debugger'
-    );
-    return null;
-  }
+) => MeasuredDimensions | 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).`
-    );
+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 measured = _measure(viewTag);
-  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 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 dispatchCommand(
@@ -68,7 +100,19 @@ export let scrollTo: (
   animated: boolean
 ) => void;
 
-if (global._IS_FABRIC) {
+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 && global._IS_FABRIC) {
   scrollTo = (
     animatedRef: RefObjectFunction<Component>,
     x: number,
@@ -78,7 +122,7 @@ if (global._IS_FABRIC) {
     'worklet';
     dispatchCommand(animatedRef, 'scrollTo', [x, y, animated]);
   };
-} else {
+} else if (isNative) {
   scrollTo = (
     animatedRef: RefObjectFunction<Component>,
     x: number,
@@ -86,12 +130,20 @@ if (global._IS_FABRIC) {
     animated: boolean
   ) => {
     'worklet';
-    if (!_WORKLET || !isNative) {
+    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,15 +1,21 @@
-import { AnimatedStyle, StyleProps } from './commonTypes';
-import { ReanimatedConsole } from './core';
-import { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
-import { ShadowNodeWrapper } from './hook/commonTypes';
-import { MeasuredDimensions } from './NativeMethods';
-import { NativeReanimated } from './NativeReanimated/NativeReanimated';
+import type {
+  AnimatedStyle,
+  StyleProps,
+  MeasuredDimensions,
+} from './commonTypes';
+import type { ReanimatedConsole } from './core';
+import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
+import type { ShadowNodeWrapper } from './hook/commonTypes';
+import type { NativeReanimated } from './NativeReanimated/NativeReanimated';
+
 declare global {
   const _WORKLET: boolean;
   const _IS_FABRIC: 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: (
@@ -42,22 +48,58 @@ declare global {
     args: Array<unknown>
   ) => 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;
       _IS_FABRIC: boolean;
-      __reanimatedModuleProxy: NativeReanimated;
       _frameTimestamp: number | null;
-      _measure: () => MeasuredDimensions;
-      _scrollTo: () => void;
-      _dispatchCommand: () => 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;
+      _updatePropsPaper: (
+        tag: number,
+        name: string,
+        updates: StyleProps | AnimatedStyle
+      ) => void;
+      _updatePropsFabric: (
+        shadowNodeWrapper: ShadowNodeWrapper,
+        props: StyleProps | AnimatedStyle
+      ) => void;
+      _removeShadowNodeFromRegistry: (
+        shadowNodeWrapper: ShadowNodeWrapper
+      ) => void;
+      _measure: (viewTag: number) => MeasuredDimensions;
+      _scrollTo: (
+        viewTag: number,
+        x: number,
+        y: number,
+        animated: boolean
+      ) => void;
+      _dispatchCommand: (
+        shadowNodeWrapper: ShadowNodeWrapper,
+        commandName: string,
+        args: Array<unknown>
+      ) => 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);
-  }
-}

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

@@ -1,8 +0,0 @@
-package com.swmansion.reanimated;
-
-public class AndroidErrorHandler {
-
-  public static void raise(String message) {
-    throw new RuntimeException(message);
-  }
-}