react-native-reanimated 4.3.0-rc.0 → 4.3.0

package/src/css/native/normalization/transition/config.ts

@@ -79,9 +79,10 @@ export function normalizeCSSTransitionProperties(
     transitionDelay,
     transitionBehavior,
   } = expandedProperties;
-  const specificProperties: string[] = [];
   let allPropertiesTransition = false;
   const settings: Record<string, NormalizedSingleCSSTransitionSettings> = {};
+  const specificProperties = new Set<string>();
+  const processedProperties = new Set<string>();
 
   if (!transitionProperty.length) {
     // For cases when transition property hasn't been explicitly specified
@@ -95,42 +96,49 @@ export function normalizeCSSTransitionProperties(
   // occurrence and ignore remaining ones)
   for (let i = transitionProperty.length - 1; i >= 0; i--) {
     const property = transitionProperty[i];
-    // Continue if there was a prop with the same name specified later
-    // (we don't want to override the last occurrence of the property)
-    if (settings?.[property]) {
+    // We always respect the last occurrence of a property, even if it gets
+    // pruned as inactive. That means earlier occurrences must be ignored.
+    if (processedProperties.has(property)) {
       continue;
     }
+    processedProperties.add(property);
 
-    if (property === 'all') {
-      allPropertiesTransition = true;
-    } else {
-      specificProperties.push(property);
+    const duration = normalizeDuration(
+      transitionDuration[i % transitionDuration.length]
+    );
+    const delay = normalizeDelay(transitionDelay[i % transitionDelay.length]);
+
+    // Skip if effective duration is 0 (the transition would be immediate so there is no need
+    // to apply it and we can just treat it as a plain render without a transition)
+    if (duration + delay <= 0) {
+      continue;
     }
 
-    settings[property] = {
-      duration: normalizeDuration(
-        transitionDuration[i % transitionDuration.length]
-      ),
-      timingFunction: normalizeTimingFunction(
-        transitionTimingFunction[i % transitionTimingFunction.length]
-      ),
-      delay: normalizeDelay(transitionDelay[i % transitionDelay.length]),
-      allowDiscrete: normalizeTransitionBehavior(
-        transitionBehavior[i % transitionBehavior.length]
-      ),
-    };
+    const timingFunction = normalizeTimingFunction(
+      transitionTimingFunction[i % transitionTimingFunction.length]
+    );
+    const allowDiscrete = normalizeTransitionBehavior(
+      transitionBehavior[i % transitionBehavior.length]
+    );
+
+    settings[property] = { duration, timingFunction, delay, allowDiscrete };
 
     // 'all' transition property overrides all properties before it,
     // so we don't need to process them
-    if (allPropertiesTransition) {
+    if (property === 'all') {
+      allPropertiesTransition = true;
       break;
     }
+
+    specificProperties.add(property);
+  }
+
+  if (allPropertiesTransition) {
+    return { specificProperties: undefined, settings };
+  }
+  if (specificProperties.size) {
+    return { specificProperties, settings };
   }
 
-  return {
-    properties: allPropertiesTransition
-      ? undefined
-      : specificProperties.reverse(),
-    settings,
-  };
+  return null;
 }

package/src/css/native/types/transition.ts

@@ -13,7 +13,21 @@ export type CSSTransitionConfig = Record<
   (NormalizedSingleCSSTransitionSettings & { value: [unknown, unknown] }) | null
 >;
 
+/**
+ * `specificProperties`
+ *
+ * - `undefined`: accept all props (equivalent to `transition-property: all`)
+ * - `Set<string>`: accept only props present in the set
+ *
+ * `settings`
+ *
+ * - Keys are prop names, plus an optional `all` fallback key
+ * - How to read it for a prop `propName`:
+ *
+ *   - Primary: `settings[propName]` (if present)
+ *   - Fallback: `settings.all` (otherwise)
+ */
 export type NormalizedCSSTransitionConfig = {
-  properties: string[] | undefined;
+  specificProperties: Set<string> | undefined;
   settings: Record<string, NormalizedSingleCSSTransitionSettings>;
 };

package/src/featureFlags/index.ts

@@ -80,7 +80,7 @@ const DefaultStaticFeatureFlags = {
   USE_SYNCHRONIZABLE_FOR_MUTABLES: true,
   USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS: true,
   ENABLE_SHARED_ELEMENT_TRANSITIONS: false,
-  FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS: false,
+  FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS: true,
 } as const satisfies typeof StaticFeatureFlagsJSON;
 
 type StaticFeatureFlagsSchema = {

package/src/featureFlags/staticFlags.json

@@ -7,5 +7,5 @@
   "USE_SYNCHRONIZABLE_FOR_MUTABLES": true,
   "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": true,
   "ENABLE_SHARED_ELEMENT_TRANSITIONS": false,
-  "FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": false
+  "FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS": true
 }

package/src/hook/useAnimatedStyle.ts

@@ -30,12 +30,7 @@ import type {
   JestAnimatedStyleHandle,
 } from './commonTypes';
 import { useSharedValue } from './useSharedValue';
-import {
-  buildWorkletsHash,
-  isAnimated,
-  shallowEqual,
-  validateAnimatedStyles,
-} from './utils';
+import { isAnimated, shallowEqual, validateAnimatedStyles } from './utils';
 
 interface AnimatedState {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -450,6 +445,20 @@ function checkSharedValueUsage(
   }
 }
 
+// Builds one big hash from multiple worklets' hashes.
+function buildWorkletsHash<Args extends unknown[], ReturnValue>(
+  worklets:
+    | Record<string, WorkletFunction<Args, ReturnValue>>
+    | WorkletFunction<Args, ReturnValue>[]
+) {
+  // For arrays `Object.values` returns the array itself.
+  return Object.values(worklets).reduce(
+    (acc, worklet: WorkletFunction<Args, ReturnValue>) =>
+      acc + worklet.__workletHash.toString(),
+    ''
+  );
+}
+
 /**
  * Lets you create a styles object, similar to StyleSheet styles, which can be
  * animated using shared values.

package/src/hook/useHandler.ts

@@ -1,43 +1,129 @@
 'use strict';
 import { useEffect, useRef } from 'react';
 import type { WorkletFunction } from 'react-native-worklets';
-import { makeShareable } from 'react-native-worklets';
+import { isWorkletFunction, makeShareable } from 'react-native-worklets';
+import type { WorkletClosure } from 'react-native-worklets/lib/typescript/types';
 
-import { IS_JEST, IS_WEB } from '../common';
+import type { UnknownRecord } from '../common';
+import { IS_WEB, ReanimatedError } from '../common';
 import type { DependencyList, ReanimatedEvent } from './commonTypes';
-import { areDependenciesEqual, buildDependencies } from './utils';
 
 interface GeneralHandler<
-  Event extends object,
-  Context extends Record<string, unknown>,
+  TEvent extends object,
+  TContext extends UnknownRecord,
 > {
-  (event: ReanimatedEvent<Event>, context: Context): void;
+  (event: ReanimatedEvent<TEvent>, context: TContext): void;
 }
 
-type GeneralWorkletHandler<
-  Event extends object,
-  Context extends Record<string, unknown>,
-> = WorkletFunction<[event: ReanimatedEvent<Event>, context: Context]>;
-
 type GeneralHandlers<
-  Event extends object,
-  Context extends Record<string, unknown>,
-> = Record<string, GeneralHandler<Event, Context> | undefined>;
-
-type GeneralWorkletHandlers<
-  Event extends object,
-  Context extends Record<string, unknown>,
-> = Record<string, GeneralWorkletHandler<Event, Context>>;
-
-interface ContextWithDependencies<Context extends Record<string, unknown>> {
-  context: Context;
-  savedDependencies: DependencyList;
-}
+  TEvent extends object,
+  TContext extends UnknownRecord,
+> = Record<string, GeneralHandler<TEvent, TContext> | undefined>;
 
-export interface UseHandlerContext<Context extends Record<string, unknown>> {
-  context: Context;
+export interface UseHandlerContext<TContext extends UnknownRecord> {
+  context: TContext;
   doDependenciesDiffer: boolean;
-  useWeb: boolean;
+}
+
+function isBabelPluginEnabled(handlers: UnknownRecord): boolean {
+  if (!IS_WEB) {
+    // Babel plugin must be enabled in all non-web environments.
+    return true;
+  }
+
+  const handlerFunctions = Object.values(handlers);
+  // If there is no function provided, we assume that the Babel plugin is enabled.
+  return (
+    handlerFunctions.length === 0 || handlerFunctions.some(isWorkletFunction)
+  );
+}
+
+function ensureWorkletHandlers(handlers: UnknownRecord) {
+  const nonWorkletNames = Object.entries(handlers).reduce<string[]>(
+    (acc, [name, handler]) => {
+      if (!isWorkletFunction(handler)) acc.push(name);
+      return acc;
+    },
+    []
+  );
+
+  if (nonWorkletNames.length > 0) {
+    throw new ReanimatedError(
+      `Passed handlers that are not worklets. Only worklet functions are allowed. Handlers "${nonWorkletNames.join(', ')}" are not worklets.`
+    );
+  }
+}
+
+const objectIs: (a: unknown, b: unknown) => boolean =
+  typeof Object.is === 'function'
+    ? Object.is
+    : (x, y) =>
+        (x === y && (x !== 0 || 1 / (x as number) === 1 / (y as number))) ||
+        (Number.isNaN(x as number) && Number.isNaN(y as number));
+
+function areWorkletClosuresEqual(
+  next: WorkletClosure,
+  prev: WorkletClosure
+): boolean {
+  const nextKeys = Object.keys(next);
+  const prevKeys = Object.keys(prev);
+
+  return (
+    prevKeys.length === nextKeys.length &&
+    prevKeys.every((key) => key in next && objectIs(next[key], prev[key]))
+  );
+}
+
+function areWorkletsEqual(
+  next: WorkletFunction,
+  prev: WorkletFunction
+): boolean {
+  if (objectIs(next, prev)) {
+    return true;
+  }
+
+  return (
+    next.__workletHash === prev.__workletHash &&
+    areWorkletClosuresEqual(next.__closure, prev.__closure)
+  );
+}
+
+function areWorkletHandlersEqual(
+  next: Partial<Record<string, WorkletFunction>> | undefined,
+  prev: Partial<Record<string, WorkletFunction>> | undefined
+) {
+  if (!next || !prev) {
+    return false;
+  }
+
+  const nextKeys = Object.keys(next);
+  const prevKeys = Object.keys(prev);
+
+  if (nextKeys.length !== prevKeys.length) {
+    return false;
+  }
+
+  return nextKeys.every((key) => {
+    const nextValue = next[key];
+    const prevValue = prev[key];
+
+    if (!nextValue || !prevValue) {
+      return false;
+    }
+
+    return areWorkletsEqual(nextValue, prevValue);
+  });
+}
+
+function areDependenciesEqual(
+  next: Array<unknown> | undefined,
+  prev: Array<unknown> | undefined
+): boolean {
+  if (!next || !prev || next.length !== prev.length) {
+    return false;
+  }
+
+  return next.every((value, index) => objectIs(value, prev[index]));
 }
 
 /**
@@ -46,52 +132,52 @@ export interface UseHandlerContext<Context extends Record<string, unknown>> {
  * @param handlers - An object of event handlers.
  * @param dependencies - An optional array of dependencies.
  * @returns An object containing a boolean indicating whether the dependencies
- *   have changed, and a boolean indicating whether the code is running on the
- *   web.
+ *   have changed.
  * @see https://docs.swmansion.com/react-native-reanimated/docs/advanced/useHandler
  */
-// @ts-expect-error This overload is required by our API.
-export function useHandler<
-  Event extends object,
-  Context extends Record<string, unknown>,
->(
+export function useHandler<Event extends object, Context extends UnknownRecord>(
   handlers: GeneralHandlers<Event, Context>,
   dependencies?: DependencyList
-): UseHandlerContext<Context>;
-
-export function useHandler<
-  Event extends object,
-  Context extends Record<string, unknown>,
->(
-  handlers: GeneralWorkletHandlers<Event, Context>,
-  dependencies?: DependencyList
 ): UseHandlerContext<Context> {
-  const initRef = useRef<ContextWithDependencies<Context> | null>(null);
-  if (initRef.current === null) {
-    const context = makeShareable({} as Context);
-    initRef.current = {
-      context,
-      savedDependencies: [],
-    };
-  }
+  'use no memo';
 
-  useEffect(() => {
-    return () => {
-      initRef.current = null;
+  const stateRef = useRef<{
+    context: Context;
+    prevHandlers: GeneralHandlers<Event, Context> | undefined;
+    prevDependencies: DependencyList;
+  } | null>(null);
+
+  if (stateRef.current === null) {
+    stateRef.current = {
+      context: makeShareable({} as Context),
+      prevHandlers: undefined,
+      prevDependencies: [],
     };
-  }, []);
+  }
 
-  const { context, savedDependencies } = initRef.current;
+  const state = stateRef.current;
+  let doDependenciesDiffer = true;
 
-  dependencies = buildDependencies(
-    dependencies,
-    handlers as Record<string, WorkletFunction>
-  );
+  if (isBabelPluginEnabled(handlers)) {
+    if (__DEV__) {
+      ensureWorkletHandlers(handlers);
+    }
+    doDependenciesDiffer = !areWorkletHandlersEqual(
+      handlers as Record<string, WorkletFunction>,
+      state.prevHandlers as Record<string, WorkletFunction>
+    );
+  } else if (dependencies) {
+    doDependenciesDiffer = !areDependenciesEqual(
+      dependencies,
+      state.prevDependencies
+    );
+  }
 
-  const doDependenciesDiffer =
-    !areDependenciesEqual(dependencies, savedDependencies) || !dependencies;
-  initRef.current.savedDependencies = dependencies;
-  const useWeb = IS_WEB || IS_JEST;
+  // Write after commit to avoid corruption from interrupted renders (in case of concurrent mode).
+  useEffect(() => {
+    state.prevHandlers = handlers;
+    state.prevDependencies = dependencies;
+  });
 
-  return { context, doDependenciesDiffer, useWeb };
+  return { context: state.context, doDependenciesDiffer };
 }

package/src/hook/utils.ts

@@ -1,131 +1,5 @@
 'use strict';
-import type { WorkletFunction } from 'react-native-worklets';
-import { isWorkletFunction } from 'react-native-worklets';
-
-import { IS_WEB, logger, ReanimatedError } from '../common';
-import type { DependencyList } from './commonTypes';
-
-// Builds one big hash from multiple worklets' hashes.
-export function buildWorkletsHash<Args extends unknown[], ReturnValue>(
-  worklets:
-    | Record<string, WorkletFunction<Args, ReturnValue>>
-    | WorkletFunction<Args, ReturnValue>[]
-) {
-  // For arrays `Object.values` returns the array itself.
-  return Object.values(worklets).reduce(
-    (acc, worklet: WorkletFunction<Args, ReturnValue>) =>
-      acc + worklet.__workletHash.toString(),
-    ''
-  );
-}
-
-// Builds dependencies array for useEvent handlers.
-export function buildDependencies(
-  dependencies: DependencyList | undefined,
-  handlers: Record<string, WorkletFunction>
-) {
-  const result = dependencies ?? [];
-
-  const nonWorkletHandlerNames = Object.entries(handlers).reduce<string[]>(
-    (acc, [name, handler]) => {
-      if (!isWorkletFunction(handler)) {
-        acc.push(name);
-      }
-      return acc;
-    },
-    []
-  );
-
-  if (nonWorkletHandlerNames.length === 0) {
-    result.push(buildWorkletsHash(handlers));
-    return result;
-  }
-
-  if (!__DEV__) {
-    return result;
-  }
-
-  const handlerNames = nonWorkletHandlerNames.join(', ');
-
-  // On native, only worklets are allowed
-  if (!IS_WEB) {
-    throw new ReanimatedError(
-      `Passed handlers that are not worklets. Only worklet functions are allowed. Handlers "${handlerNames}" are not worklets.`
-    );
-  }
-
-  // On web, non-worklets are allowed only when dependencies are provided
-  if (__DEV__ && !dependencies) {
-    logger.warn(
-      `Non-worklet handlers ("${handlerNames}") were passed without a dependency array. This will cause the hook to update on every render. Please provide a dependency array or use only worklet functions instead.`
-    );
-    return undefined;
-  }
-
-  return result;
-}
-
-function areWorkletsEqual(
-  worklet1: WorkletFunction,
-  worklet2: WorkletFunction
-) {
-  if (worklet1.__workletHash === worklet2.__workletHash) {
-    const closure1Keys = Object.keys(worklet1.__closure);
-    const closure2Keys = Object.keys(worklet2.__closure);
-
-    return (
-      closure1Keys.length === closure2Keys.length &&
-      closure1Keys.every(
-        (key) =>
-          key in worklet2.__closure &&
-          worklet1.__closure[key] === worklet2.__closure[key]
-      )
-    );
-  }
-
-  return false;
-}
-
-// This is supposed to work as useEffect comparison.
-export function areDependenciesEqual(
-  nextDependencies: DependencyList,
-  prevDependencies: DependencyList
-) {
-  function is(x: number, y: number) {
-    return (
-      (x === y && (x !== 0 || 1 / x === 1 / y)) ||
-      (Number.isNaN(x) && Number.isNaN(y))
-    );
-  }
-  const objectIs: (nextDeps: unknown, prevDeps: unknown) => boolean =
-    typeof Object.is === 'function' ? Object.is : is;
-
-  function areHookInputsEqual(
-    nextDeps: DependencyList,
-    prevDeps: DependencyList
-  ) {
-    if (!nextDeps || !prevDeps || prevDeps.length !== nextDeps.length) {
-      return false;
-    }
-
-    for (let i = 0; i < prevDeps.length; ++i) {
-      const nextDep = nextDeps[i];
-      const prevDep = prevDeps[i];
-      if (objectIs(nextDep, prevDep)) {
-        continue;
-      }
-      if (!isWorkletFunction(nextDep) || !isWorkletFunction(prevDep)) {
-        return false;
-      }
-      if (!areWorkletsEqual(nextDep, prevDep)) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  return areHookInputsEqual(nextDependencies, prevDependencies);
-}
+import { ReanimatedError } from '../common';
 
 export function isAnimated(prop: unknown) {
   'worklet';

package/src/initializers.ts

@@ -19,6 +19,7 @@ export function initializeReanimatedModule(
   }
 }
 
+// is-tree-shakable-suppress
 if (!SHOULD_BE_USE_WEB) {
   runOnUISync(() => {
     'worklet';

package/src/jestUtils/common.ts

@@ -22,3 +22,13 @@ export const worklet = <Args extends unknown[] = [], ReturnValue = void>(
   fn.__closure = {};
   return fn;
 };
+
+/** Creates a new worklet with the same hash and closure as the original. */
+export const cloneWorklet = <Args extends unknown[] = [], ReturnValue = void>(
+  original: WorkletFunction<Args, ReturnValue>
+): WorkletFunction<Args, ReturnValue> => {
+  const w = worklet<Args, ReturnValue>();
+  w.__workletHash = original.__workletHash;
+  w.__closure = { ...original.__closure };
+  return w;
+};

package/src/jestUtils/index.ts

@@ -2,7 +2,6 @@
 'use strict';
 
 import type React from 'react';
-import type { ReactTestInstance } from 'react-test-renderer';
 
 import { IS_JEST, logger, ReanimatedError } from '../common';
 import type {
@@ -347,12 +346,10 @@ type TestComponent = React.Component<
   }
 >;
 
-export const getAnimatedStyle = (component: ReactTestInstance) => {
-  return getCurrentStyle(
-    // This type assertion is needed to get type checking in the following
-    // functions since `ReactTestInstance` has its `props` defined as `any`.
-    component as unknown as TestComponent
-  );
+export const getAnimatedStyle = (component: {
+  props: Record<string, unknown>;
+}) => {
+  return getCurrentStyle(component as unknown as TestComponent);
 };
 
-export { worklet } from './common';
+export { cloneWorklet, worklet } from './common';

package/src/jestUtils/index.web.ts

@@ -23,4 +23,4 @@ export function getAnimatedStyle() {
   // NOOP
 }
 
-export { worklet } from './common';
+export { cloneWorklet, worklet } from './common';

package/src/platform-specific/jsVersion.ts

@@ -4,4 +4,4 @@
  * version used to build the native part of the library in runtime. Remember to
  * keep this in sync with the version declared in `package.json`
  */
-export const jsVersion = '4.3.0-rc.0';
+export const jsVersion = '4.3.0';

package/src/privateGlobals.d.ts

@@ -24,6 +24,10 @@ declare global {
   var _REANIMATED_VERSION_JS: string | undefined;
   var __reanimatedModuleProxy: ReanimatedModuleProxy | undefined;
   var _log: (value: unknown) => void;
+  var _startProfiling: (meanHzFreq?: number) => void;
+  var _stopProfiling: () => string;
+  var _beginSection: (name: string) => void;
+  var _endSection: () => void;
   var _notifyAboutProgress: (
     tag: number,
     value: Record<string, unknown>