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

package/src/reanimated2/Easing.ts

@@ -1,11 +1,3 @@
-// spread and rest parameters can't be used in worklets right now
-/* eslint-disable prefer-rest-params */
-/* eslint-disable prefer-spread */
-
-/* global _WORKLET */
-
-// @ts-ignore reanimated1/Easing is JS file
-import EasingNode from '../reanimated1/Easing';
 import { Bezier } from './Bezier';
 
 /**
@@ -109,7 +101,10 @@ function cubic(t: number): number {
  */
 function poly(n: number): EasingFn {
   'worklet';
-  return (t) => Math.pow(t, n);
+  return (t) => {
+    'worklet';
+    return Math.pow(t, n);
+  };
 }
 
 /**
@@ -171,7 +166,10 @@ function elastic(bounciness = 1): EasingFn {
  */
 function back(s = 1.70158): (t: number) => number {
   'worklet';
-  return (t) => t * t * ((s + 1) * t - s);
+  return (t) => {
+    'worklet';
+    return t * t * ((s + 1) * t - s);
+  };
 }
 
 /**
@@ -285,49 +283,4 @@ const EasingObject = {
   inOut,
 };
 
-// TODO type worklets
-function createChecker(
-  worklet: any,
-  workletName: string,
-  prevArgs?: unknown
-): any {
-  /* should return Animated.Value or worklet */
-  function checkIfReaOne(): any {
-    'worklet';
-    if (arguments && !_WORKLET) {
-      for (let i = 0; i < arguments.length; i++) {
-        const arg = arguments[i];
-        if (arg && arg.__nodeID) {
-          console.warn(
-            `Easing was renamed to EasingNode in Reanimated 2. Please use EasingNode instead`
-          );
-          if (prevArgs) {
-            return EasingNode[workletName]
-              .apply(undefined, prevArgs)
-              .apply(undefined, arguments);
-          }
-          return EasingNode[workletName].apply(undefined, arguments);
-        }
-      }
-    }
-    // @ts-ignore this is implicitly any - TODO
-    const res = worklet.apply(this, arguments);
-    if (!_WORKLET && res && typeof res === 'function' && res.__worklet) {
-      return createChecker(res, workletName, arguments);
-    }
-    return res;
-  }
-  // use original worklet on UI side
-  checkIfReaOne._closure = worklet._closure;
-  checkIfReaOne.asString = worklet.asString;
-  checkIfReaOne.__workletHash = worklet.__workletHash;
-  checkIfReaOne.__location = worklet.__location;
-  return checkIfReaOne;
-}
-
-type EasingObjT = Array<keyof typeof EasingObject>;
-(Object.keys(EasingObject) as EasingObjT).forEach((key) => {
-  EasingObject[key] = createChecker(EasingObject[key], key);
-});
-
 export const Easing = EasingObject;

package/src/reanimated2/NativeMethods.ts

@@ -1,4 +1,4 @@
-/* global _WORKLET _measure _scrollTo _setGestureState */
+/* global _WORKLET _measure _scrollTo _dispatchCommand _setGestureState */
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { Component } from 'react';
@@ -48,18 +48,50 @@ export function measure(
   return result;
 }
 
-export function scrollTo(
+export function dispatchCommand(
   animatedRef: RefObjectFunction<Component>,
-  x: number,
-  y: number,
-  animated: boolean
+  commandName: string,
+  args: Array<unknown>
 ): void {
   'worklet';
   if (!_WORKLET || isNativeIndefined) {
     return;
   }
-  const viewTag = animatedRef();
-  _scrollTo(viewTag, x, y, animated);
+  const shadowNodeWrapper = animatedRef();
+  _dispatchCommand(shadowNodeWrapper, commandName, args);
+}
+
+export let scrollTo: (
+  animatedRef: RefObjectFunction<Component>,
+  x: number,
+  y: number,
+  animated: boolean
+) => void;
+
+if (global._IS_FABRIC) {
+  scrollTo = (
+    animatedRef: RefObjectFunction<Component>,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => {
+    'worklet';
+    dispatchCommand(animatedRef, 'scrollTo', [x, y, animated]);
+  };
+} else {
+  scrollTo = (
+    animatedRef: RefObjectFunction<Component>,
+    x: number,
+    y: number,
+    animated: boolean
+  ) => {
+    'worklet';
+    if (!_WORKLET || isNativeIndefined) {
+      return;
+    }
+    const viewTag = animatedRef();
+    _scrollTo(viewTag, x, y, animated);
+  };
 }
 
 export function setGestureState(handlerTag: number, newState: number): void {

package/src/reanimated2/UpdateProps.ts

@@ -1,4 +1,4 @@
-/* global _updateProps */
+/* global _updatePropsPaper _updatePropsFabric */
 import { MutableRefObject } from 'react';
 import { processColor } from './Colors';
 import { AnimatedStyle, SharedValue, StyleProps } from './commonTypes';
@@ -43,27 +43,46 @@ if (shouldBeUseWeb()) {
     }
   };
 } else {
-  updatePropsByPlatform = (
-    viewDescriptors: SharedValue<Descriptor[]>,
-    updates: StyleProps | AnimatedStyle,
-    _: ViewRefSet<any> | undefined
-  ): void => {
-    'worklet';
+  if (global._IS_FABRIC) {
+    updatePropsByPlatform = (
+      viewDescriptors: SharedValue<Descriptor[]>,
+      updates: StyleProps | AnimatedStyle,
+      _: ViewRefSet<any> | undefined
+    ): void => {
+      'worklet';
 
-    for (const key in updates) {
-      if (ColorProperties.indexOf(key) !== -1) {
-        updates[key] = processColor(updates[key]);
+      for (const key in updates) {
+        if (ColorProperties.indexOf(key) !== -1) {
+          updates[key] = processColor(updates[key]);
+        }
       }
-    }
 
-    viewDescriptors.value.forEach((viewDescriptor) => {
-      _updateProps(
-        viewDescriptor.tag,
-        viewDescriptor.name || 'RCTView',
-        updates
-      );
-    });
-  };
+      viewDescriptors.value.forEach((viewDescriptor) => {
+        _updatePropsFabric(viewDescriptor.shadowNodeWrapper, updates);
+      });
+    };
+  } else {
+    updatePropsByPlatform = (
+      viewDescriptors: SharedValue<Descriptor[]>,
+      updates: StyleProps | AnimatedStyle,
+      _: ViewRefSet<any> | undefined
+    ): void => {
+      'worklet';
+
+      for (const key in updates) {
+        if (ColorProperties.indexOf(key) !== -1) {
+          updates[key] = processColor(updates[key]);
+        }
+      }
+      viewDescriptors.value.forEach((viewDescriptor) => {
+        _updatePropsPaper(
+          viewDescriptor.tag,
+          viewDescriptor.name || 'RCTView',
+          updates
+        );
+      });
+    };
+  }
 }
 
 export const updateProps: (

package/src/reanimated2/commonTypes.ts

@@ -15,7 +15,6 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Context } from './hook/commonTypes';
 
 export type TransformProperty =
   | PerpectiveTransform
@@ -47,11 +46,12 @@ export interface SharedValue<T> {
   value: T;
 }
 
+export type Context = Record<string, unknown>;
+
 export interface WorkletFunction {
   _closure?: Context;
   __workletHash?: number;
   __optimalization?: number;
-  __worklet?: boolean;
 }
 
 export interface BasicWorkletFunction<T> extends WorkletFunction {
@@ -146,3 +146,5 @@ export type ValueRotation = {
 };
 
 export type SensorValueRotation = SharedValue<ValueRotation>;
+
+export type ShadowNodeWrapper = object;

package/src/reanimated2/component/FlatList.tsx

@@ -6,15 +6,18 @@ import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/c
 
 const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
 
+interface AnimatedFlatListProps {
+  onLayout: (event: LayoutChangeEvent) => void;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children: React.ReactNode;
+}
+
 const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
-  const cellRenderer: React.FC<{
-    onLayout: (event: LayoutChangeEvent) => void;
-  }> = (props) => {
+  const cellRenderer = (props: AnimatedFlatListProps) => {
     return (
       <WrappedComponents.View
         layout={itemLayoutAnimation}
-        onLayout={props.onLayout}
-      >
+        onLayout={props.onLayout}>
         {props.children}
       </WrappedComponents.View>
     );

package/src/reanimated2/core.ts

@@ -1,10 +1,9 @@
-/* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
+/* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp _setGlobalConsole */
 import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
 import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
 import {
   BasicWorkletFunction,
-  WorkletFunction,
   ComplexWorkletFunction,
   SharedValue,
   AnimationObject,
@@ -14,10 +13,6 @@ import {
 import { Descriptor } from './hook/commonTypes';
 import JSReanimated from './js-reanimated/JSReanimated';
 
-global.__reanimatedWorkletInit = function (worklet: WorkletFunction) {
-  worklet.__worklet = true;
-};
-
 if (global._setGlobalConsole === undefined) {
   // it can happen when Reanimated plugin wasn't added, but the user uses the only API from version 1
   global._setGlobalConsole = () => {
@@ -74,48 +69,6 @@ export const isConfiguredCheck: () => void = () => {
   }
 };
 
-function _toArrayReanimated<T>(object: Iterable<T> | ArrayLike<T> | T[]): T[] {
-  'worklet';
-  if (Array.isArray(object)) {
-    return object;
-  }
-  if (
-    typeof Symbol !== 'undefined' &&
-    (typeof Symbol === 'function' ? Symbol.iterator : '@@iterator') in
-      Object(object)
-  ) {
-    return Array.from(object);
-  }
-  throw new Error(
-    'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
-  );
-}
-
-function _mergeObjectsReanimated(): unknown {
-  'worklet';
-  // we can't use rest parameters in worklets at the moment
-  // eslint-disable-next-line prefer-rest-params
-  const arr = Array.from(arguments);
-  return Object.assign.apply(null, [arr[0], ...arr.slice(1)]);
-}
-
-global.__reanimatedWorkletInit = function (worklet: WorkletFunction) {
-  worklet.__worklet = true;
-
-  if (worklet._closure) {
-    const closure = worklet._closure;
-    Object.keys(closure).forEach((key) => {
-      if (key === '_toConsumableArray') {
-        closure[key] = _toArrayReanimated;
-      }
-
-      if (key === '_objectSpread') {
-        closure[key] = _mergeObjectsReanimated;
-      }
-    });
-  }
-};
-
 function pushFrame(frame: (timestamp: Timestamp) => void): void {
   (NativeReanimatedModule as JSReanimated).pushFrame(frame);
 }
@@ -146,6 +99,12 @@ export function makeShareable<T>(value: T): T {
 }
 
 export function getViewProp<T>(viewTag: string, propName: string): Promise<T> {
+  if (global._IS_FABRIC) {
+    throw new Error(
+      '[react-native-reanimated] `getViewProp` is not supported on Fabric yet'
+    );
+  }
+
   return new Promise((resolve, reject) => {
     return NativeReanimatedModule.getViewProp(
       viewTag,

package/src/reanimated2/fabricUtils.ts

@@ -0,0 +1,27 @@
+/* eslint-disable camelcase */
+
+import { ShadowNodeWrapper } from './commonTypes';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let findHostInstance_DEPRECATED = (_ref: React.Component) => null;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  findHostInstance_DEPRECATED =
+    require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+} catch (e) {
+  // do nothing
+}
+
+export function getShadowNodeWrapperFromHostInstance(
+  hostInstance: unknown
+): ShadowNodeWrapper {
+  // @ts-ignore Fabric
+  return hostInstance._internalInstanceHandle.stateNode.node;
+}
+
+export function getShadowNodeWrapperFromRef(
+  ref: React.Component
+): ShadowNodeWrapper {
+  return getShadowNodeWrapperFromHostInstance(findHostInstance_DEPRECATED(ref));
+}

package/src/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/src/reanimated2/hook/commonTypes.ts

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

package/src/reanimated2/hook/index.ts

@@ -1,4 +1,4 @@
-export { DependencyList, Context } from './commonTypes';
+export { DependencyList } from './commonTypes';
 export {
   useAnimatedProps,
   useEvent,

package/src/reanimated2/hook/useAnimatedGestureHandler.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';
 import { useEvent, useHandler } from './Hooks';
 
 interface Handler<T, TContext extends Context> extends WorkletFunction {

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

@@ -19,9 +19,7 @@ export type AnimatedSensor = {
   sensor: SensorValue3D | SensorValueRotation | null;
   unregister: () => void;
   isAvailable: boolean;
-  config: {
-    interval: number;
-  };
+  config: SensorConfig;
 };
 
 export function useAnimatedSensor(

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;
@@ -44,12 +41,6 @@ export function useEvent<T extends NativeEvent<T>>(
     initRef.current.updateWorklet(handler);
   }
 
-  useEffect(() => {
-    return () => {
-      initRef.current = null;
-    };
-  }, []);
-
   return initRef;
 }
 

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

@@ -36,6 +36,11 @@ if (shouldBeUseWeb()) {
       "[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"