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

package/src/reanimated2/NativeMethods.ts

@@ -1,9 +1,8 @@
 /* global _WORKLET _measure _scrollTo _dispatchCommand _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 { MeasuredDimensions } from './commonTypes';
+import { RefObjectFunction } from './hook/commonTypes';
 import { shouldBeUseWeb } from './PlatformChecker';
 
 export function getTag(
@@ -12,45 +11,41 @@ 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(
   animatedRef: RefObjectFunction<Component>
-): MeasuredDimensions {
+): MeasuredDimensions | null {
   'worklet';
-  if (!_WORKLET || isNativeIndefined) {
+  if (!_WORKLET || !isNative) {
     console.warn(
-      '[reanimated.measure] method cannot be used for web or Chrome Debugger'
+      '[Reanimated] measure() cannot be used for web or Chrome Debugger'
     );
-    return {
-      x: NaN,
-      y: NaN,
-      width: NaN,
-      height: NaN,
-      pageX: NaN,
-      pageY: NaN,
-    };
+    return null;
   }
+
   const viewTag = animatedRef();
-  const result = _measure(viewTag);
-  if (result.x === -1234567) {
-    throw new Error(`The view with tag ${viewTag} could not be measured`);
+  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;
   }
-  if (isNaN(result.x)) {
+
+  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(
-      'Trying to measure a component which gets view-flattened on Android. To disable view-flattening, set `collapsable={false}` on this component.'
+      `[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;
   }
-  return result;
 }
 
 export function dispatchCommand(
@@ -59,7 +54,7 @@ export function dispatchCommand(
   args: Array<unknown>
 ): void {
   'worklet';
-  if (!_WORKLET || isNativeIndefined) {
+  if (!_WORKLET || !isNative) {
     return;
   }
   const shadowNodeWrapper = animatedRef();
@@ -91,7 +86,7 @@ if (global._IS_FABRIC) {
     animated: boolean
   ) => {
     'worklet';
-    if (!_WORKLET || isNativeIndefined) {
+    if (!_WORKLET || !isNative) {
       return;
     }
     const viewTag = animatedRef();
@@ -101,7 +96,7 @@ if (global._IS_FABRIC) {
 
 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/animation/delay.ts

@@ -75,15 +75,3 @@ export function withDelay(
     };
   });
 }
-
-/**
- * @deprecated Kept for backward compatibility. Will be removed soon.
- */
-export function delay(
-  delayMs: number,
-  _nextAnimation: NextAnimation<DelayAnimation>
-): Animation<DelayAnimation> {
-  'worklet';
-  console.warn('Method `delay` is deprecated. Please use `withDelay` instead');
-  return withDelay(delayMs, _nextAnimation);
-}

package/src/reanimated2/animation/repeat.ts

@@ -91,28 +91,3 @@ export function withRepeat(
     } as RepeatAnimation;
   });
 }
-
-/**
- * @deprecated Kept for backward compatibility. Will be removed soon.
- */
-export function repeat(
-  _nextAnimation: NextAnimation<RepeatAnimation>,
-  numberOfReps = 2,
-  reverse = false,
-  callback?: AnimationCallback
-): Animation<RepeatAnimation> {
-  'worklet';
-  console.warn(
-    'Method `repeat` is deprecated. Please use `withRepeat` instead'
-  );
-  return withRepeat(_nextAnimation, numberOfReps, reverse, callback);
-}
-
-export function loop(
-  nextAnimation: NextAnimation<RepeatAnimation>,
-  numberOfLoops = 1
-): Animation<RepeatAnimation> {
-  'worklet';
-  console.warn('Method `loop` is deprecated. Please use `withRepeat` instead');
-  return repeat(nextAnimation, Math.round(numberOfLoops * 2), true);
-}

package/src/reanimated2/animation/sequence.ts

@@ -83,16 +83,3 @@ export function withSequence(
     }
   );
 }
-
-/**
- * @deprecated Kept for backward compatibility. Will be removed soon.
- */
-export function sequence(
-  ..._animations: NextAnimation<SequenceAnimation>[]
-): Animation<SequenceAnimation> {
-  'worklet';
-  console.warn(
-    'Method `sequence` is deprecated. Please use `withSequence` instead'
-  );
-  return withSequence(..._animations);
-}

package/src/reanimated2/commonTypes.ts

@@ -161,3 +161,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;
+};
+
+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/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,36 @@
+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';
+
+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/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();
-  }
-}