react-native-reanimated 2.6.0 → 3.0.0-rc.0

package/lib/reanimated2/globals.d.ts

@@ -1,9 +1,11 @@
-import { AnimatedStyle, StyleProps, WorkletFunction } from './commonTypes';
+import { AnimatedStyle, StyleProps } from './commonTypes';
 import { ReanimatedConsole } from './core';
+import { ShadowNodeWrapper } from './hook/commonTypes';
 import { MeasuredDimensions } from './NativeMethods';
 import { NativeReanimated } from './NativeReanimated/NativeReanimated';
 declare global {
   const _WORKLET: boolean;
+  const _IS_FABRIC: boolean;
   const _frameTimestamp: number;
   const _eventTimestamp: number;
   const _setGlobalConsole: (console?: ReanimatedConsole) => void;
@@ -14,11 +16,18 @@ declare global {
     flag: { value: boolean; _value: boolean }
   ) => void;
   const _setGestureState: (handlerTag: number, newState: number) => void;
-  const _updateProps: (
+  const _updatePropsPaper: (
     tag: number,
     name: string,
     updates: StyleProps | AnimatedStyle
   ) => void;
+  const _updatePropsFabric: (
+    shadowNodeWrapper: ShadowNodeWrapper,
+    props: StyleProps | AnimatedStyle
+  ) => void;
+  const _removeShadowNodeFromRegistry: (
+    shadowNodeWrapper: ShadowNodeWrapper
+  ) => void;
   const _measure: (viewTag: number) => MeasuredDimensions;
   const _scrollTo: (
     viewTag: number,
@@ -26,21 +35,27 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _dispatchCommand: (
+    shadowNodeWrapper: ShadowNodeWrapper,
+    commandName: string,
+    args: Array<unknown>
+  ) => void;
   const _chronoNow: () => number;
   const ReanimatedDataMock: {
     now: () => number;
   };
   namespace NodeJS {
     interface Global {
-      __reanimatedWorkletInit: (worklet: WorkletFunction) => void;
       _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;
       _chronoNow: () => number;
       performance: { now: () => number };
       LayoutAnimationRepository: {

package/lib/reanimated2/hook/useAnimatedRef.js

@@ -1,15 +1,19 @@
 import { useRef } from 'react';
-import { getTag } from '../NativeMethods';
 import { useSharedValue } from './useSharedValue';
+import { getTag } from '../NativeMethods';
+import { getShadowNodeWrapperFromHostInstance } from '../fabricUtils';
 export function useAnimatedRef() {
     const tag = useSharedValue(-1);
     const ref = useRef();
+    const isFabric = global._IS_FABRIC;
     if (!ref.current) {
         const fun = ((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/lib/reanimated2/hook/utils.js

@@ -12,11 +12,6 @@ export function useEvent(handler, eventNames = [], rebuild = false) {
     else if (rebuild) {
         initRef.current.updateWorklet(handler);
     }
-    useEffect(() => {
-        return () => {
-            initRef.current = null;
-        };
-    }, []);
     return initRef;
 }
 export function useHandler(handlers, dependencies) {

package/lib/reanimated2/interpolateColor.js

@@ -1,9 +1,12 @@
 import { hsvToColor, RGBtoHSV, rgbaColor, processColor, red, green, blue, opacity, } from './Colors';
 import { makeMutable } from './core';
 import { interpolate } from './interpolation';
-// @ts-ignore JS file
-import { Extrapolate } from '../reanimated1/derived';
 import { useSharedValue } from './hook/useSharedValue';
+export const Extrapolate = {
+    EXTEND: 'extend',
+    CLAMP: 'clamp',
+    IDENTITY: 'identity',
+};
 const interpolateColorsHSV = (value, inputRange, colors) => {
     'worklet';
     const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP);

package/lib/reanimated2/interpolation.js

@@ -1,15 +1,9 @@
-// @ts-ignore JS file
-import interpolateNode from '../reanimated1/derived/interpolate';
 export var Extrapolation;
 (function (Extrapolation) {
     Extrapolation["IDENTITY"] = "identity";
     Extrapolation["CLAMP"] = "clamp";
     Extrapolation["EXTEND"] = "extend";
 })(Extrapolation || (Extrapolation = {}));
-function isNode(x) {
-    'worklet';
-    return x.__nodeId !== undefined;
-}
 function getVal(type, coef, val, leftEdgeOutput, rightEdgeOutput, x) {
     'worklet';
     switch (type) {
@@ -88,15 +82,6 @@ export function interpolate(x, input, output, type) {
         throw Error('Interpolation input and output should contain at least two values.');
     }
     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 = {
         leftEdgeInput: input[0],

package/lib/reanimated2/js-reanimated/index.js

@@ -20,6 +20,9 @@ if (shouldBeUseWeb()) {
     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._setGestureState = () => {
         console.warn("[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version");
     };

package/lib/types/{lib/reanimated2 → reanimated2}/NativeMethods.d.ts

@@ -10,5 +10,6 @@ export interface MeasuredDimensions {
     pageY: number;
 }
 export declare function measure(animatedRef: RefObjectFunction<Component>): MeasuredDimensions;
-export declare function scrollTo(animatedRef: RefObjectFunction<Component>, x: number, y: number, animated: boolean): void;
+export declare function dispatchCommand(animatedRef: RefObjectFunction<Component>, commandName: string, args: Array<unknown>): void;
+export declare let scrollTo: (animatedRef: RefObjectFunction<Component>, x: number, y: number, animated: boolean) => void;
 export declare function setGestureState(handlerTag: number, newState: number): void;

package/lib/types/{lib/reanimated2 → reanimated2}/commonTypes.d.ts

@@ -1,5 +1,4 @@
 import { PerpectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, TranslateXTransform, TranslateYTransform, SkewXTransform, SkewYTransform, MatrixTransform, ViewStyle, TextStyle } from 'react-native';
-import { Context } from './hook/commonTypes';
 export declare type TransformProperty = PerpectiveTransform | RotateTransform | RotateXTransform | RotateYTransform | RotateZTransform | ScaleTransform | ScaleXTransform | ScaleYTransform | TranslateXTransform | TranslateYTransform | SkewXTransform | SkewYTransform | MatrixTransform;
 export interface StyleProps extends ViewStyle, TextStyle {
     originX?: number;
@@ -13,11 +12,11 @@ export interface AnimatedStyle extends Record<string, Animation<AnimationObject>
 export interface SharedValue<T> {
     value: T;
 }
+export declare type Context = Record<string, unknown>;
 export interface WorkletFunction {
     _closure?: Context;
     __workletHash?: number;
     __optimalization?: number;
-    __worklet?: boolean;
 }
 export interface BasicWorkletFunction<T> extends WorkletFunction {
     (): T;
@@ -78,3 +77,4 @@ export declare type ValueRotation = {
     roll: number;
 };
 export declare type SensorValueRotation = SharedValue<ValueRotation>;
+export declare type ShadowNodeWrapper = object;

package/lib/types/reanimated2/fabricUtils.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ShadowNodeWrapper } from './commonTypes';
+export declare function getShadowNodeWrapperFromHostInstance(hostInstance: unknown): ShadowNodeWrapper;
+export declare function getShadowNodeWrapperFromRef(ref: React.Component): ShadowNodeWrapper;

package/lib/types/{lib/reanimated2 → reanimated2}/hook/commonTypes.d.ts

@@ -1,5 +1,5 @@
+import { Context, ShadowNodeWrapper } from '../commonTypes';
 export declare type DependencyList = Array<unknown> | undefined;
-export declare type Context = Record<string, unknown>;
 export interface ContextWithDependencies<TContext extends Context> {
     context: TContext;
     savedDependencies: DependencyList;
@@ -7,6 +7,7 @@ export interface ContextWithDependencies<TContext extends Context> {
 export interface Descriptor {
     tag: number;
     name: string;
+    shadowNodeWrapper: ShadowNodeWrapper;
 }
 export interface RefObjectFunction<T> {
     current: T | null;

package/lib/types/{lib/reanimated2 → reanimated2}/hook/index.d.ts

@@ -1,4 +1,4 @@
-export { DependencyList, Context } from './commonTypes';
+export { DependencyList } from './commonTypes';
 export { useAnimatedProps, useEvent, useHandler, useWorkletCallback, } from './Hooks';
 export { useSharedValue } from './useSharedValue';
 export { useAnimatedStyle, AnimatedStyleResult } from './useAnimatedStyle';

package/lib/types/{lib/reanimated2 → reanimated2}/hook/useAnimatedGestureHandler.d.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
-import { WorkletFunction } from '../commonTypes';
+import { Context, WorkletFunction } from '../commonTypes';
 import WorkletEventHandler from '../WorkletEventHandler';
-import { Context, DependencyList } from './commonTypes';
+import { DependencyList } from './commonTypes';
 interface Handler<T, TContext extends Context> extends WorkletFunction {
     (event: T, context: TContext, isCanceledOrFailed?: boolean): void;
 }

package/lib/types/{lib/reanimated2 → reanimated2}/hook/useAnimatedScrollHandler.d.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';
 export interface ScrollHandler<TContext extends Context> extends WorkletFunction {
     (event: NativeScrollEvent, context?: TContext): void;
 }

package/lib/types/{lib/reanimated2 → reanimated2}/hook/useAnimatedSensor.d.ts

@@ -13,8 +13,6 @@ export declare type AnimatedSensor = {
     sensor: SensorValue3D | SensorValueRotation | null;
     unregister: () => void;
     isAvailable: boolean;
-    config: {
-        interval: number;
-    };
+    config: SensorConfig;
 };
 export declare function useAnimatedSensor(sensorType: SensorType, userConfig?: SensorConfig): AnimatedSensor;

package/lib/types/{lib/reanimated2 → reanimated2}/hook/utils.d.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
-import { AnimatedStyle, NativeEvent, NestedObjectValues, StyleProps, WorkletFunction, AnimationObject } from '../commonTypes';
+import { AnimatedStyle, Context, NativeEvent, NestedObjectValues, StyleProps, WorkletFunction, AnimationObject } from '../commonTypes';
 import WorkletEventHandler from '../WorkletEventHandler';
-import { Context, DependencyList } from './commonTypes';
+import { DependencyList } from './commonTypes';
 interface Handler<T, TContext extends Context> extends WorkletFunction {
     (event: T, context: TContext): void;
 }

package/lib/types/{lib/reanimated2 → reanimated2}/interpolateColor.d.ts

@@ -1,4 +1,9 @@
 import { SharedValue } from './commonTypes';
+export declare const Extrapolate: {
+    EXTEND: string;
+    CLAMP: string;
+    IDENTITY: string;
+};
 interface InterpolateRGB {
     r: number[];
     g: number[];

package/lib/types/{lib/reanimated2 → reanimated2}/interpolation.d.ts

@@ -3,12 +3,9 @@ export declare enum Extrapolation {
     CLAMP = "clamp",
     EXTEND = "extend"
 }
-export interface InterpolatedNode {
-    __nodeId: number;
-}
 export interface ExtrapolationConfig {
     extrapolateLeft?: Extrapolation | string;
     extrapolateRight?: Extrapolation | string;
 }
 export declare type ExtrapolationType = ExtrapolationConfig | Extrapolation | string | undefined;
-export declare function interpolate(x: number | InterpolatedNode, input: readonly number[], output: readonly number[], type?: ExtrapolationType): number;
+export declare function interpolate(x: number, input: readonly number[], output: readonly number[], type?: ExtrapolationType): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "2.6.0",
+  "version": "3.0.0-rc.0",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -75,35 +75,35 @@
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
     "@babel/plugin-transform-object-assign": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@types/invariant": "^2.2.35",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
-    "react-native-screens": "^3.11.1",
     "setimmediate": "^1.0.5",
     "string-hash-64": "^1.0.3"
   },
   "peerDependencies": {
-    "@babel/preset-typescript": "*",
+    "@babel/core": "^7.0.0-0",
     "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": "*"
+    "react-native": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.2",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
-    "@babel/preset-typescript": "^7.16.7",
     "@react-native-community/bob": "^0.17.1",
     "@react-native-community/eslint-config": "^0.0.5",
     "@testing-library/jest-native": "^4.0.4",
-    "@testing-library/react-hooks": "^5.0.3",
+    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^7.1.0",
     "@types/babel-types": "^7.0.11",
     "@types/babel__core": "^7.1.18",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.14.2",
     "@types/jest": "^27.4.0",
-    "@types/react-native": "^0.66.15",
+    "@types/react-native": "^0.66.0",
     "@typescript-eslint/eslint-plugin": "^5.11.0",
     "@typescript-eslint/parser": "^5.11.0",
     "babel-eslint": "^10.1.0",
@@ -126,7 +126,7 @@
     "react": "17.0.2",
     "react-native": "0.68.0",
     "react-native-codegen": "^0.0.7",
-    "react-native-gesture-handler": "^1.6.1",
+    "react-native-gesture-handler": "^2.4.2",
     "react-test-renderer": "17.0.2",
     "release-it": "^13.7.2",
     "typescript": "^4.1.3"