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

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,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/index.ts

@@ -24,3 +24,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);
-  }
-}

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);
-  }
-}

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

@@ -1,29 +0,0 @@
-package com.swmansion.reanimated;
-
-import android.util.Log;
-import com.facebook.react.bridge.JSIModulePackage;
-import com.facebook.react.bridge.JSIModuleSpec;
-import com.facebook.react.bridge.JavaScriptContextHolder;
-import com.facebook.react.bridge.ReactApplicationContext;
-import java.util.Arrays;
-import java.util.List;
-
-public class ReanimatedJSIModulePackage implements JSIModulePackage {
-  /**
-   * @deprecated Since 2.5.0, Reanimated autoinstalls on Android - you can remove
-   *     getJSIModulePackage() override in MainApplication.java.
-   */
-  @Deprecated
-  public ReanimatedJSIModulePackage() {
-    super();
-  }
-
-  @Override
-  public List<JSIModuleSpec> getJSIModules(
-      ReactApplicationContext reactApplicationContext, JavaScriptContextHolder jsContext) {
-    Log.w(
-        "[REANIMATED]",
-        "Since 2.5.0, Reanimated autoinstalls on Android - you can remove getJSIModulePackage() override in MainApplication.java.");
-    return Arrays.<JSIModuleSpec>asList();
-  }
-}