react-native-reanimated 4.0.3 → 4.1.0-jsx-fix

package/src/initializers.ts

@@ -7,19 +7,21 @@ import {
   registerLoggerConfig,
   SHOULD_BE_USE_WEB,
 } from './common';
+import { initSvgCssSupport } from './css/svg';
+import { getStaticFeatureFlag } from './featureFlags';
 import type { IReanimatedModule } from './ReanimatedModule';
 
 export function initializeReanimatedModule(
   ReanimatedModule: IReanimatedModule
 ) {
-  if (IS_WEB) {
-    return;
-  }
-  if (!ReanimatedModule) {
+  if (!IS_WEB && !ReanimatedModule) {
     throw new ReanimatedError(
       'Tried to initialize Reanimated without a valid ReanimatedModule'
     );
   }
+  if (getStaticFeatureFlag('EXPERIMENTAL_CSS_ANIMATIONS_FOR_SVG_COMPONENTS')) {
+    initSvgCssSupport();
+  }
 }
 
 registerLoggerConfig(DEFAULT_LOGGER_CONFIG);

package/src/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts

@@ -20,8 +20,7 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   massV?: number;
   stiffnessV?: number;
   overshootClampingV?: number;
-  restDisplacementThresholdV?: number;
-  restSpeedThresholdV?: number;
+  energyThresholdV?: number;
   initialValues?: StyleProps;
 
   static createInstance: <T extends typeof BaseAnimationBuilder>(
@@ -195,45 +194,61 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   }
 
   /**
-   * Lets you adjust the rest displacement threshold of the spring animation.
-   * Can be chained alongside other [layout animation
-   * modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
-   *
-   * @param restDisplacementThreshold - The displacement below which the spring
-   *   will snap to the designated position without further oscillations.
+   * @deprecated Use {@link energyThreshold} instead. This method currently does
+   *   nothing and will be removed in the upcoming major version.
    */
   static restDisplacementThreshold<T extends typeof ComplexAnimationBuilder>(
     this: T,
-    restDisplacementThreshold: number
+    _restDisplacementThreshold: number
   ) {
-    const instance = this.createInstance();
-    return instance.restDisplacementThreshold(restDisplacementThreshold);
+    return this.createInstance();
+  }
+
+  /**
+   * @deprecated Use {@link energyThreshold} instead. This method currently does
+   *   nothing and will be removed in the upcoming major version.
+   */
+  restDisplacementThreshold(_restDisplacementThreshold: number) {
+    return this;
+  }
+
+  /**
+   * @deprecated Use {@link energyThreshold} instead. This method currently does
+   *   nothing and will be removed in a future version.
+   */
+  static restSpeedThreshold<T extends typeof ComplexAnimationBuilder>(
+    this: T,
+    _restSpeedThreshold: number
+  ) {
+    return this.createInstance();
   }
 
-  restDisplacementThreshold(restDisplacementThreshold: number) {
-    this.restDisplacementThresholdV = restDisplacementThreshold;
+  /**
+   * @deprecated Use {@link energyThreshold} instead. This method currently does
+   *   nothing and will be removed in a future version.
+   */
+  restSpeedThreshold(_restSpeedThreshold: number): this {
     return this;
   }
 
   /**
-   * Lets you adjust the rest speed threshold of the spring animation. Can be
-   * chained alongside other [layout animation
+   * Lets you adjust the energy threshold level to stop the spring animation.
+   * Can be chained alongside other [layout animation
    * modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
    *
-   * @param restSpeedThreshold - The speed in pixels per second from which the
-   *   spring will snap to the designated position without further
-   *   oscillations.
+   * @param energyThreshold - Relative energy threshold below which the spring
+   *   will snap to `toValue` without further oscillations. Defaults to 6e-9.
    */
-  static restSpeedThreshold<T extends typeof ComplexAnimationBuilder>(
+  static energyThreshold<T extends typeof ComplexAnimationBuilder>(
     this: T,
-    restSpeedThreshold: number
+    energyThreshold: number
   ) {
     const instance = this.createInstance();
-    return instance.restSpeedThreshold(restSpeedThreshold);
+    return instance.energyThreshold(energyThreshold);
   }
 
-  restSpeedThreshold(restSpeedThreshold: number): this {
-    this.restSpeedThresholdV = restSpeedThreshold;
+  energyThreshold(energyThreshold: number): this {
+    this.energyThresholdV = energyThreshold;
     return this;
   }
 
@@ -265,8 +280,7 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
     const mass = this.massV;
     const stiffness = this.stiffnessV;
     const overshootClamping = this.overshootClampingV;
-    const restDisplacementThreshold = this.restDisplacementThresholdV;
-    const restSpeedThreshold = this.restSpeedThresholdV;
+    const energyThreshold = this.energyThresholdV;
 
     const animation = type;
 
@@ -292,11 +306,7 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
         { variableName: 'mass', value: mass },
         { variableName: 'stiffness', value: stiffness },
         { variableName: 'overshootClamping', value: overshootClamping },
-        {
-          variableName: 'restDisplacementThreshold',
-          value: restDisplacementThreshold,
-        },
-        { variableName: 'restSpeedThreshold', value: restSpeedThreshold },
+        { variableName: 'energyThreshold', value: energyThreshold },
         { variableName: 'duration', value: duration },
         { variableName: 'rotate', value: rotate },
       ] as const

package/src/layoutReanimation/animationsManager.ts

@@ -10,7 +10,7 @@ import type {
   SharedValue,
 } from '../commonTypes';
 import { LayoutAnimationType } from '../commonTypes';
-import { makeMutableUI } from '../mutables';
+import { legacy_makeMutableUI as makeMutableUI } from '../mutables';
 
 const TAG_OFFSET = 1e9;
 

package/src/layoutReanimation/web/Easing.web.ts

@@ -1,5 +1,15 @@
 'use strict';
 
+import type { EasingFunctionFactory } from '../../Easing';
+
+type BezierClosure = {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  Bezier: () => void;
+};
+
 // Those are the easings that can be implemented using Bezier curves.
 // Others should be done as CSS animations
 export const WebEasings = {
@@ -16,4 +26,26 @@ export function getEasingByName(easingName: WebEasingsNames) {
   return `cubic-bezier(${WebEasings[easingName].toString()})`;
 }
 
+export function maybeGetBezierEasing(
+  easing: EasingFunctionFactory
+): null | string {
+  if (!('factory' in easing)) {
+    return null;
+  }
+
+  const easingFactory = easing.factory;
+
+  if (!('__closure' in easingFactory)) {
+    return null;
+  }
+
+  const closure = easingFactory.__closure as BezierClosure;
+
+  if (!('Bezier' in closure)) {
+    return null;
+  }
+
+  return `cubic-bezier(${closure.x1}, ${closure.y1}, ${closure.x2}, ${closure.y2})`;
+}
+
 export type WebEasingsNames = keyof typeof WebEasings;

package/src/layoutReanimation/web/componentUtils.ts

@@ -1,6 +1,7 @@
 'use strict';
 import { logger } from '../../common';
 import { LayoutAnimationType, ReduceMotion } from '../../commonTypes';
+import type { EasingFunctionFactory } from '../../Easing';
 import { EasingNameSymbol } from '../../Easing';
 import type { ReanimatedHTMLElement } from '../../ReanimatedModule/js-reanimated';
 import { _updatePropsJS } from '../../ReanimatedModule/js-reanimated';
@@ -14,13 +15,18 @@ import type {
   AnimationConfig,
   AnimationNames,
   CustomConfig,
+  EasingType,
   KeyframeDefinitions,
 } from './config';
 import { Animations, TransitionType } from './config';
 import { TransitionGenerator } from './createAnimation';
 import { scheduleAnimationCleanup } from './domUtils';
 import type { WebEasingsNames } from './Easing.web';
-import { getEasingByName, WebEasings } from './Easing.web';
+import {
+  getEasingByName,
+  maybeGetBezierEasing,
+  WebEasings,
+} from './Easing.web';
 import { prepareCurvedTransition } from './transition/Curved.web';
 
 function getEasingFromConfig(config: CustomConfig): string {
@@ -28,15 +34,25 @@ function getEasingFromConfig(config: CustomConfig): string {
     return getEasingByName('linear');
   }
 
-  const easingName = config.easingV[EasingNameSymbol];
+  const easingName = (config.easingV as EasingType)[EasingNameSymbol];
 
-  if (!(easingName in WebEasings)) {
-    logger.warn(`Selected easing is not currently supported on web.`);
+  if (easingName in WebEasings) {
+    return getEasingByName(easingName as WebEasingsNames);
+  }
+
+  const bezierEasing = maybeGetBezierEasing(
+    config.easingV as EasingFunctionFactory
+  );
+
+  if (!bezierEasing) {
+    logger.warn(
+      `Selected easing is not currently supported on web. Using linear easing instead.`
+    );
 
     return getEasingByName('linear');
   }
 
-  return getEasingByName(easingName as WebEasingsNames);
+  return bezierEasing;
 }
 
 function getRandomDelay(maxDelay = 1000) {
@@ -173,27 +189,35 @@ export function setElementAnimation(
     configureAnimation();
   }
 
+  const maybeRemoveElement = () => {
+    if (element.reanimatedDummy && parent?.contains(element)) {
+      element.removedAfterAnimation = true;
+      parent.removeChild(element);
+    }
+  };
+
+  let wasCallbackCalled = false;
+  const maybeCallCallback = (finished: boolean) => {
+    if (!wasCallbackCalled && animationConfig.callback) {
+      animationConfig.callback(finished);
+      wasCallbackCalled = true;
+    }
+  };
+
   element.onanimationend = () => {
     if (shouldSavePosition) {
       saveSnapshot(element);
     }
 
-    if (parent?.contains(element)) {
-      element.removedAfterAnimation = true;
-      parent.removeChild(element);
-    }
+    maybeRemoveElement();
+    maybeCallCallback(true);
 
-    animationConfig.callback?.(true);
     element.removeEventListener('animationcancel', animationCancelHandler);
   };
 
   const animationCancelHandler = () => {
-    animationConfig.callback?.(false);
-
-    if (parent?.contains(element)) {
-      element.removedAfterAnimation = true;
-      parent.removeChild(element);
-    }
+    maybeRemoveElement();
+    maybeCallCallback(false);
 
     element.removeEventListener('animationcancel', animationCancelHandler);
   };
@@ -212,6 +236,9 @@ export function setElementAnimation(
       if (shouldSavePosition) {
         setElementPosition(element, snapshots.get(element)!);
       }
+
+      maybeRemoveElement();
+      maybeCallCallback(false);
     });
   }
 }
@@ -301,6 +328,20 @@ export function handleExitingAnimation(
   element.style.animationName = '';
   dummy.style.animationName = '';
 
+  // Moving elements in DOM resets their scroll positions
+  // so we memorize them here and restore after
+  const scrollPositions = new Map<Element, { top: number; left: number }>();
+  const saveScrollPosition = (node: Element) => {
+    scrollPositions.set(node, {
+      top: node.scrollTop,
+      left: node.scrollLeft,
+    });
+    for (const child of Array.from(node.children)) {
+      saveScrollPosition(child);
+    }
+  };
+  saveScrollPosition(element);
+
   // After cloning the element, we want to move all children from original element to its clone. This is because original element
   // will be unmounted, therefore when this code executes in child component, parent will be either empty or removed soon.
   // Using element.cloneNode(true) doesn't solve the problem, because it creates copy of children and we won't be able to set their animations
@@ -312,6 +353,18 @@ export function handleExitingAnimation(
 
   parent?.appendChild(dummy);
 
+  const restoreScrollPosition = (node: Element) => {
+    const scrollPosition = scrollPositions.get(node === dummy ? element : node);
+    if (scrollPosition) {
+      node.scrollTop = scrollPosition.top;
+      node.scrollLeft = scrollPosition.left;
+    }
+    for (const child of Array.from(node.children)) {
+      restoreScrollPosition(child);
+    }
+  };
+  restoreScrollPosition(dummy);
+
   const snapshot = snapshots.get(element)!;
 
   const scrollOffsets = getElementScrollValue(element);

package/src/layoutReanimation/web/config.ts

@@ -4,6 +4,7 @@ import type {
   ReduceMotion,
   StyleProps,
 } from '../../commonTypes';
+import type { EasingFunctionFactory } from '../../Easing';
 import {
   BounceIn,
   BounceInData,
@@ -62,13 +63,13 @@ export interface AnimationConfig {
   reversed: boolean;
 }
 
-interface EasingType {
+export interface EasingType {
   (): number;
   [EasingNameSymbol: symbol]: string;
 }
 
 export interface CustomConfig {
-  easingV?: EasingType;
+  easingV?: EasingType | EasingFunctionFactory;
   easingXV?: EasingType;
   easingYV?: EasingType;
   durationV?: number;

package/src/layoutReanimation/web/domUtils.ts

@@ -118,7 +118,7 @@ function removeWebAnimation(
   }
 }
 
-const timeoutScale = 1.25; // We use this value to enlarge timeout duration. It can prove useful if animation lags.
+const timeoutScale = 5; // We use this value to enlarge timeout duration. It can prove useful if animation lags.
 const frameDurationMs = 16; // Just an approximation.
 const minimumFrames = 10;
 

package/src/layoutReanimation/web/transition/Curved.web.ts

@@ -93,6 +93,7 @@ function prepareDummy(
   };
 
   const dummy = element.cloneNode(true) as ReanimatedHTMLElement;
+  dummy.reanimatedDummy = true;
   resetStyle(dummy);
 
   return { dummy, dummyAnimationConfig };

package/src/mock.ts

@@ -310,7 +310,7 @@ const core = {
   createWorkletRuntime: NOOP,
   runOnRuntime: NOOP,
   makeMutable: ID,
-  makeShareableCloneRecursive: ID,
+  createSerializable: ID,
   isReanimated3: () => false,
   // isConfigured: ADD ME IF NEEDED
   enableLayoutAnimations: NOOP,

package/src/mutables.ts

@@ -1,13 +1,16 @@
 'use strict';
+import type { Synchronizable } from 'react-native-worklets';
 import {
+  createSerializable,
+  createSynchronizable,
   executeOnUIRuntimeSync,
-  makeShareableCloneRecursive,
   runOnUI,
-  shareableMappingCache,
+  serializableMappingCache,
 } from 'react-native-worklets';
 
 import { IS_JEST, logger, ReanimatedError, SHOULD_BE_USE_WEB } from './common';
 import type { Mutable } from './commonTypes';
+import { getStaticFeatureFlag } from './featureFlags';
 import { isFirstReactRender, isReactRendering } from './reactUtils';
 import { valueSetter } from './valueSetter';
 
@@ -94,10 +97,15 @@ function hideInternalValueProp<Value>(mutable: PartialMutable<Value>) {
   });
 }
 
-export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
+// eslint-disable-next-line camelcase
+function experimental_makeMutableUI<Value>(
+  initial: Value,
+  dirtyFlag: Synchronizable<boolean>
+): Mutable<Value> {
   'worklet';
   const listeners = new Map<number, Listener<Value>>();
   let value = initial;
+  let isDirty = false;
 
   const mutable: PartialMutable<Value> = {
     get value() {
@@ -110,6 +118,9 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
       return value;
     },
     set _value(newValue: Value) {
+      if (!isDirty) {
+        this.setDirty!(true);
+      }
       value = newValue;
       listeners.forEach((listener) => {
         listener(newValue);
@@ -128,6 +139,10 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
     removeListener: (id: number) => {
       listeners.delete(id);
     },
+    setDirty: (dirty: boolean) => {
+      dirtyFlag.setBlocking(dirty);
+      isDirty = dirty;
+    },
 
     _animation: null,
     _isReanimatedSharedValue: true,
@@ -139,11 +154,128 @@ export function makeMutableUI<Value>(initial: Value): Mutable<Value> {
   return mutable as Mutable<Value>;
 }
 
+// eslint-disable-next-line camelcase
+export function legacy_makeMutableUI<Value>(initial: Value): Mutable<Value> {
+  'worklet';
+  const listeners = new Map<number, Listener<Value>>();
+  let value = initial;
+
+  const mutable: PartialMutable<Value> = {
+    get value() {
+      return value;
+    },
+    set value(newValue) {
+      valueSetter(mutable as Mutable<Value>, newValue);
+    },
+    get _value(): Value {
+      return value;
+    },
+    set _value(newValue: Value) {
+      value = newValue;
+      listeners.forEach((listener) => {
+        listener(newValue);
+      });
+    },
+    modify: (modifier, forceUpdate = true) => {
+      valueSetter(
+        mutable as Mutable<Value>,
+        modifier !== undefined ? modifier(value) : value,
+        forceUpdate
+      );
+    },
+    addListener: (id: number, listener: Listener<Value>) => {
+      listeners.set(id, listener);
+    },
+    removeListener: (id: number) => {
+      listeners.delete(id);
+    },
+
+    _animation: null,
+    _isReanimatedSharedValue: true,
+  };
+
+  hideInternalValueProp(mutable);
+  addCompilerSafeGetAndSet(mutable);
+
+  return mutable as Mutable<Value>;
+}
+
+const USE_SYNCHRONIZABLE_FOR_MUTABLES = getStaticFeatureFlag(
+  'USE_SYNCHRONIZABLE_FOR_MUTABLES'
+);
+
+// eslint-disable-next-line camelcase
+function experimental_makeMutableNative<Value>(initial: Value): Mutable<Value> {
+  let latest = initial;
+  const dirtyFlag = createSynchronizable(false);
+  const handle = createSerializable({
+    __init: () => {
+      'worklet';
+      return experimental_makeMutableUI(initial, dirtyFlag);
+    },
+  });
+
+  const mutable: PartialMutable<Value> = {
+    get value(): Value {
+      checkInvalidReadDuringRender();
+      if (dirtyFlag.getBlocking()) {
+        const uiValueGetter = executeOnUIRuntimeSync((sv: Mutable<Value>) => {
+          sv.setDirty!(false);
+          return sv.value;
+        });
+        latest = uiValueGetter(mutable as Mutable<Value>);
+      }
+      return latest;
+    },
+    set value(newValue) {
+      checkInvalidWriteDuringRender();
+      runOnUI(() => {
+        mutable.value = newValue;
+      })();
+    },
+
+    get _value(): Value {
+      throw new ReanimatedError(
+        'Reading from `_value` directly is only possible on the UI runtime. Perhaps you passed an Animated Style to a non-animated component?'
+      );
+    },
+    set _value(_newValue: Value) {
+      throw new ReanimatedError(
+        'Setting `_value` directly is only possible on the UI runtime. Perhaps you want to assign to `value` instead?'
+      );
+    },
+
+    modify: (modifier, forceUpdate = true) => {
+      runOnUI(() => {
+        mutable.modify(modifier, forceUpdate);
+      })();
+    },
+    addListener: () => {
+      throw new ReanimatedError(
+        'Adding listeners is only possible on the UI runtime.'
+      );
+    },
+    removeListener: () => {
+      throw new ReanimatedError(
+        'Removing listeners is only possible on the UI runtime.'
+      );
+    },
+
+    _isReanimatedSharedValue: true,
+  };
+
+  hideInternalValueProp(mutable);
+  addCompilerSafeGetAndSet(mutable);
+
+  serializableMappingCache.set(mutable, handle);
+  return mutable as Mutable<Value>;
+}
+
 function makeMutableNative<Value>(initial: Value): Mutable<Value> {
-  const handle = makeShareableCloneRecursive({
+  const handle = createSerializable({
     __init: () => {
       'worklet';
-      return makeMutableUI(initial);
+      return legacy_makeMutableUI(initial);
     },
   });
 
@@ -195,7 +327,7 @@ function makeMutableNative<Value>(initial: Value): Mutable<Value> {
   hideInternalValueProp(mutable);
   addCompilerSafeGetAndSet(mutable);
 
-  shareableMappingCache.set(mutable, handle);
+  serializableMappingCache.set(mutable, handle);
   return mutable as Mutable<Value>;
 }
 
@@ -256,7 +388,10 @@ function makeMutableWeb<Value>(initial: Value): Mutable<Value> {
 
 export const makeMutable = SHOULD_BE_USE_WEB
   ? makeMutableWeb
-  : makeMutableNative;
+  : USE_SYNCHRONIZABLE_FOR_MUTABLES
+    ? // eslint-disable-next-line camelcase
+      experimental_makeMutableNative
+    : makeMutableNative;
 
 interface JestMutable<TValue> extends Mutable<TValue> {
   toJSON: () => string;

package/src/platform-specific/findHostInstance.ts

@@ -2,7 +2,8 @@
 'use strict';
 
 import { ReanimatedError } from '../common';
-import type { IAnimatedComponentInternal } from '../createAnimatedComponent/commonTypes';
+import type { WrapperRef } from '../commonTypes';
+import type { IAnimatedComponentInternalBase } from '../createAnimatedComponent/commonTypes';
 
 export type HostInstance = {
   __internalInstanceHandle?: Record<string, unknown>;
@@ -45,11 +46,11 @@ function resolveFindHostInstance_DEPRECATED() {
 
 let findHostInstance_DEPRECATED: (ref: unknown) => HostInstance;
 export function findHostInstance(
-  component: IAnimatedComponentInternal | React.Component
+  ref: IAnimatedComponentInternalBase | WrapperRef
 ): HostInstance {
   // Fast path for native refs
   const hostInstance = findHostInstanceFastPath(
-    (component as IAnimatedComponentInternal)._componentRef as HostInstance
+    (ref as IAnimatedComponentInternalBase)._componentRef as HostInstance
   );
   if (hostInstance !== undefined) {
     return hostInstance;
@@ -63,8 +64,8 @@ export function findHostInstance(
     a valid React ref.
   */
   return findHostInstance_DEPRECATED(
-    (component as IAnimatedComponentInternal)._hasAnimatedRef
-      ? (component as IAnimatedComponentInternal)._componentRef
-      : component
+    (ref as IAnimatedComponentInternalBase)._hasAnimatedRef
+      ? (ref as IAnimatedComponentInternalBase)._componentRef
+      : ref
   );
 }

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.0.3';
+export const jsVersion = '4.1.0-jsx-fix';

package/src/platform-specific/workletsVersion.ts

@@ -4,9 +4,10 @@
 import validateWorkletsVersion from 'react-native-reanimated/scripts/validate-worklets-version';
 
 import { ReanimatedError } from '../common/errors';
+import { jsVersion as reanimatedVersion } from './jsVersion';
 
 export function assertWorkletsVersion() {
-  const result = validateWorkletsVersion();
+  const result = validateWorkletsVersion(reanimatedVersion);
 
   if (!result.ok) {
     throw new ReanimatedError(result.message);