react-native-reanimated 3.8.0 → 3.9.0-layout-animation-experimental

package/src/reanimated2/WorkletEventHandler.ts

@@ -1,7 +1,11 @@
 'use strict';
 import type { NativeSyntheticEvent } from 'react-native';
 import { registerEventHandler, unregisterEventHandler } from './core';
-import type { EventPayload, ReanimatedEvent } from './hook/commonTypes';
+import type {
+  EventPayload,
+  ReanimatedEvent,
+  IWorkletEventHandler,
+} from './hook/commonTypes';
 import { shouldBeUseWeb } from './PlatformChecker';
 
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
@@ -20,64 +24,119 @@ function jsListener<Event extends object>(
   };
 }
 
-export default class WorkletEventHandler<Event extends object> {
+class WorkletEventHandlerNative<Event extends object>
+  implements IWorkletEventHandler<Event>
+{
+  eventNames: string[];
   worklet: (event: ReanimatedEvent<Event>) => void;
+  #viewTags: Set<number>;
+  #registrations: Map<number, number[]>; // keys are viewTags, values are arrays of registration ID's for each viewTag
+  constructor(
+    worklet: (event: ReanimatedEvent<Event>) => void,
+    eventNames: string[]
+  ) {
+    this.worklet = worklet;
+    this.eventNames = eventNames;
+    this.#viewTags = new Set<number>();
+    this.#registrations = new Map<number, number[]>();
+  }
+
+  updateEventHandler(
+    newWorklet: (event: ReanimatedEvent<Event>) => void,
+    newEvents: string[]
+  ): void {
+    // Update worklet and event names
+    this.worklet = newWorklet;
+    this.eventNames = newEvents;
+
+    // Detach all events
+    this.#registrations.forEach((registrationIDs) => {
+      registrationIDs.forEach((id) => unregisterEventHandler(id));
+      // No need to remove registrationIDs from map, since it gets overwritten when attaching
+    });
+
+    // Attach new events with new worklet
+    Array.from(this.#viewTags).forEach((tag) => {
+      const newRegistrations = this.eventNames.map((eventName) =>
+        registerEventHandler(this.worklet, eventName, tag)
+      );
+      this.#registrations.set(tag, newRegistrations);
+    });
+  }
+
+  registerForEvents(viewTag: number, fallbackEventName?: string): void {
+    this.#viewTags.add(viewTag);
+
+    const newRegistrations = this.eventNames.map((eventName) =>
+      registerEventHandler(this.worklet, eventName, viewTag)
+    );
+    this.#registrations.set(viewTag, newRegistrations);
+
+    if (this.eventNames.length === 0 && fallbackEventName) {
+      const newRegistration = registerEventHandler(
+        this.worklet,
+        fallbackEventName,
+        viewTag
+      );
+      this.#registrations.set(viewTag, [newRegistration]);
+    }
+  }
+
+  unregisterFromEvents(viewTag: number): void {
+    this.#viewTags.delete(viewTag);
+    this.#registrations.get(viewTag)?.forEach((id) => {
+      unregisterEventHandler(id);
+    });
+    this.#registrations.delete(viewTag);
+  }
+}
+
+class WorkletEventHandlerWeb<Event extends object>
+  implements IWorkletEventHandler<Event>
+{
   eventNames: string[];
-  reattachNeeded: boolean;
   listeners:
     | Record<string, (event: ReanimatedEvent<ReanimatedEvent<Event>>) => void>
     | Record<string, (event: JSEvent<Event>) => void>;
 
-  viewTag: number | undefined;
-  registrations: number[];
+  worklet: (event: ReanimatedEvent<Event>) => void;
+
   constructor(
     worklet: (event: ReanimatedEvent<Event>) => void,
     eventNames: string[] = []
   ) {
     this.worklet = worklet;
     this.eventNames = eventNames;
-    this.reattachNeeded = false;
     this.listeners = {};
-    this.viewTag = undefined;
-    this.registrations = [];
-
-    if (SHOULD_BE_USE_WEB) {
-      this.listeners = eventNames.reduce(
-        (
-          acc: Record<string, (event: JSEvent<Event>) => void>,
-          eventName: string
-        ) => {
-          acc[eventName] = jsListener(eventName, worklet);
-          return acc;
-        },
-        {}
-      );
-    }
+    this.setupWebListeners();
   }
 
-  updateWorklet(newWorklet: (event: ReanimatedEvent<Event>) => void): void {
-    this.worklet = newWorklet;
-    this.reattachNeeded = true;
+  setupWebListeners() {
+    this.listeners = {};
+    this.eventNames.forEach((eventName) => {
+      this.listeners[eventName] = jsListener(eventName, this.worklet);
+    });
   }
 
-  registerForEvents(viewTag: number, fallbackEventName?: string): void {
-    this.viewTag = viewTag;
-    this.registrations = this.eventNames.map((eventName) =>
-      registerEventHandler(this.worklet, eventName, viewTag)
-    );
-    if (this.registrations.length === 0 && fallbackEventName) {
-      this.registrations.push(
-        registerEventHandler(this.worklet, fallbackEventName, viewTag)
-      );
-    }
+  updateEventHandler(
+    newWorklet: (event: ReanimatedEvent<Event>) => void,
+    newEvents: string[]
+  ): void {
+    // Update worklet and event names
+    this.worklet = newWorklet;
+    this.eventNames = newEvents;
+    this.setupWebListeners();
   }
 
-  registerForEventByName(eventName: string) {
-    this.registrations.push(registerEventHandler(this.worklet, eventName));
+  registerForEvents(_viewTag: number, _fallbackEventName?: string): void {
+    // noop
   }
 
-  unregisterFromEvents(): void {
-    this.registrations.forEach((id) => unregisterEventHandler(id));
-    this.registrations = [];
+  unregisterFromEvents(_viewTag: number): void {
+    // noop
   }
 }
+
+export const WorkletEventHandler = SHOULD_BE_USE_WEB
+  ? WorkletEventHandlerWeb
+  : WorkletEventHandlerNative;

package/src/reanimated2/animation/styleAnimation.ts

@@ -125,16 +125,18 @@ export function withStyleAnimation(
             stillGoing = true;
           }
 
-          if (ColorProperties.includes(currentEntry.path[0] as string)) {
-            currentStyleAnimation.current = processColor(
-              currentStyleAnimation.current
-            ) as number;
-          }
+          // When working with animations changing colors, we need to make sure that each one of them begins with a rgba, not a processed number.
+          // Thus, we only set the path to a processed color, but currentStyleAnimation.current stays as rgba.
+          const isAnimatingColorProp = ColorProperties.includes(
+            currentEntry.path[0] as string
+          );
 
           setPath(
             animation.current,
             currentEntry.path,
-            currentStyleAnimation.current
+            isAnimatingColorProp
+              ? processColor(currentStyleAnimation.current)
+              : currentStyleAnimation.current
           );
         }
       }

package/src/reanimated2/animation/timing.ts

@@ -1,7 +1,11 @@
 'use strict';
 import type { EasingFunction, EasingFunctionFactory } from '../Easing';
 import { Easing } from '../Easing';
-import { defineAnimation, getReduceMotionForAnimation } from './util';
+import {
+  assertEasingIsWorklet,
+  defineAnimation,
+  getReduceMotionForAnimation,
+} from './util';
 import type {
   Animation,
   AnimationCallback,
@@ -65,6 +69,10 @@ export const withTiming = function (
 ): Animation<TimingAnimation> {
   'worklet';
 
+  if (__DEV__ && userConfig?.easing) {
+    assertEasingIsWorklet(userConfig.easing);
+  }
+
   return defineAnimation<TimingAnimation>(toValue, () => {
     'worklet';
     const config: Required<Omit<TimingConfig, 'reduceMotion'>> = {

package/src/reanimated2/animation/util.ts

@@ -9,7 +9,7 @@ import {
   toGammaSpace,
   toLinearSpace,
 } from '../Colors';
-import { ReduceMotion } from '../commonTypes';
+import { ReduceMotion, isWorkletFunction } from '../commonTypes';
 import type {
   SharedValue,
   AnimatableValue,
@@ -33,9 +33,11 @@ import {
   getRotationMatrix,
 } from './transformationMatrix/matrixUtils';
 import { isReducedMotion, shouldBeUseWeb } from '../PlatformChecker';
+import type { EasingFunction, EasingFunctionFactory } from '../Easing';
 
 let IN_STYLE_UPDATER = false;
 const IS_REDUCED_MOTION = isReducedMotion();
+const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
 if (__DEV__ && IS_REDUCED_MOTION) {
   console.warn(
@@ -43,6 +45,31 @@ if (__DEV__ && IS_REDUCED_MOTION) {
   );
 }
 
+export function assertEasingIsWorklet(
+  easing: EasingFunction | EasingFunctionFactory
+): void {
+  'worklet';
+  if (_WORKLET) {
+    // If this is called on UI (for example from gesture handler with worklets), we don't get easing,
+    // but its bound copy, which is not a worklet. We don't want to throw any error then.
+    return;
+  }
+  if (SHOULD_BE_USE_WEB) {
+    // It is possible to run reanimated on web without plugin, so let's skip this check on web
+    return;
+  }
+  // @ts-ignore typescript wants us to use `in` instead, which doesn't work with host objects
+  if (easing?.factory) {
+    return;
+  }
+
+  if (!isWorkletFunction(easing)) {
+    throw new Error(
+      '[Reanimated] The easing function is not a worklet. Please make sure you import `Easing` from react-native-reanimated.'
+    );
+  }
+}
+
 export function initialUpdaterRun<T>(updater: () => T) {
   IN_STYLE_UPDATER = true;
   const result = updater();
@@ -478,8 +505,6 @@ type AnimationToDecoration<
   ? Record<string, unknown>
   : U | (() => U) | AnimatableValue;
 
-const SHOULD_BE_USE_WEB = shouldBeUseWeb();
-
 export function defineAnimation<
   T extends AnimationObject | StyleLayoutAnimation, // type that's supposed to be returned
   U extends AnimationObject | StyleLayoutAnimation = T // type that's received

package/src/reanimated2/commonTypes.ts

@@ -131,7 +131,10 @@ export function isWorkletFunction<
   'worklet';
   // Since host objects always return true for `in` operator, we have to use dot notation to check if the property exists.
   // See https://github.com/facebook/hermes/blob/340726ef8cf666a7cce75bc60b02fa56b3e54560/lib/VM/JSObject.cpp#L1276.
-  return !!(value as Record<string, unknown>).__workletHash;
+  return (
+    typeof value === 'function' &&
+    !!(value as unknown as Record<string, unknown>).__workletHash
+  );
 }
 
 export type AnimatedPropsAdapterFunction = (

package/src/reanimated2/component/PerformanceMonitor.tsx

@@ -0,0 +1,216 @@
+'use strict';
+
+import React, { useEffect, useRef } from 'react';
+import { TextInput, StyleSheet, View } from 'react-native';
+
+import type { FrameInfo } from '../frameCallback';
+import type { SharedValue } from '../commonTypes';
+import { useSharedValue, useAnimatedProps, useFrameCallback } from '../hook';
+import { createAnimatedComponent } from '../../createAnimatedComponent';
+import { addWhitelistedNativeProps } from '../../ConfigHelper';
+
+type CircularBuffer = ReturnType<typeof createCircularDoublesBuffer>;
+function createCircularDoublesBuffer(size: number) {
+  'worklet';
+
+  return {
+    next: 0 as number,
+    buffer: new Float32Array(size),
+    size,
+    count: 0 as number,
+
+    push(value: number): number | null {
+      const oldValue = this.buffer[this.next];
+      const oldCount = this.count;
+      this.buffer[this.next] = value;
+
+      this.next = (this.next + 1) % this.size;
+      this.count = Math.min(this.size, this.count + 1);
+      return oldCount === this.size ? oldValue : null;
+    },
+
+    front(): number | null {
+      const notEmpty = this.count > 0;
+      if (notEmpty) {
+        const current = this.next - 1;
+        const index = current < 0 ? this.size - 1 : current;
+        return this.buffer[index];
+      }
+      return null;
+    },
+
+    back(): number | null {
+      const notEmpty = this.count > 0;
+      return notEmpty ? this.buffer[this.next] : null;
+    },
+  };
+}
+
+const DEFAULT_BUFFER_SIZE = 60;
+addWhitelistedNativeProps({ text: true });
+const AnimatedTextInput = createAnimatedComponent(TextInput);
+
+function loopAnimationFrame(fn: (lastTime: number, time: number) => void) {
+  let lastTime = 0;
+
+  function loop() {
+    requestAnimationFrame((time) => {
+      if (lastTime > 0) {
+        fn(lastTime, time);
+      }
+      lastTime = time;
+      requestAnimationFrame(loop);
+    });
+  }
+
+  loop();
+}
+
+function getFps(renderTimeInMs: number): number {
+  'worklet';
+  return 1000 / renderTimeInMs;
+}
+
+function getTimeDelta(
+  timestamp: number,
+  previousTimestamp: number | null
+): number {
+  'worklet';
+  return previousTimestamp !== null ? timestamp - previousTimestamp : 0;
+}
+
+function completeBufferRoutine(
+  buffer: CircularBuffer,
+  timestamp: number,
+  previousTimestamp: number,
+  totalRenderTime: SharedValue<number>
+): number {
+  'worklet';
+  timestamp = Math.round(timestamp);
+  previousTimestamp = Math.round(previousTimestamp) ?? timestamp;
+
+  const droppedTimestamp = buffer.push(timestamp);
+  const nextToDrop = buffer.back()!;
+
+  const delta = getTimeDelta(timestamp, previousTimestamp);
+  const droppedDelta = getTimeDelta(nextToDrop, droppedTimestamp);
+
+  totalRenderTime.value += delta - droppedDelta;
+
+  return getFps(totalRenderTime.value / buffer.count);
+}
+
+function JsPerformance() {
+  const jsFps = useSharedValue<string | null>(null);
+  const totalRenderTime = useSharedValue(0);
+  const circularBuffer = useRef<CircularBuffer>(
+    createCircularDoublesBuffer(DEFAULT_BUFFER_SIZE)
+  );
+
+  useEffect(() => {
+    loopAnimationFrame((_, timestamp) => {
+      timestamp = Math.round(timestamp);
+      const previousTimestamp = circularBuffer.current.front() ?? timestamp;
+
+      const currentFps = completeBufferRoutine(
+        circularBuffer.current,
+        timestamp,
+        previousTimestamp,
+        totalRenderTime
+      );
+
+      // JS fps have to be measured every 2nd frame,
+      // thus 2x multiplication has to occur here
+      jsFps.value = (currentFps * 2).toFixed(0);
+    });
+  }, []);
+
+  const animatedProps = useAnimatedProps(() => {
+    const text = 'JS: ' + jsFps.value ?? 'N/A';
+    return { text, defaultValue: text };
+  });
+
+  return (
+    <View style={styles.container}>
+      <AnimatedTextInput
+        style={styles.text}
+        animatedProps={animatedProps}
+        editable={false}
+      />
+    </View>
+  );
+}
+
+function UiPerformance() {
+  const uiFps = useSharedValue<string | null>(null);
+  const totalRenderTime = useSharedValue(0);
+  const circularBuffer = useSharedValue<CircularBuffer | null>(null);
+
+  useFrameCallback(({ timestamp }: FrameInfo) => {
+    if (circularBuffer.value === null) {
+      circularBuffer.value = createCircularDoublesBuffer(DEFAULT_BUFFER_SIZE);
+    }
+
+    timestamp = Math.round(timestamp);
+    const previousTimestamp = circularBuffer.value.front() ?? timestamp;
+
+    const currentFps = completeBufferRoutine(
+      circularBuffer.value,
+      timestamp,
+      previousTimestamp,
+      totalRenderTime
+    );
+
+    uiFps.value = currentFps.toFixed(0);
+  });
+
+  const animatedProps = useAnimatedProps(() => {
+    const text = 'UI: ' + uiFps.value ?? 'N/A';
+    return { text, defaultValue: text };
+  });
+
+  return (
+    <View style={styles.container}>
+      <AnimatedTextInput
+        style={styles.text}
+        animatedProps={animatedProps}
+        editable={false}
+      />
+    </View>
+  );
+}
+
+export function PerformanceMonitor() {
+  return (
+    <View style={styles.monitor}>
+      <JsPerformance />
+      <UiPerformance />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  monitor: {
+    flexDirection: 'row',
+    position: 'absolute',
+    backgroundColor: '#0006',
+    zIndex: 1000,
+  },
+  header: {
+    fontSize: 14,
+    color: '#ffff',
+    paddingHorizontal: 5,
+  },
+  text: {
+    fontSize: 13,
+    color: '#ffff',
+    fontFamily: 'monospace',
+    paddingHorizontal: 3,
+  },
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+});

package/src/reanimated2/core.ts

@@ -10,16 +10,8 @@ import type {
   ValueRotation,
 } from './commonTypes';
 import { makeShareableCloneRecursive } from './shareables';
-import type {
-  LayoutAnimationFunction,
-  LayoutAnimationType,
-} from './layoutReanimation';
 import { initializeUIRuntime } from './initializers';
-import type {
-  LayoutAnimationBatchItem,
-  ProgressAnimationCallback,
-  SharedTransitionAnimationsFunction,
-} from './layoutReanimation/animationBuilder/commonTypes';
+import type { LayoutAnimationBatchItem } from './layoutReanimation/animationBuilder/commonTypes';
 import { SensorContainer } from './SensorContainer';
 
 export { startMapper, stopMapper } from './mappers';
@@ -29,7 +21,6 @@ export type { WorkletRuntime } from './runtimes';
 export { makeShareable, makeShareableCloneRecursive } from './shareables';
 export { makeMutable } from './mutables';
 
-const IS_FABRIC = isFabric();
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
 /**
@@ -55,10 +46,14 @@ if (SHOULD_BE_USE_WEB) {
   global._getAnimationTimestamp = () => performance.now();
 }
 
-export function getViewProp<T>(viewTag: number, propName: string): Promise<T> {
-  if (IS_FABRIC) {
+export function getViewProp<T>(
+  viewTag: number,
+  propName: string,
+  component?: React.Component // required on Fabric
+): Promise<T> {
+  if (isFabric() && !component) {
     throw new Error(
-      '[Reanimated] `getViewProp` is not supported on Fabric yet.'
+      '[Reanimated] Function `getViewProp` requires a component to be passed as an argument on Fabric.'
     );
   }
 
@@ -67,6 +62,7 @@ export function getViewProp<T>(viewTag: number, propName: string): Promise<T> {
     return NativeReanimatedModule.getViewProp(
       viewTag,
       propName,
+      component,
       (result: T) => {
         if (typeof result === 'string' && result.substr(0, 6) === 'error:') {
           reject(result);
@@ -194,24 +190,6 @@ export function enableLayoutAnimations(
   }
 }
 
-export function configureLayoutAnimations(
-  viewTag: number | HTMLElement,
-  type: LayoutAnimationType,
-  config:
-    | LayoutAnimationFunction
-    | Keyframe
-    | SharedTransitionAnimationsFunction
-    | ProgressAnimationCallback,
-  sharedTransitionTag = ''
-): void {
-  NativeReanimatedModule.configureLayoutAnimation(
-    viewTag as number, // On web this function is no-op, therefore we can cast viewTag to number
-    type,
-    sharedTransitionTag,
-    makeShareableCloneRecursive(config)
-  );
-}
-
 export function configureLayoutAnimationBatch(
   layoutAnimationsBatch: LayoutAnimationBatchItem[]
 ): void {

package/src/reanimated2/errors.ts

@@ -56,4 +56,5 @@ export function reportFatalErrorOnJS({
   error.jsEngine = 'reanimated';
   // @ts-ignore the reportFatalError method is an internal method of ErrorUtils not exposed in the type definitions
   global.ErrorUtils.reportFatalError(error);
+  console.error(error.stack);
 }

package/src/reanimated2/fabricUtils.ts

@@ -1,33 +1,58 @@
 'use strict';
-/* eslint-disable camelcase */
+/* eslint-disable */
 
-import { isFabric } from './PlatformChecker';
 import type { ShadowNodeWrapper } from './commonTypes';
 
-interface HostInstance {
-  _internalInstanceHandle: {
-    stateNode: {
-      node: ShadowNodeWrapper;
-    };
-  };
-}
-
-let findHostInstance_DEPRECATED: (ref: React.Component) => HostInstance;
+let findHostInstance_DEPRECATED: (ref: unknown) => void;
+let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
+  stateNode: { node: unknown };
+};
 
 export function getShadowNodeWrapperFromRef(
   ref: React.Component
 ): ShadowNodeWrapper {
-  if (!findHostInstance_DEPRECATED && isFabric()) {
+  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (findHostInstance_DEPRECATED === undefined) {
     try {
       findHostInstance_DEPRECATED =
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
         require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
     } catch (e) {
-      throw new Error(
-        '[Reanimated] Cannot import `findHostInstance_DEPRECATED`.'
-      );
+      findHostInstance_DEPRECATED = (_ref: unknown) => null;
     }
   }
-  return findHostInstance_DEPRECATED(ref)._internalInstanceHandle.stateNode
-    .node;
+
+  if (getInternalInstanceHandleFromPublicInstance === undefined) {
+    try {
+      getInternalInstanceHandleFromPublicInstance =
+        require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
+          .getInternalInstanceHandleFromPublicInstance ??
+        ((_ref: any) => _ref._internalInstanceHandle);
+    } catch (e) {
+      getInternalInstanceHandleFromPublicInstance = (_ref: any) =>
+        _ref._internalInstanceHandle;
+    }
+  }
+
+  // taken from https://github.com/facebook/react-native/commit/803bb16531697233686efd475f004c1643e03617#diff-d8172256c6d63b5d32db10e54d7b10f37a26b337d5280d89f5bfd7bcea778292R196
+  // @ts-ignore some weird stuff on RN 0.74 - see examples with scrollView
+  const scrollViewRef = ref?.getScrollResponder?.()?.getNativeScrollRef?.();
+  // @ts-ignore some weird stuff on RN 0.74  - see examples with scrollView
+  const otherScrollViewRef = ref?.getNativeScrollRef?.();
+  // @ts-ignore some weird stuff on RN 0.74 - see setNativeProps example
+  const textInputRef = ref?.__internalInstanceHandle?.stateNode?.node;
+
+  let resolvedRef;
+  if (scrollViewRef) {
+    resolvedRef = scrollViewRef.__internalInstanceHandle.stateNode.node;
+  } else if (otherScrollViewRef) {
+    resolvedRef = otherScrollViewRef.__internalInstanceHandle.stateNode.node;
+  } else if (textInputRef) {
+    resolvedRef = textInputRef;
+  } else {
+    resolvedRef = getInternalInstanceHandleFromPublicInstance(
+      findHostInstance_DEPRECATED(ref)
+    ).stateNode.node;
+  }
+
+  return resolvedRef;
 }