react-native-reanimated 3.0.2 → 3.1.0

package/react-native-reanimated.d.ts

@@ -847,6 +847,7 @@ declare module 'react-native-reanimated' {
       x2: number,
       y2: number
     ): Animated.EasingFunction;
+    steps(n?: number, roundToNextStep?: boolean): Animated.EasingFunction;
     in(easing: Animated.EasingFunction): Animated.EasingFunction;
     out(easing: Animated.EasingFunction): Animated.EasingFunction;
     inOut(easing: Animated.EasingFunction): Animated.EasingFunction;

package/scripts/reanimated_utils.rb

@@ -85,7 +85,7 @@ def assert_latest_react_native_with_new_architecture(config, reanimated_package_
   reanimated_major_version = reanimated_version.split('.')[0].to_i
   react_native_minor_version = config[:react_native_minor_version]
   fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
-  if fabric_enabled && reanimated_major_version == 3 && react_native_minor_version < 71
-    raise "[react-native-reanimated] Reanimated " + reanimated_version + " supports the New Architecture only on the latest minor release of React Native. Please upgrade to React Native 0.71.0+ or downgrade to an older version of Reanimated v3"
+  if fabric_enabled && reanimated_major_version == 3 && react_native_minor_version < 72
+    raise "[react-native-reanimated] Reanimated " + reanimated_version + " supports the New Architecture only on the latest minor release of React Native. Please upgrade to React Native 0.72.0+ or downgrade to an older version of Reanimated v3"
   end
 end

package/src/createAnimatedComponent.tsx

@@ -246,8 +246,7 @@ export default function createAnimatedComponent(
   invariant(
     typeof Component !== 'function' ||
       (Component.prototype && Component.prototype.isReactComponent),
-    '`createAnimatedComponent` does not support stateless functional components; ' +
-      'use a class component instead.'
+    `Looks like you're passing a function component \`${Component.name}\` to \`createAnimatedComponent\` function which supports only class components. Please wrap your function component with \`React.forwardRef()\` or use a class component instead.`
   );
 
   class AnimatedComponent extends React.Component<
@@ -337,7 +336,7 @@ export default function createAnimatedComponent(
           const viewTag = this._viewTag;
           runOnUI(() => {
             'worklet';
-            _removeShadowNodeFromRegistry(viewTag);
+            _removeShadowNodeFromRegistry!(viewTag);
           })();
         }
       }

package/src/reanimated2/Easing.ts

@@ -264,6 +264,24 @@ function inOut(easing: EasingFn): EasingFn {
   };
 }
 
+/**
+ * The `steps` easing function jumps between discrete values at regular intervals,
+ * creating a stepped animation effect. The `n` parameter determines the number of
+ * steps in the animation, and the `roundToNextStep` parameter determines whether the animation
+ * should start at the beginning or end of each step.
+ */
+function steps(n = 10, roundToNextStep = true): EasingFn {
+  'worklet';
+  return (t) => {
+    'worklet';
+    const value = Math.min(Math.max(t, 0), 1) * n;
+    if (roundToNextStep) {
+      return Math.ceil(value) / n;
+    }
+    return Math.floor(value) / n;
+  };
+}
+
 const EasingObject = {
   linear,
   ease,
@@ -278,6 +296,7 @@ const EasingObject = {
   bounce,
   bezier,
   bezierFn,
+  steps,
   in: in_,
   out,
   inOut,

package/src/reanimated2/NativeMethods.ts

@@ -1,7 +1,7 @@
 /* global _WORKLET _measure _scrollTo _dispatchCommand _setGestureState */
 import { Component } from 'react';
 import { findNodeHandle } from 'react-native';
-import { MeasuredDimensions } from './commonTypes';
+import { MeasuredDimensions, ShadowNodeWrapper } from './commonTypes';
 import { RefObjectFunction } from './hook/commonTypes';
 import { isChromeDebugger, isWeb, shouldBeUseWeb } from './PlatformChecker';
 
@@ -89,8 +89,11 @@ export function dispatchCommand(
   if (!_WORKLET || !isNative) {
     return;
   }
-  const shadowNodeWrapper = animatedRef();
-  _dispatchCommand(shadowNodeWrapper, commandName, args);
+
+  // dispatchCommand works only on Fabric where animatedRef returns
+  // an object (ShadowNodeWrapper) and not a number
+  const shadowNodeWrapper = animatedRef() as ShadowNodeWrapper;
+  _dispatchCommand!(shadowNodeWrapper, commandName, args);
 }
 
 export let scrollTo: (
@@ -133,7 +136,9 @@ if (isWeb()) {
     if (!_WORKLET) {
       return;
     }
-    const viewTag = animatedRef();
+
+    // Calling animatedRef on Paper returns a number (nativeTag)
+    const viewTag = animatedRef() as number;
     _scrollTo(viewTag, x, y, animated);
   };
 } else {

package/src/reanimated2/NativeReanimated/NativeReanimated.ts

@@ -9,7 +9,7 @@ import {
   LayoutAnimationFunction,
   LayoutAnimationType,
 } from '../layoutReanimation';
-import { checkVersion } from '../platform-specific/checkVersion';
+import { checkCppVersion } from '../platform-specific/checkCppVersion';
 
 export class NativeReanimated {
   native: boolean;
@@ -32,7 +32,7 @@ export class NativeReanimated {
         );
         return;
       }
-      checkVersion();
+      checkCppVersion();
     }
   }
 

package/src/reanimated2/UpdateProps.ts

@@ -58,7 +58,7 @@ if (shouldBeUseWeb()) {
       }
 
       viewDescriptors.value.forEach((viewDescriptor) => {
-        _updatePropsFabric(viewDescriptor.shadowNodeWrapper, updates);
+        _updatePropsFabric!(viewDescriptor.shadowNodeWrapper, updates);
       });
     };
   } else {
@@ -75,7 +75,7 @@ if (shouldBeUseWeb()) {
         }
       }
       viewDescriptors.value.forEach((viewDescriptor) => {
-        _updatePropsPaper(
+        _updatePropsPaper!(
           viewDescriptor.tag,
           viewDescriptor.name || 'RCTView',
           updates

package/src/reanimated2/animation/decay.ts

@@ -48,7 +48,7 @@ export function withDecay(
     'worklet';
     const config: DefaultDecayConfig = {
       deceleration: 0.998,
-      velocityFactor: Platform.OS !== 'web' ? 1 : 1000,
+      velocityFactor: 1,
       velocity: 0,
       rubberBandFactor: 0.6,
     };
@@ -62,6 +62,12 @@ export function withDecay(
     const VELOCITY_EPS = Platform.OS !== 'web' ? 1 : 1 / 20;
     const SLOPE_FACTOR = 0.1;
 
+    // @piaskowyk: Velocity is expressed in pixels per second
+    // but pixels on Web are handled differently than on native
+    if (Platform.OS === 'web') {
+      config.velocity *= 1000;
+    }
+
     let decay: (animation: InnerDecayAnimation, now: number) => boolean;
 
     if (config.rubberBandEffect) {

package/src/reanimated2/animation/styleAnimation.ts

@@ -24,7 +24,11 @@ export function resolvePath<T>(
   return keys.reduce<NestedObjectValues<T> | undefined>((acc, current) => {
     if (Array.isArray(acc) && typeof current === 'number') {
       return acc[current];
-    } else if (typeof acc === 'object' && (current as number | string) in acc) {
+    } else if (
+      acc !== null &&
+      typeof acc === 'object' &&
+      (current as number | string) in acc
+    ) {
       return (acc as { [key: string]: NestedObjectValues<T> })[
         current as number | string
       ];

package/src/reanimated2/core.ts

@@ -117,7 +117,7 @@ export function registerEventHandler<T>(
   eventHash: string,
   eventHandler: (event: T) => void
 ): string {
-  function handleAndFlushImmediates(eventTimestamp: number, event: T) {
+  function handleAndFlushAnimationFrame(eventTimestamp: number, event: T) {
     'worklet';
     global.__frameTimestamp = eventTimestamp;
     eventHandler(event);
@@ -126,7 +126,7 @@ export function registerEventHandler<T>(
   }
   return NativeReanimatedModule.registerEventHandler(
     eventHash,
-    makeShareableCloneRecursive(handleAndFlushImmediates)
+    makeShareableCloneRecursive(handleAndFlushAnimationFrame)
   );
 }
 
@@ -140,7 +140,7 @@ export function subscribeForKeyboardEvents(
 ): number {
   // TODO: this should really go with the same code path as other events, that is
   // via registerEventHandler. For now we are copying the code from there.
-  function handleAndFlushImmediates(state: number, height: number) {
+  function handleAndFlushAnimationFrame(state: number, height: number) {
     'worklet';
     const now = performance.now();
     global.__frameTimestamp = now;
@@ -149,7 +149,7 @@ export function subscribeForKeyboardEvents(
     global.__frameTimestamp = undefined;
   }
   return NativeReanimatedModule.subscribeForKeyboardEvents(
-    makeShareableCloneRecursive(handleAndFlushImmediates),
+    makeShareableCloneRecursive(handleAndFlushAnimationFrame),
     options.isStatusBarTranslucentAndroid ?? false
   );
 }

package/src/reanimated2/errors.ts

@@ -53,5 +53,6 @@ export function reportFatalErrorOnJS({
   error.name = 'ReanimatedError';
   // @ts-ignore React Native's ErrorUtils implementation extends the Error type with jsEngine field
   error.jsEngine = 'reanimated';
+  // @ts-ignore the reportFatalError method is an internal method of ErrorUtils not exposed in the type definitions
   global.ErrorUtils.reportFatalError(error);
 }

package/src/reanimated2/frameCallback/FrameCallbackRegistryUI.ts

@@ -15,7 +15,8 @@ export interface FrameCallbackRegistryUI {
   frameCallbackRegistry: Map<number, CallbackDetails>;
   activeFrameCallbacks: Set<number>;
   previousFrameTimestamp: number | null;
-  runCallbacks: () => void;
+  runCallbacks: (callId: number) => void;
+  nextCallId: number;
   registerFrameCallback: (
     callback: (frameInfo: FrameInfo) => void,
     callbackId: number
@@ -31,9 +32,13 @@ export const prepareUIRegistry = runOnUIImmediately(() => {
     frameCallbackRegistry: new Map<number, CallbackDetails>(),
     activeFrameCallbacks: new Set<number>(),
     previousFrameTimestamp: null,
+    nextCallId: 0,
 
-    runCallbacks() {
+    runCallbacks(callId) {
       const loop = (timestamp: number) => {
+        if (callId !== this.nextCallId) {
+          return;
+        }
         if (this.previousFrameTimestamp === null) {
           this.previousFrameTimestamp = timestamp;
         }
@@ -75,7 +80,7 @@ export const prepareUIRegistry = runOnUIImmediately(() => {
       // 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) {
+      if (this.activeFrameCallbacks.size === 1 && callId === this.nextCallId) {
         requestAnimationFrame(loop);
       }
     },
@@ -101,12 +106,15 @@ export const prepareUIRegistry = runOnUIImmediately(() => {
       }
       if (state) {
         this.activeFrameCallbacks.add(callbackId);
-        this.runCallbacks();
+        this.runCallbacks(this.nextCallId);
       } else {
         const callback = this.frameCallbackRegistry.get(callbackId)!;
         callback.startTime = null;
 
         this.activeFrameCallbacks.delete(callbackId);
+        if (this.activeFrameCallbacks.size === 0) {
+          this.nextCallId += 1;
+        }
       }
     },
   };

package/src/reanimated2/globals.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-var */
 import type {
   AnimatedStyle,
   StyleProps,
@@ -5,139 +6,97 @@ import type {
   MapperRegistry,
   ShareableRef,
   ShareableSyncDataHolderRef,
+  ShadowNodeWrapper,
 } from './commonTypes';
 import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
-import type { ShadowNodeWrapper } from './hook/commonTypes';
-import { LayoutAnimationStartFunction } from './layoutReanimation';
 import type { NativeReanimated } from './NativeReanimated/NativeReanimated';
+import type {
+  LayoutAnimationFunction,
+  LayoutAnimationType,
+  LayoutAnimationsValues,
+} from './layoutReanimation/animationBuilder';
 
 declare global {
-  const _WORKLET: boolean;
-  const _IS_FABRIC: boolean;
-  const _REANIMATED_VERSION_CPP: string;
-  const __reanimatedModuleProxy: NativeReanimated;
-  const evalWithSourceMap: (
-    js: string,
-    sourceURL: string,
-    sourceMap: string
-  ) => any;
-  const evalWithSourceUrl: (js: string, sourceURL: string) => any;
-  const _log: (s: string) => void;
-  const _getCurrentTime: () => number;
-  const _notifyAboutProgress: (
+  var _WORKLET: boolean | undefined;
+  var _IS_FABRIC: boolean | undefined;
+  var _REANIMATED_VERSION_CPP: string | undefined;
+  var _REANIMATED_VERSION_BABEL_PLUGIN: string | undefined;
+  var __reanimatedModuleProxy: NativeReanimated | undefined;
+  var evalWithSourceMap:
+    | ((
+        js: string,
+        sourceURL: string,
+        sourceMap: string
+        // eslint-ignore-next-line @typescript-eslint/no-explicit-any
+      ) => any)
+    | undefined;
+  // eslint-ignore-next-line @typescript-eslint/no-explicit-any
+  var evalWithSourceUrl: ((js: string, sourceURL: string) => any) | undefined;
+  var _log: (s: string) => void;
+  var _notifyAboutProgress: (
     tag: number,
     value: number,
     isSharedTransition: boolean
   ) => void;
-  const _notifyAboutEnd: (
+  var _notifyAboutEnd: (
     tag: number,
     finished: boolean,
     removeView: boolean
   ) => void;
-  const _setGestureState: (handlerTag: number, newState: number) => void;
-  const _makeShareableClone: (value: any) => any;
-  const _updateDataSynchronously: (
+  var _setGestureState: (handlerTag: number, newState: number) => void;
+  // eslint-ignore-next-line @typescript-eslint/no-explicit-any
+  var _makeShareableClone: (value: any) => any;
+  var _updateDataSynchronously: (
     dataHolder: ShareableSyncDataHolderRef,
     data: ShareableRef
   ) => void;
-  const _scheduleOnJS: (fun: ShareableRef, args?: ShareableRef) => void;
-  const _updatePropsPaper: (
-    tag: number,
-    name: string,
-    updates: StyleProps | AnimatedStyle
-  ) => void;
-  const _updatePropsFabric: (
-    shadowNodeWrapper: ShadowNodeWrapper,
-    props: StyleProps | AnimatedStyle
-  ) => void;
-  const _removeShadowNodeFromRegistry: (viewTag: number) => void;
-  const _measure: (viewTag: number) => MeasuredDimensions;
-  const _scrollTo: (
+  var _scheduleOnJS: (fun: ShareableRef, args?: ShareableRef) => void;
+  var _updatePropsPaper:
+    | ((tag: number, name: string, updates: StyleProps | AnimatedStyle) => void)
+    | undefined;
+  var _updatePropsFabric:
+    | ((
+        shadowNodeWrapper: ShadowNodeWrapper,
+        props: StyleProps | AnimatedStyle
+      ) => void)
+    | undefined;
+  var _removeShadowNodeFromRegistry: ((viewTag: number) => void) | undefined;
+  var _measure: (viewTag: number | ShadowNodeWrapper) => MeasuredDimensions;
+  var _scrollTo: (
     viewTag: number,
     x: number,
     y: number,
     animated: boolean
   ) => void;
-  const _dispatchCommand: (
-    shadowNodeWrapper: ShadowNodeWrapper,
-    commandName: string,
-    args: Array<unknown>
-  ) => void;
-  const performance: { now: () => number };
-  const ReanimatedDataMock: {
-    now: () => number;
-  };
-  const ErrorUtils: {
-    reportFatalError: (error: Error) => void;
-  };
-  const _frameCallbackRegistry: FrameCallbackRegistryUI;
-  const requestAnimationFrame: (callback: (time: number) => void) => number;
-  const setImmediate: (callback: (time: number) => void) => number;
-  const console: Console;
-
-  namespace NodeJS {
-    interface Global {
-      _WORKLET: boolean;
-      _IS_FABRIC: boolean;
-      _REANIMATED_VERSION_CPP: string;
-      __reanimatedModuleProxy: NativeReanimated;
-      __frameTimestamp?: number;
-      evalWithSourceMap: (
-        js: string,
-        sourceURL: string,
-        sourceMap: string
-      ) => any;
-      evalWithSourceUrl: (js: string, sourceURL: string) => any;
-      _log: (s: string) => void;
-      _getCurrentTime: () => number;
-      _setGestureState: (handlerTag: number, newState: number) => void;
-      _makeShareableClone: (value: any) => any;
-      _updateDataSynchronously: (
-        ShareableSyncDataHolderRef,
-        ShareableRef
-      ) => void;
-      _scheduleOnJS: (fun: ShareableRef, args?: ShareableRef) => void;
-      _updatePropsPaper: (
-        tag: number,
-        name: string,
-        updates: StyleProps | AnimatedStyle
-      ) => void;
-      _updatePropsFabric: (
-        shadowNodeWrapper: ShadowNodeWrapper,
-        props: StyleProps | AnimatedStyle
-      ) => void;
-      _removeShadowNodeFromRegistry: (viewTag: number) => void;
-      _measure: (viewTag: number) => MeasuredDimensions;
-      _scrollTo: (
-        viewTag: number,
-        x: number,
-        y: number,
-        animated: boolean
-      ) => void;
-      _dispatchCommand: (
-        shadowNodeWrapper: ShadowNodeWrapper,
+  var _dispatchCommand:
+    | ((
+        nodeRef: ShadowNodeWrapper,
         commandName: string,
         args: Array<unknown>
-      ) => void;
-      performance: { now: () => number };
-      LayoutAnimationsManager: {
-        start: LayoutAnimationStartFunction;
-      };
-      ReanimatedDataMock: {
-        now: () => number;
-      };
-      ErrorUtils: {
-        reportFatalError: (error: Error) => void;
-      };
-      _frameCallbackRegistry: FrameCallbackRegistryUI;
-      __workletsCache?: Map<string, (...args: any[]) => any>;
-      __handleCache?: WeakMap<any, any>;
-      __mapperRegistry?: MapperRegistry;
-      __flushImmediates: () => void;
-      __flushAnimationFrame: (frameTimestamp: number) => void;
-      requestAnimationFrame: (callback: (time: number) => void) => number;
-      setImmediate: (callback: (time: number) => void) => number;
-      console: Console;
-    }
-  }
+      ) => void)
+    | undefined;
+  var performance: { now: () => number };
+  var __ErrorUtils: {
+    reportFatalError: (error: Error) => void;
+  };
+  var _frameCallbackRegistry: FrameCallbackRegistryUI;
+  var requestAnimationFrame: (callback: (time: number) => void) => number;
+  var console: Console;
+  var __frameTimestamp: number | undefined;
+  var __flushAnimationFrame: (timestamp: number) => void;
+  // eslint-ignore-next-line @typescript-eslint/no-explicit-any
+  var __workletsCache: Map<string, any>;
+  // eslint-ignore-next-line @typescript-eslint/no-explicit-any
+  var __handleCache: WeakMap<object, any>;
+  var __callMicrotasks: () => void;
+  var __mapperRegistry: MapperRegistry;
+  var _maybeFlushUIUpdatesQueue: () => void;
+  var LayoutAnimationsManager: {
+    start(
+      tag: number,
+      type: LayoutAnimationType,
+      yogaValues: LayoutAnimationsValues,
+      config: LayoutAnimationFunction
+    );
+  };
 }

package/src/reanimated2/hook/commonTypes.ts

@@ -15,5 +15,5 @@ export interface Descriptor {
 
 export interface RefObjectFunction<T> {
   current: T | null;
-  (component?: T): number;
+  (component?: T): number | ShadowNodeWrapper;
 }

package/src/reanimated2/hook/useAnimatedReaction.ts

@@ -32,8 +32,8 @@ export function useAnimatedReaction<T>(
 
   if (dependencies === undefined) {
     dependencies = [
-      Object.values(prepare._closure ?? {}),
-      Object.values(react._closure ?? {}),
+      ...Object.values(prepare._closure ?? {}),
+      ...Object.values(react._closure ?? {}),
       prepare.__workletHash,
       react.__workletHash,
     ];

package/src/reanimated2/hook/useAnimatedSensor.ts

@@ -7,7 +7,7 @@ import {
   ValueRotation,
   IOSReferenceFrame,
 } from '../commonTypes';
-import { flushImmediates } from '../threads';
+import { callMicrotasks } from '../threads';
 
 export type SensorConfig = {
   interval: number | 'auto';
@@ -145,7 +145,7 @@ export function useAnimatedSensor(
           }
         }
         sensorData.value = data;
-        flushImmediates();
+        callMicrotasks();
       }
     );
 

package/src/reanimated2/initializers.ts

@@ -3,8 +3,8 @@ import NativeReanimatedModule from './NativeReanimated';
 import { isJest } from './PlatformChecker';
 import {
   runOnJS,
-  setupSetImmediate,
-  flushImmediates,
+  setupMicrotasks,
+  callMicrotasks,
   runOnUIImmediately,
 } from './threads';
 
@@ -17,8 +17,8 @@ function callGuardDEV<T extends Array<any>, U>(
   try {
     fn(...args);
   } catch (e) {
-    if (global.ErrorUtils) {
-      global.ErrorUtils.reportFatalError(e as Error);
+    if (global.__ErrorUtils) {
+      global.__ErrorUtils.reportFatalError(e as Error);
     } else {
       throw e;
     }
@@ -106,7 +106,7 @@ function setupRequestAnimationFrame() {
     const currentCallbacks = animationFrameCallbacks;
     animationFrameCallbacks = [];
     currentCallbacks.forEach((f) => f(frameTimestamp));
-    flushImmediates();
+    callMicrotasks();
   };
 
   global.requestAnimationFrame = (
@@ -153,11 +153,13 @@ export function initializeUIRuntime() {
     };
   }
 
-  const capturableConsole = console;
+  // We really have to create a copy of console here. Function runOnJS we use on elements inside
+  // this object makes it not configurable
+  const capturableConsole = { ...console };
   runOnUIImmediately(() => {
     'worklet';
     // setup error handler
-    global.ErrorUtils = {
+    global.__ErrorUtils = {
       reportFatalError: (error: Error) => {
         runOnJS(reportFatalErrorOnJS)({
           message: error.message,
@@ -169,6 +171,7 @@ export function initializeUIRuntime() {
     // setup console
     // @ts-ignore TypeScript doesn't like that there are missing methods in console object, but we don't provide all the methods for the UI runtime console version
     global.console = {
+      assert: runOnJS(capturableConsole.assert),
       debug: runOnJS(capturableConsole.debug),
       log: runOnJS(capturableConsole.log),
       warn: runOnJS(capturableConsole.warn),
@@ -177,7 +180,7 @@ export function initializeUIRuntime() {
     };
 
     if (!IS_JEST) {
-      setupSetImmediate();
+      setupMicrotasks();
       setupRequestAnimationFrame();
     }
   })();

package/src/reanimated2/jestUtils.ts

@@ -190,7 +190,6 @@ export const setUpTests = (userConfig = {}) => {
     }
   }
 
-  require('setimmediate');
   frameTime = Math.round(1000 / config.fps);
 
   config = {

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

@@ -48,10 +48,14 @@ export default class JSReanimated extends NativeReanimated {
 
   enableLayoutAnimations() {
     console.warn(
-      '[Reanimated] enableLayoutAnimations is not available for WEB yet'
+      '[Reanimated] Layout Animations are not supported on web yet.'
     );
   }
 
+  configureLayoutAnimation() {
+    // no-op
+  }
+
   registerSensor(
     sensorType: SensorType,
     interval: number,

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

@@ -4,7 +4,7 @@ import { AnimatedStyle, StyleProps } from '../commonTypes';
 const reanimatedJS = new JSReanimated();
 
 global._makeShareableClone = (c) => c;
-global._scheduleOnJS = setImmediate;
+global._scheduleOnJS = queueMicrotask;
 
 interface JSReanimatedComponent {
   previousStyle: StyleProps;