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

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 } 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,6 +35,11 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _dispatchCommand: (
+    shadowNodeWrapper: ShadowNodeWrapper,
+    commandName: string,
+    args: Array<unknown>
+  ) => void;
   const _chronoNow: () => number;
   const ReanimatedDataMock: {
     now: () => number;
@@ -36,10 +50,12 @@ declare global {
       _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/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"

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

@@ -1,2 +0,0 @@
-#Thu Apr 21 15:44:53 UTC 2022
-gradle.version=7.2

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

@@ -1,11 +0,0 @@
-package com.swmansion.reanimated;
-
-import com.swmansion.reanimated.nodes.Node;
-import java.util.ArrayList;
-
-public class UpdateContext {
-
-  public long updateLoopID = 0;
-  public String callID = "";
-  public final ArrayList<Node> updatedNodes = new ArrayList<>();
-}

package/android/src/main/java/com/swmansion/reanimated/nodes/AlwaysNode.java

@@ -1,29 +0,0 @@
-package com.swmansion.reanimated.nodes;
-
-import com.facebook.react.bridge.ReadableMap;
-import com.swmansion.reanimated.MapUtils;
-import com.swmansion.reanimated.NodesManager;
-
-public class AlwaysNode extends Node implements FinalNode {
-  public AlwaysNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-    super(nodeID, config, nodesManager);
-    mNodeToBeEvaluated =
-        MapUtils.getInt(
-            config,
-            "what",
-            "Reanimated: Argument passed to always node is either of wrong type or is missing.");
-  }
-
-  private int mNodeToBeEvaluated;
-
-  @Override
-  public void update() {
-    this.value();
-  }
-
-  @Override
-  protected Double evaluate() {
-    mNodesManager.findNodeById(mNodeToBeEvaluated, Node.class).value();
-    return ZERO;
-  }
-}

package/android/src/main/java/com/swmansion/reanimated/nodes/BezierNode.java

@@ -1,87 +0,0 @@
-package com.swmansion.reanimated.nodes;
-
-import android.graphics.PointF;
-import com.facebook.react.bridge.ReadableMap;
-import com.swmansion.reanimated.MapUtils;
-import com.swmansion.reanimated.NodesManager;
-
-public class BezierNode extends Node {
-
-  private static class CubicBezierInterpolator {
-
-    protected PointF start;
-    protected PointF end;
-    protected PointF a = new PointF();
-    protected PointF b = new PointF();
-    protected PointF c = new PointF();
-
-    public CubicBezierInterpolator(PointF start, PointF end) {
-      this.start = start;
-      this.end = end;
-    }
-
-    public CubicBezierInterpolator(float startX, float startY, float endX, float endY) {
-      this(new PointF(startX, startY), new PointF(endX, endY));
-    }
-
-    public float getInterpolation(float time) {
-      return getBezierCoordinateY(getXForTime(time));
-    }
-
-    protected float getBezierCoordinateY(float time) {
-      c.y = 3 * start.y;
-      b.y = 3 * (end.y - start.y) - c.y;
-      a.y = 1 - c.y - b.y;
-      return time * (c.y + time * (b.y + time * a.y));
-    }
-
-    protected float getXForTime(float time) {
-      float x = time;
-      float z;
-      for (int i = 1; i < 14; i++) {
-        z = getBezierCoordinateX(x) - time;
-        if (Math.abs(z) < 1e-3) {
-          break;
-        }
-        x -= z / getXDerivate(x);
-      }
-      return x;
-    }
-
-    private float getXDerivate(float t) {
-      return c.x + t * (2 * b.x + 3 * a.x * t);
-    }
-
-    private float getBezierCoordinateX(float time) {
-      c.x = 3 * start.x;
-      b.x = 3 * (end.x - start.x) - c.x;
-      a.x = 1 - c.x - b.x;
-      return time * (c.x + time * (b.x + time * a.x));
-    }
-  }
-
-  private final int mInputID;
-  private final CubicBezierInterpolator mInterpolator;
-
-  public BezierNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-    super(nodeID, config, nodesManager);
-
-    mInputID =
-        MapUtils.getInt(
-            config,
-            "input",
-            "Reanimated: Argument passed to bezier node is either of wrong type or is missing.");
-
-    float startX = (float) config.getDouble("mX1");
-    float startY = (float) config.getDouble("mY1");
-    float endX = (float) config.getDouble("mX2");
-    float endY = (float) config.getDouble("mY2");
-    mInterpolator = new CubicBezierInterpolator(startX, startY, endX, endY);
-  }
-
-  @Override
-  protected Double evaluate() {
-    Double in = (Double) mNodesManager.getNodeValue(mInputID);
-    return Double.valueOf(mInterpolator.getInterpolation(in.floatValue()));
-  }
-}

package/android/src/main/java/com/swmansion/reanimated/nodes/BlockNode.java

@@ -1,24 +0,0 @@
-package com.swmansion.reanimated.nodes;
-
-import com.facebook.react.bridge.ReadableMap;
-import com.swmansion.reanimated.NodesManager;
-import com.swmansion.reanimated.Utils;
-
-public class BlockNode extends Node {
-
-  private final int[] mBlock;
-
-  public BlockNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-    super(nodeID, config, nodesManager);
-    mBlock = Utils.processIntArray(config.getArray("block"));
-  }
-
-  @Override
-  protected Object evaluate() {
-    Object res = null;
-    for (int i = 0; i < mBlock.length; i++) {
-      res = mNodesManager.findNodeById(mBlock[i], Node.class).value();
-    }
-    return res;
-  }
-}

package/android/src/main/java/com/swmansion/reanimated/nodes/CallFuncNode.java

@@ -1,49 +0,0 @@
-package com.swmansion.reanimated.nodes;
-
-import com.facebook.react.bridge.ReadableMap;
-import com.swmansion.reanimated.NodesManager;
-import com.swmansion.reanimated.Utils;
-
-public class CallFuncNode extends Node {
-
-  private String mPreviousCallID;
-  private final int mWhatNodeID;
-  private final int[] mArgs;
-  private final int[] mParams;
-
-  public CallFuncNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-    super(nodeID, config, nodesManager);
-    mWhatNodeID = config.getInt("what");
-    mParams = Utils.processIntArray(config.getArray("params"));
-    mArgs = Utils.processIntArray(config.getArray("args"));
-  }
-
-  private void beginContext() {
-    mPreviousCallID = mNodesManager.updateContext.callID;
-    mNodesManager.updateContext.callID =
-        mNodesManager.updateContext.callID + '/' + String.valueOf(mNodeID);
-    for (int i = 0; i < mParams.length; i++) {
-      int paramId = mParams[i];
-      ParamNode paramNode = mNodesManager.findNodeById(paramId, ParamNode.class);
-      paramNode.beginContext(mArgs[i], mPreviousCallID);
-    }
-  }
-
-  private void endContext() {
-    for (int i = 0; i < mParams.length; i++) {
-      int paramId = mParams[i];
-      ParamNode paramNode = mNodesManager.findNodeById(paramId, ParamNode.class);
-      paramNode.endContext();
-    }
-    mNodesManager.updateContext.callID = mPreviousCallID;
-  }
-
-  @Override
-  protected Object evaluate() {
-    beginContext();
-    Node whatNode = mNodesManager.findNodeById(mWhatNodeID, Node.class);
-    Object retVal = whatNode.value();
-    endContext();
-    return retVal;
-  }
-}

package/android/src/main/java/com/swmansion/reanimated/nodes/ClockNode.java

@@ -1,38 +0,0 @@
-package com.swmansion.reanimated.nodes;
-
-import com.facebook.react.bridge.ReadableMap;
-import com.swmansion.reanimated.NodesManager;
-
-public class ClockNode extends Node implements NodesManager.OnAnimationFrame {
-
-  public boolean isRunning;
-
-  public ClockNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-    super(nodeID, config, nodesManager);
-  }
-
-  public void start() {
-    if (isRunning) {
-      return;
-    }
-    isRunning = true;
-    mNodesManager.postOnAnimation(this);
-  }
-
-  public void stop() {
-    isRunning = false;
-  }
-
-  @Override
-  protected Double evaluate() {
-    return mNodesManager.currentFrameTimeMs;
-  }
-
-  @Override
-  public void onAnimationFrame(double timestampMs) {
-    if (isRunning) {
-      markUpdated();
-      mNodesManager.postOnAnimation(this);
-    }
-  }
-}

package/android/src/main/java/com/swmansion/reanimated/nodes/ClockOpNode.java

@@ -1,73 +0,0 @@
-package com.swmansion.reanimated.nodes;
-
-import com.facebook.react.bridge.ReadableMap;
-import com.swmansion.reanimated.MapUtils;
-import com.swmansion.reanimated.NodesManager;
-
-public abstract class ClockOpNode extends Node {
-
-  public static class ClockStartNode extends ClockOpNode {
-    public ClockStartNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-      super(nodeID, config, nodesManager);
-    }
-
-    @Override
-    protected Double eval(Node clock) {
-      if (clock instanceof ParamNode) {
-        ((ParamNode) clock).start();
-      } else {
-        ((ClockNode) clock).start();
-      }
-      return ZERO;
-    }
-  }
-
-  public static class ClockStopNode extends ClockOpNode {
-    public ClockStopNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-      super(nodeID, config, nodesManager);
-    }
-
-    @Override
-    protected Double eval(Node clock) {
-      if (clock instanceof ParamNode) {
-        ((ParamNode) clock).stop();
-      } else {
-        ((ClockNode) clock).stop();
-      }
-      return ZERO;
-    }
-  }
-
-  public static class ClockTestNode extends ClockOpNode {
-    public ClockTestNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-      super(nodeID, config, nodesManager);
-    }
-
-    @Override
-    protected Double eval(Node clock) {
-      if (clock instanceof ParamNode) {
-        return ((ParamNode) clock).isRunning() ? 1. : 0.;
-      }
-      return ((ClockNode) clock).isRunning ? 1. : 0.;
-    }
-  }
-
-  private int clockID;
-
-  public ClockOpNode(int nodeID, ReadableMap config, NodesManager nodesManager) {
-    super(nodeID, config, nodesManager);
-    clockID =
-        MapUtils.getInt(
-            config,
-            "clock",
-            "Reanimated: Argument passed to clock node is either of wrong type or is missing.");
-  }
-
-  @Override
-  protected Double evaluate() {
-    Node clock = mNodesManager.findNodeById(clockID, Node.class);
-    return eval(clock);
-  }
-
-  protected abstract Double eval(Node clock);
-}