react-native-reanimated 3.13.0-rc.2 → 3.13.0

package/src/ViewDescriptorsSet.ts

@@ -1,15 +1,7 @@
 'use strict';
-import { useRef } from 'react';
 import { makeMutable } from './core';
 import type { SharedValue } from './commonTypes';
 import type { Descriptor } from './hook/commonTypes';
-import { shouldBeUseWeb } from './PlatformChecker';
-
-export interface ViewRefSet<T> {
-  items: Set<T>;
-  add: (item: T) => void;
-  remove: (item: T) => void;
-}
 
 export interface ViewDescriptorsSet {
   shareableViewDescriptors: SharedValue<Descriptor[]>;
@@ -51,37 +43,3 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   };
   return data;
 }
-
-const SHOULD_BE_USE_WEB = shouldBeUseWeb();
-
-export const useViewRefSet = SHOULD_BE_USE_WEB
-  ? useViewRefSetJS
-  : useViewRefSetNative;
-
-function useViewRefSetNative() {
-  // Stub native implementation.
-  return undefined;
-}
-
-function useViewRefSetJS<T>(): ViewRefSet<T> {
-  const ref = useRef<ViewRefSet<T> | null>(null);
-  if (ref.current === null) {
-    const data: ViewRefSet<T> = {
-      items: new Set(),
-
-      add: (item: T) => {
-        if (data.items.has(item)) {
-          return;
-        }
-        data.items.add(item);
-      },
-
-      remove: (item: T) => {
-        data.items.delete(item);
-      },
-    };
-    ref.current = data;
-  }
-
-  return ref.current;
-}

package/src/createAnimatedComponent/InlinePropManager.ts

@@ -8,14 +8,11 @@ import type {
 } from './commonTypes';
 import { flattenArray } from './utils';
 import { makeViewDescriptorsSet } from '../ViewDescriptorsSet';
-import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet';
+import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
 import { adaptViewConfig } from '../ConfigHelper';
 import updateProps from '../UpdateProps';
 import { stopMapper, startMapper } from '../mappers';
 import { isSharedValue } from '../isSharedValue';
-import { shouldBeUseWeb } from '../PlatformChecker';
-
-const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
 function isInlineStyleTransform(transform: unknown): boolean {
   if (!Array.isArray(transform)) {
@@ -160,13 +157,10 @@ export class InlinePropManager implements IInlinePropManager {
       const shareableViewDescriptors =
         this._inlinePropsViewDescriptors.shareableViewDescriptors;
 
-      const maybeViewRef = SHOULD_BE_USE_WEB
-        ? ({ items: new Set([animatedComponent]) } as ViewRefSet<unknown>) // see makeViewsRefSet
-        : undefined;
       const updaterFunction = () => {
         'worklet';
         const update = getInlinePropsUpdate(newInlineProps);
-        updateProps(shareableViewDescriptors, update, maybeViewRef);
+        updateProps(shareableViewDescriptors, update);
       };
       this._inlineProps = newInlineProps;
       if (this._inlinePropsMapperId) {

package/src/createAnimatedComponent/PropsFilter.tsx

@@ -47,8 +47,6 @@ export class PropsFilter implements IPropsFilter {
         const processedStyle: StyleProps = styles.map((style) => {
           if (style && style.viewDescriptors) {
             // this is how we recognize styles returned by useAnimatedStyle
-            // TODO - refactor, since `viewsRef` is only present on Web
-            style.viewsRef?.add(component);
             if (this._requiresNewInitials) {
               this._initialStyle = {
                 ...style.initial.value,
@@ -72,8 +70,6 @@ export class PropsFilter implements IPropsFilter {
           Object.keys(animatedProp.initial.value).forEach((initialValueKey) => {
             props[initialValueKey] =
               animatedProp.initial?.value[initialValueKey];
-            // TODO - refacotr, since `viewsRef` is only present on Web
-            animatedProp.viewsRef?.add(component);
           });
         }
       } else if (

package/src/createAnimatedComponent/commonTypes.ts

@@ -6,7 +6,7 @@ import type {
   StyleProps,
 } from '../commonTypes';
 import type { ViewConfig } from '../ConfigHelper';
-import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet';
+import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
 import type {
   BaseAnimationBuilder,
   EntryExitAnimationFunction,
@@ -17,7 +17,6 @@ import type { SkipEnteringContext } from '../component/LayoutAnimationConfig';
 
 export interface AnimatedProps extends Record<string, unknown> {
   viewDescriptors?: ViewDescriptorsSet;
-  viewsRef?: ViewRefSet<unknown>;
   initial?: SharedValue<StyleProps>;
 }
 

package/src/createAnimatedComponent/createAnimatedComponent.tsx

@@ -239,11 +239,7 @@ export function createAnimatedComponent(
     }
 
     _detachStyles() {
-      if (IS_WEB && this._styles !== null) {
-        for (const style of this._styles) {
-          style.viewsRef.remove(this);
-        }
-      } else if (this._componentViewTag !== -1 && this._styles !== null) {
+      if (this._componentViewTag !== -1 && this._styles !== null) {
         for (const style of this._styles) {
           style.viewDescriptors.remove(this._componentViewTag);
         }

package/src/hook/commonTypes.ts

@@ -13,13 +13,14 @@ import type {
   ViewStyle,
   NativeScrollEvent,
 } from 'react-native';
-import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet';
+import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
 import type { AnimatedStyle } from '../helperTypes';
+import type { ReanimatedHTMLElement } from '../js-reanimated';
 
 export type DependencyList = Array<unknown> | undefined;
 
 export interface Descriptor {
-  tag: number;
+  tag: number | ReanimatedHTMLElement;
   name: string;
   shadowNodeWrapper: ShadowNodeWrapper;
 }
@@ -96,10 +97,6 @@ export interface AnimatedStyleHandle<
     value: AnimatedStyle<Style>;
     updater: () => AnimatedStyle<Style>;
   };
-  /**
-   * @remarks `viewsRef` is only defined in Web implementation.
-   */
-  viewsRef: ViewRefSet<unknown> | undefined;
 }
 
 export interface JestAnimatedStyleHandle<

package/src/hook/useAnimatedStyle.ts

@@ -19,8 +19,8 @@ import type {
   Descriptor,
   JestAnimatedStyleHandle,
 } from './commonTypes';
-import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet';
-import { makeViewDescriptorsSet, useViewRefSet } from '../ViewDescriptorsSet';
+import type { ViewDescriptorsSet } from '../ViewDescriptorsSet';
+import { makeViewDescriptorsSet } from '../ViewDescriptorsSet';
 import { isJest, shouldBeUseWeb } from '../PlatformChecker';
 import type {
   AnimationObject,
@@ -178,7 +178,6 @@ function styleUpdater(
   viewDescriptors: SharedValue<Descriptor[]>,
   updater: WorkletFunction<[], AnimatedStyle<any>> | (() => AnimatedStyle<any>),
   state: AnimatedState,
-  maybeViewRef: ViewRefSet<any> | undefined,
   animationsActive: SharedValue<boolean>,
   isAnimatedProps = false
 ): void {
@@ -234,7 +233,7 @@ function styleUpdater(
       }
 
       if (updates) {
-        updateProps(viewDescriptors, updates, maybeViewRef);
+        updateProps(viewDescriptors, updates);
       }
 
       if (!allFinished) {
@@ -252,14 +251,14 @@ function styleUpdater(
     }
 
     if (hasNonAnimatedValues) {
-      updateProps(viewDescriptors, nonAnimatedNewValues, maybeViewRef);
+      updateProps(viewDescriptors, nonAnimatedNewValues);
     }
   } else {
     state.isAnimationCancelled = true;
     state.animations = [];
 
     if (!shallowEqual(oldValues, newValues)) {
-      updateProps(viewDescriptors, newValues, maybeViewRef, isAnimatedProps);
+      updateProps(viewDescriptors, newValues, isAnimatedProps);
     }
   }
   state.last = newValues;
@@ -269,7 +268,6 @@ function jestStyleUpdater(
   viewDescriptors: SharedValue<Descriptor[]>,
   updater: WorkletFunction<[], AnimatedStyle<any>> | (() => AnimatedStyle<any>),
   state: AnimatedState,
-  maybeViewRef: ViewRefSet<any> | undefined,
   animationsActive: SharedValue<boolean>,
   animatedStyle: MutableRefObject<AnimatedStyle<any>>,
   adapters: AnimatedPropsAdapterFunction[]
@@ -326,13 +324,7 @@ function jestStyleUpdater(
     });
 
     if (Object.keys(updates).length) {
-      updatePropsJestWrapper(
-        viewDescriptors,
-        updates,
-        maybeViewRef,
-        animatedStyle,
-        adapters
-      );
+      updatePropsJestWrapper(viewDescriptors, updates, animatedStyle, adapters);
     }
 
     if (!allFinished) {
@@ -358,13 +350,7 @@ function jestStyleUpdater(
   state.last = newValues;
 
   if (!shallowEqual(oldValues, newValues)) {
-    updatePropsJestWrapper(
-      viewDescriptors,
-      newValues,
-      maybeViewRef,
-      animatedStyle,
-      adapters
-    );
+    updatePropsJestWrapper(viewDescriptors, newValues, animatedStyle, adapters);
   }
 }
 
@@ -423,7 +409,6 @@ export function useAnimatedStyle<Style extends DefaultStyle>(
   adapters?: AnimatedPropsAdapterWorklet | AnimatedPropsAdapterWorklet[] | null,
   isAnimatedProps = false
 ): AnimatedStyleHandle<Style> | JestAnimatedStyleHandle<Style> {
-  const viewsRef: ViewRefSet<unknown> | undefined = useViewRefSet();
   const animatedUpdaterData = useRef<AnimatedUpdaterData>();
   let inputs = Object.values(updater.__closure ?? {});
   if (SHOULD_BE_USE_WEB) {
@@ -506,7 +491,6 @@ For more, see the docs: \`https://docs.swmansion.com/react-native-reanimated/doc
           shareableViewDescriptors,
           updater,
           remoteState,
-          viewsRef,
           areAnimationsActive,
           jestAnimatedStyle,
           adaptersArray
@@ -519,7 +503,6 @@ For more, see the docs: \`https://docs.swmansion.com/react-native-reanimated/doc
           shareableViewDescriptors,
           updaterFn,
           remoteState,
-          viewsRef,
           areAnimationsActive,
           isAnimatedProps
         );
@@ -547,8 +530,8 @@ For more, see the docs: \`https://docs.swmansion.com/react-native-reanimated/doc
 
   if (!animatedStyleHandle.current) {
     animatedStyleHandle.current = isJest()
-      ? { viewDescriptors, initial, viewsRef, jestAnimatedStyle }
-      : { initial, viewsRef, viewDescriptors };
+      ? { viewDescriptors, initial, jestAnimatedStyle }
+      : { viewDescriptors, initial };
   }
 
   return animatedStyleHandle.current;

package/src/hook/useFrameCallback.ts

@@ -43,11 +43,11 @@ export function useFrameCallback(
   useEffect(() => {
     ref.current.callbackId =
       frameCallbackRegistry.registerFrameCallback(callback);
+    const memoizedId = ref.current.callbackId;
     ref.current.setActive(ref.current.isActive);
 
     return () => {
-      frameCallbackRegistry.unregisterFrameCallback(ref.current.callbackId);
-      ref.current.callbackId = -1;
+      frameCallbackRegistry.unregisterFrameCallback(memoizedId);
     };
   }, [callback, autostart]);
 

package/src/hook/useWorkletCallback.ts

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import type { DependencyList } from './commonTypes';
 
 /**
- * @deprecated don't use
+ * @deprecated use React.useCallback instead
  */
 export function useWorkletCallback<Args extends unknown[], ReturnValue>(
   worklet: (...args: Args) => ReturnValue,

package/src/js-reanimated/index.ts

@@ -2,37 +2,13 @@
 import JSReanimated from './JSReanimated';
 import type { StyleProps } from '../commonTypes';
 import type { AnimatedStyle } from '../helperTypes';
-import { isWeb } from '../PlatformChecker';
+import {
+  createReactDOMStyle,
+  createTransformValue,
+  createTextShadowValue,
+} from './webUtils';
 import { PropsAllowlists } from '../propsAllowlists';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let createReactDOMStyle: (style: any) => any;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let createTransformValue: (transform: any) => any;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let createTextShadowValue: (style: any) => void | string;
-
-if (isWeb()) {
-  try {
-    createReactDOMStyle =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
-  } catch (e) {}
-
-  try {
-    // React Native Web 0.19+
-    createTransformValue =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('react-native-web/dist/exports/StyleSheet/preprocess').createTransformValue;
-  } catch (e) {}
-
-  try {
-    createTextShadowValue =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      require('react-native-web/dist/exports/StyleSheet/preprocess').createTextShadowValue;
-  } catch (e) {}
-}
-
 const reanimatedJS = new JSReanimated();
 
 global._makeShareableClone = () => {
@@ -77,17 +53,15 @@ export interface ReanimatedHTMLElement extends HTMLElement {
 export const _updatePropsJS = (
   // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
   updates: StyleProps | AnimatedStyle<any>,
-  viewRef: {
-    _component?: (JSReanimatedComponent | ReanimatedHTMLElement) & {
-      getAnimatableRef?: () => JSReanimatedComponent | ReanimatedHTMLElement;
-    };
+  viewRef: (JSReanimatedComponent | ReanimatedHTMLElement) & {
+    getAnimatableRef?: () => JSReanimatedComponent | ReanimatedHTMLElement;
   },
   isAnimatedProps?: boolean
 ): void => {
-  if (viewRef._component) {
-    const component = viewRef._component.getAnimatableRef
-      ? viewRef._component.getAnimatableRef()
-      : viewRef._component;
+  if (viewRef) {
+    const component = viewRef.getAnimatableRef
+      ? viewRef.getAnimatableRef()
+      : viewRef;
     const [rawStyles] = Object.keys(updates).reduce(
       (acc: [StyleProps, AnimatedStyle<any>], key) => {
         const value = updates[key];

package/src/js-reanimated/webUtils.ts

@@ -0,0 +1,8 @@
+'use strict';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createReactDOMStyle: (style: any) => any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createTransformValue: (transform: any) => any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createTextShadowValue: (style: any) => void | string;

package/src/js-reanimated/webUtils.web.ts

@@ -0,0 +1,27 @@
+'use strict';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createReactDOMStyle: (style: any) => any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createTransformValue: (transform: any) => any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export let createTextShadowValue: (style: any) => void | string;
+
+try {
+  createReactDOMStyle =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle').default;
+} catch (e) {}
+
+try {
+  // React Native Web 0.19+
+  createTransformValue =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/preprocess').createTransformValue;
+} catch (e) {}
+
+try {
+  createTextShadowValue =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/preprocess').createTextShadowValue;
+} catch (e) {}

package/src/layoutReanimation/defaultTransitions/CurvedTransition.ts

@@ -20,6 +20,8 @@ export class CurvedTransition
   extends BaseAnimationBuilder
   implements ILayoutAnimationBuilder
 {
+  static presetName = 'CurvedTransition';
+
   easingXV: EasingFunction = Easing.in(Easing.ease);
   easingYV: EasingFunction = Easing.out(Easing.ease);
   easingWidthV: EasingFunction = Easing.in(Easing.exp);

package/src/layoutReanimation/defaultTransitions/EntryExitTransition.ts

@@ -15,6 +15,8 @@ export class EntryExitTransition
   extends BaseAnimationBuilder
   implements ILayoutAnimationBuilder
 {
+  static presetName = 'EntryExitTransition';
+
   enteringV: BaseAnimationBuilder | typeof BaseAnimationBuilder = FadeIn;
 
   exitingV: BaseAnimationBuilder | typeof BaseAnimationBuilder = FadeOut;

package/src/layoutReanimation/defaultTransitions/FadingTransition.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { withSequence, withTiming } from '../../animation';
+import { withDelay, withSequence, withTiming } from '../../animation';
 import type {
   ILayoutAnimationBuilder,
   LayoutAnimationFunction,
@@ -17,6 +17,8 @@ export class FadingTransition
   extends BaseAnimationBuilder
   implements ILayoutAnimationBuilder
 {
+  static presetName = 'FadingTransition';
+
   static createInstance<T extends typeof BaseAnimationBuilder>(
     this: T
   ): InstanceType<T> {
@@ -27,7 +29,7 @@ export class FadingTransition
     const delayFunction = this.getDelayFunction();
     const callback = this.callbackV;
     const delay = this.getDelay();
-    const duration = this.durationV ?? 500;
+    const duration = (this.durationV ?? 500) / 2;
 
     return (values) => {
       'worklet';
@@ -47,21 +49,21 @@ export class FadingTransition
               withTiming(1, { duration })
             )
           ),
-          originX: delayFunction(
+          originX: withDelay(
             delay + duration,
-            withTiming(values.targetOriginX, { duration: 50 })
+            withTiming(values.targetOriginX, { duration: 0 })
           ),
-          originY: delayFunction(
+          originY: withDelay(
             delay + duration,
-            withTiming(values.targetOriginY, { duration: 50 })
+            withTiming(values.targetOriginY, { duration: 0 })
           ),
-          width: delayFunction(
+          width: withDelay(
             delay + duration,
-            withTiming(values.targetWidth, { duration: 50 })
+            withTiming(values.targetWidth, { duration: 0 })
           ),
-          height: delayFunction(
+          height: withDelay(
             delay + duration,
-            withTiming(values.targetHeight, { duration: 50 })
+            withTiming(values.targetHeight, { duration: 0 })
           ),
         },
         callback,

package/src/layoutReanimation/defaultTransitions/JumpingTransition.ts

@@ -18,6 +18,8 @@ export class JumpingTransition
   extends BaseAnimationBuilder
   implements ILayoutAnimationBuilder
 {
+  static presetName = 'JumpingTransition';
+
   static createInstance<T extends typeof BaseAnimationBuilder>(
     this: T
   ): InstanceType<T> {

package/src/layoutReanimation/defaultTransitions/LinearTransition.ts

@@ -17,6 +17,8 @@ export class LinearTransition
   extends ComplexAnimationBuilder
   implements ILayoutAnimationBuilder
 {
+  static presetName = 'LinearTransition';
+
   static createInstance<T extends typeof BaseAnimationBuilder>(
     this: T
   ): InstanceType<T> {

package/src/layoutReanimation/defaultTransitions/SequencedTransition.ts

@@ -17,6 +17,8 @@ export class SequencedTransition
   extends BaseAnimationBuilder
   implements ILayoutAnimationBuilder
 {
+  static presetName = 'SequencedTransition';
+
   reversed = false;
 
   static createInstance<T extends typeof BaseAnimationBuilder>(

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

@@ -0,0 +1,15 @@
+'use strict';
+
+// Those are the easings that can be implemented using Bezier curves.
+// Others should be done as CSS animations
+export const WebEasings = {
+  linear: [0, 0, 1, 1],
+  ease: [0.42, 0, 1, 1],
+  quad: [0.11, 0, 0.5, 0],
+  cubic: [0.32, 0, 0.67, 0],
+  sin: [0.12, 0, 0.39, 0],
+  circle: [0.55, 0, 1, 0.45],
+  exp: [0.7, 0, 0.84, 0],
+};
+
+export type WebEasingsNames = keyof typeof WebEasings;

package/src/layoutReanimation/web/animationParser.ts

@@ -1,5 +1,8 @@
 'use strict';
 
+import { WebEasings } from './Easing.web';
+import type { WebEasingsNames } from './Easing.web';
+
 export interface ReanimatedWebTransformProperties {
   translateX?: string;
   translateY?: string;
@@ -14,7 +17,7 @@ export interface ReanimatedWebTransformProperties {
   skewX?: string;
 }
 
-interface AnimationStyle {
+export interface AnimationStyle {
   opacity?: number;
   transform?: ReanimatedWebTransformProperties[];
 }
@@ -39,9 +42,34 @@ export function convertAnimationObjectToKeyframes(
   let keyframe = `@keyframes ${animationObject.name} { `;
 
   for (const [timestamp, style] of Object.entries(animationObject.style)) {
-    keyframe += `${timestamp}% { `;
+    const step =
+      timestamp === 'from' ? 0 : timestamp === 'to' ? 100 : timestamp;
+
+    keyframe += `${step}% { `;
 
     for (const [property, values] of Object.entries(style)) {
+      if (property === 'easing') {
+        const easingName = (
+          values.name in WebEasings ? values.name : 'linear'
+        ) as WebEasingsNames;
+
+        keyframe += `animation-timing-function: cubic-bezier(${WebEasings[
+          easingName
+        ].toString()});`;
+
+        continue;
+      }
+
+      if (property === 'originX') {
+        keyframe += `left: ${values}px; `;
+        continue;
+      }
+
+      if (property === 'originY') {
+        keyframe += `top: ${values}px; `;
+        continue;
+      }
+
       if (property !== 'transform') {
         keyframe += `${property}: ${values}; `;
         continue;