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

package/src/reanimated2/hook/useAnimatedRef.ts

@@ -1,18 +1,23 @@
 import { Component, useRef } from 'react';
-import { getTag } from '../NativeMethods';
 import { useSharedValue } from './useSharedValue';
 import { RefObjectFunction } from './commonTypes';
+import { ShadowNodeWrapper } from '../commonTypes';
+import { getTag } from '../NativeMethods';
+import { getShadowNodeWrapperFromHostInstance } from '../fabricUtils';
 
 export function useAnimatedRef<T extends Component>(): RefObjectFunction<T> {
-  const tag = useSharedValue<number | null>(-1);
+  const tag = useSharedValue<number | ShadowNodeWrapper | null>(-1);
   const ref = useRef<RefObjectFunction<T>>();
+  const isFabric = global._IS_FABRIC;
 
   if (!ref.current) {
     const fun: RefObjectFunction<T> = <RefObjectFunction<T>>((component) => {
       'worklet';
       // enters when ref is set by attaching to a component
       if (component) {
-        tag.value = getTag(component);
+        tag.value = isFabric
+          ? getShadowNodeWrapperFromHostInstance(component)
+          : getTag(component);
         fun.current = component;
       }
       return tag.value;

package/src/reanimated2/hook/useAnimatedScrollHandler.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
 import { NativeScrollEvent } from 'react-native';
-import { NativeEvent, WorkletFunction } from '../commonTypes';
+import { Context, NativeEvent, WorkletFunction } from '../commonTypes';
 import WorkletEventHandler from '../WorkletEventHandler';
-import { Context, DependencyList } from './commonTypes';
+import { DependencyList } from './commonTypes';
 import { useEvent, useHandler } from './Hooks';
 
 export interface ScrollHandler<TContext extends Context>

package/src/reanimated2/hook/useAnimatedSensor.ts

@@ -12,7 +12,7 @@ export enum SensorType {
 }
 
 export type SensorConfig = {
-  interval: number;
+  interval: number | 'auto';
 };
 
 export type AnimatedSensor = {
@@ -26,7 +26,7 @@ export function useAnimatedSensor(
   sensorType: SensorType,
   userConfig?: SensorConfig
 ): AnimatedSensor {
-  const ref = useRef({
+  const ref = useRef<AnimatedSensor>({
     sensor: null,
     unregister: () => {
       // NOOP
@@ -38,7 +38,7 @@ export function useAnimatedSensor(
   });
 
   if (ref.current.sensor === null) {
-    ref.current.config = { interval: 10, ...userConfig };
+    ref.current.config = { interval: 'auto', ...userConfig };
     let sensorData;
     if (sensorType === SensorType.ROTATION) {
       sensorData = {
@@ -61,10 +61,10 @@ export function useAnimatedSensor(
   }
 
   useEffect(() => {
-    ref.current.config = { interval: 10, ...userConfig };
+    ref.current.config = { interval: 'auto', ...userConfig };
     const id = NativeReanimated.registerSensor(
       sensorType,
-      ref.current.config.interval,
+      ref.current.config.interval === 'auto' ? -1 : ref.current.config.interval,
       ref.current.sensor as any
     );
 

package/src/reanimated2/hook/useFrameCallback.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+import FrameCallbackRegistryJS from '../frameCallback/FrameCallbackRegistryJS';
+
+export type FrameCallback = {
+  setActive: (isActive: boolean) => void;
+  isActive: boolean;
+  callbackId: number;
+};
+const frameCallbackRegistry = new FrameCallbackRegistryJS();
+
+export function useFrameCallback(
+  callback: () => void,
+  autostart = true
+): FrameCallback {
+  const ref = useRef<FrameCallback>({
+    setActive: (isActive: boolean) => {
+      frameCallbackRegistry.manageStateFrameCallback(
+        ref.current.callbackId,
+        isActive
+      );
+      ref.current.isActive = isActive;
+    },
+    isActive: autostart,
+    callbackId: -1,
+  });
+
+  useEffect(() => {
+    ref.current.callbackId =
+      frameCallbackRegistry.registerFrameCallback(callback);
+    ref.current.setActive(ref.current.isActive);
+
+    return () => {
+      frameCallbackRegistry.unregisterFrameCallback(ref.current.callbackId);
+      ref.current.callbackId = -1;
+    };
+  }, [callback, autostart]);
+
+  return ref.current;
+}

package/src/reanimated2/hook/utils.ts

@@ -2,6 +2,7 @@ import { MutableRefObject, useEffect, useRef } from 'react';
 import { processColor } from '../Colors';
 import {
   AnimatedStyle,
+  Context,
   NativeEvent,
   NestedObjectValues,
   StyleProps,
@@ -12,11 +13,7 @@ import { makeRemote } from '../core';
 import { isWeb, isJest } from '../PlatformChecker';
 import { colorProps } from '../UpdateProps';
 import WorkletEventHandler from '../WorkletEventHandler';
-import {
-  Context,
-  ContextWithDependencies,
-  DependencyList,
-} from './commonTypes';
+import { ContextWithDependencies, DependencyList } from './commonTypes';
 
 interface Handler<T, TContext extends Context> extends WorkletFunction {
   (event: T, context: TContext): void;

package/src/reanimated2/interpolateColor.ts

@@ -10,11 +10,15 @@ import {
 } from './Colors';
 import { makeMutable } from './core';
 import { interpolate } from './interpolation';
-// @ts-ignore JS file
-import { Extrapolate } from '../reanimated1/derived';
 import { SharedValue } from './commonTypes';
 import { useSharedValue } from './hook/useSharedValue';
 
+export const Extrapolate = {
+  EXTEND: 'extend',
+  CLAMP: 'clamp',
+  IDENTITY: 'identity',
+};
+
 const interpolateColorsHSV = (
   value: number,
   inputRange: readonly number[],

package/src/reanimated2/interpolation.ts

@@ -1,16 +1,9 @@
-// @ts-ignore JS file
-import interpolateNode from '../reanimated1/derived/interpolate';
-
 export enum Extrapolation {
   IDENTITY = 'identity',
   CLAMP = 'clamp',
   EXTEND = 'extend',
 }
 
-export interface InterpolatedNode {
-  __nodeId: number;
-}
-
 interface InterpolationNarrowedInput {
   leftEdgeInput: number;
   rightEdgeInput: number;
@@ -34,11 +27,6 @@ export type ExtrapolationType =
   | string
   | undefined;
 
-function isNode(x: number | InterpolatedNode): x is InterpolatedNode {
-  'worklet';
-  return (x as InterpolatedNode).__nodeId !== undefined;
-}
-
 function getVal(
   type: Extrapolation,
   coef: number,
@@ -156,7 +144,7 @@ function internalInterpolate(
 // TODO: support default values in worklets:
 // e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)
 export function interpolate(
-  x: number | InterpolatedNode,
+  x: number,
   input: readonly number[],
   output: readonly number[],
   type?: ExtrapolationType
@@ -169,19 +157,6 @@ export function interpolate(
   }
 
   const extrapolationConfig = validateType(type);
-
-  if (isNode(x)) {
-    console.warn(
-      `interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead`
-    );
-    return interpolateNode(x, {
-      inputRange: input,
-      outputRange: output,
-      extrapolateLeft: extrapolationConfig.extrapolateLeft,
-      extrapolateRight: extrapolationConfig.extrapolateRight,
-    });
-  }
-
   const length = input.length;
   const narrowedInput: InterpolationNarrowedInput = {
     leftEdgeInput: input[0],

package/src/reanimated2/jestUtils.ts

@@ -167,9 +167,9 @@ const tickTravel = () => {
   jest.advanceTimersByTime(frameTime);
 };
 
-export const withReanimatedTimer = (animatonTest) => {
+export const withReanimatedTimer = (animationTest) => {
   beforeTest();
-  animatonTest();
+  animationTest();
   afterTest();
 };
 
@@ -188,7 +188,15 @@ export const advanceAnimationByFrame = (count) => {
 };
 
 export const setUpTests = (userConfig = {}) => {
-  const expect = require('expect');
+  let expect;
+  try {
+    expect = require('expect');
+  } catch (_) {
+    // for Jest in version 28+
+    const { expect: expectModule } = require('@jest/globals');
+    expect = expectModule;
+  }
+
   require('setimmediate');
   frameTime = Math.round(1000 / config.fps);
 

package/src/reanimated2/js-reanimated/JSReanimated.ts

@@ -2,7 +2,11 @@ import MapperRegistry from './MapperRegistry';
 import Mapper from './Mapper';
 import MutableValue from './MutableValue';
 import { NativeReanimated } from '../NativeReanimated/NativeReanimated';
-import { Timestamp, NestedObjectValues } from '../commonTypes';
+import {
+  Timestamp,
+  NestedObjectValues,
+  AnimatedKeyboardInfo,
+} from '../commonTypes';
 import { isJest } from '../PlatformChecker';
 
 export default class JSReanimated extends NativeReanimated {
@@ -126,4 +130,15 @@ export default class JSReanimated extends NativeReanimated {
       throw Error('This method can be only use in Jest testing.');
     }
   }
+
+  subscribeForKeyboardEvents(_: AnimatedKeyboardInfo): number {
+    console.warn(
+      '[Reanimated] useAnimatedKeyboard is not available on web yet.'
+    );
+    return -1;
+  }
+
+  unsubscribeFromKeyboardEvents(_: number): void {
+    // noop
+  }
 }

package/src/reanimated2/js-reanimated/global.ts

@@ -1,33 +1,50 @@
 // In order to keep bundle size down, we treat this file as a polyfill for Web.
 
 import { shouldBeUseWeb } from '../PlatformChecker';
-
-if (shouldBeUseWeb()) {
-  global._frameTimestamp = null;
-  global._setGlobalConsole = (_val) => {
-    // noop
-  };
-  global._measure = () => {
-    console.warn(
-      "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"
-    );
-    return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      pageX: 0,
-      pageY: 0,
+const initializeGlobalsForWeb = () => {
+  if (shouldBeUseWeb()) {
+    global._frameTimestamp = null;
+    global._setGlobalConsole = (_val) => {
+      // noop
+    };
+    global._measure = () => {
+      console.warn(
+        "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"
+      );
+      return {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        pageX: 0,
+        pageY: 0,
+      };
+    };
+    global._scrollTo = () => {
+      console.warn(
+        "[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version"
+      );
+    };
+    global._dispatchCommand = () => {
+      console.warn(
+        "[Reanimated] You can't use `scrollTo` or `dispatchCommand` methods with Chrome Debugger or with web version"
+      );
     };
-  };
-  global._scrollTo = () => {
-    console.warn(
-      "[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version"
-    );
-  };
-  global._setGestureState = () => {
-    console.warn(
-      "[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version"
-    );
-  };
-}
+    global._setGestureState = () => {
+      console.warn(
+        "[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version"
+      );
+    };
+  }
+  return true;
+};
+
+/*
+  If a file doesn't export anything, tree shaking doesn't pack 
+  it into the JS bundle. In effect, the code inside of this file 
+  will never execute. That is why we wrapped initialization code 
+  into a function, and we call this one during creating 
+  the module export object.
+*/
+
+export default initializeGlobalsForWeb();

package/src/reanimated2/layoutReanimation/LayoutAnimationRepository.ts

@@ -7,7 +7,7 @@ import { processColor } from '../Colors';
 runOnUI(() => {
   'worklet';
 
-  const configs: Record<string, any> = {};
+  const configs: Record<string, any> = Object.create(null);
   const enteringAnimationForTag: Record<string, any> = {};
 
   global.LayoutAnimationRepository = {

package/src/reanimated2/layoutReanimation/animationBuilder/index.ts

@@ -1,7 +1,7 @@
 export { BaseAnimationBuilder } from './BaseAnimationBuilder';
 export { ComplexAnimationBuilder } from './ComplexAnimationBuilder';
 export { Keyframe } from './Keyframe';
-export {
+export type {
   LayoutAnimation,
   AnimationFunction,
   EntryAnimationsValues,

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +0,0 @@
-#Fri Jul 01 09:56:56 UTC 2022
-gradle.version=7.2