react-native-reanimated 4.2.0 → 4.2.1

package/src/helperTypes.ts

@@ -15,8 +15,8 @@ import type {
   LayoutAnimationFunction,
   SharedValue,
 } from './commonTypes';
+import type { NestedArray } from './createAnimatedComponent/commonTypes';
 import type { CSSStyle } from './css';
-import type { AddArrayPropertyType } from './css/types';
 import type { BaseAnimationBuilder } from './layoutReanimation/animationBuilder/BaseAnimationBuilder';
 import type { ReanimatedKeyframe } from './layoutReanimation/animationBuilder/Keyframe';
 import type { SharedTransition } from './layoutReanimation/SharedTransition';
@@ -47,8 +47,13 @@ type AnimatedStyleProps<Props extends object> = {
 };
 
 /** Component props that are not specially handled by us. */
+type ComponentPropsWithoutStyle<Props extends object> = Omit<
+  Props,
+  keyof PickStyleProps<Props> | 'style'
+>;
+
 type RestProps<Props extends object> = {
-  [K in keyof Omit<Props, keyof PickStyleProps<Props> | 'style'>]:
+  [K in keyof ComponentPropsWithoutStyle<Props>]:
     | Props[K]
     | SharedValue<Props[K]>;
 };
@@ -94,10 +99,6 @@ type SharedTransitionProps = {
   sharedTransitionStyle?: SharedTransition;
 };
 
-type AnimatedPropsProp<Props extends object> = RestProps<Props> &
-  AnimatedStyleProps<Props> &
-  LayoutProps;
-
 export type AnimatedProps<Props extends object> = RestProps<Props> &
   AnimatedStyleProps<Props> &
   LayoutProps & {
@@ -106,9 +107,9 @@ export type AnimatedProps<Props extends object> = RestProps<Props> &
      *
      * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps
      */
-    animatedProps?: AddArrayPropertyType<
-      Partial<AnimatedPropsProp<Props>> | CSSStyle<Props>
-    >;
+    animatedProps?: NestedArray<
+      CSSStyle<ComponentPropsWithoutStyle<Partial<Props>>>
+    >; // TODO - improve type once useAnimatedProps is typed properly. For now it is typed in the same way as the normal style prop, so it is assignable to the CSSStyle type
   } & SharedTransitionProps;
 
 // THE LAND OF THE DEPRECATED

package/src/layoutReanimation/web/animationsManager.ts

@@ -132,7 +132,8 @@ function tryGetAnimationConfig<ComponentProps extends Record<string, unknown>>(
 
   if (isCustomKeyframe) {
     animationName = createCustomKeyFrameAnimation(
-      (config as CustomConfig).definitions as KeyframeDefinitions
+      (config as CustomConfig).definitions as KeyframeDefinitions,
+      animationType
     );
   } else if (typeof config === 'function') {
     animationName = config.presetName;
@@ -144,7 +145,8 @@ function tryGetAnimationConfig<ComponentProps extends Record<string, unknown>>(
   if (hasInitialValues) {
     animationName = createAnimationWithInitialValues(
       animationName,
-      (config as CustomConfig).initialValues as InitialValuesStyleProps
+      (config as CustomConfig).initialValues as InitialValuesStyleProps,
+      animationType
     );
   }
 

package/src/layoutReanimation/web/componentUtils.ts

@@ -1,5 +1,7 @@
 'use strict';
+
 import { logger } from '../../common';
+import { removeElementAnimation } from '../../common/web';
 import { LayoutAnimationType, ReduceMotion } from '../../commonTypes';
 import type { EasingFunctionFactory } from '../../Easing';
 import { EasingNameSymbol } from '../../Easing';
@@ -29,6 +31,28 @@ import {
 } from './Easing.web';
 import { prepareCurvedTransition } from './transition/Curved.web';
 
+function getSnapshotForElement(element: HTMLElement): ReanimatedSnapshot {
+  const existingSnapshot = snapshots.get(element);
+
+  if (existingSnapshot) {
+    return existingSnapshot;
+  }
+
+  const rect = element.getBoundingClientRect();
+
+  const fallbackSnapshot: ReanimatedSnapshot = {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+    scrollOffsets: getElementScrollValue(element),
+  };
+
+  snapshots.set(element, fallbackSnapshot);
+
+  return fallbackSnapshot;
+}
+
 function getEasingFromConfig(config: CustomConfig): string {
   if (!config.easingV) {
     return getEasingByName('linear');
@@ -175,10 +199,16 @@ export function setElementAnimation(
 
   const configureAnimation = () => {
     element.style.animationName = animationName;
-    element.style.animationFillMode = 'backwards';
     element.style.animationDuration = `${duration}s`;
     element.style.animationDelay = `${delay}s`;
     element.style.animationTimingFunction = easing;
+
+    if (
+      animationConfig.animationType === LayoutAnimationType.ENTERING &&
+      delay > 0
+    ) {
+      element.style.animationFillMode = 'backwards';
+    }
   };
 
   if (animationConfig.animationType === LayoutAnimationType.ENTERING) {
@@ -234,7 +264,7 @@ export function setElementAnimation(
   if (!(animationName in Animations)) {
     scheduleAnimationCleanup(animationName, duration + delay, () => {
       if (shouldSavePosition) {
-        setElementPosition(element, snapshots.get(element)!);
+        setElementPosition(element, getSnapshotForElement(element));
       }
 
       maybeRemoveElement();
@@ -317,6 +347,21 @@ function getElementScrollValue(element: HTMLElement): ScrollOffsets {
   return scrollOffsets;
 }
 
+function cleanupEnteringAnimations(element: HTMLElement) {
+  const animationName = element.style.animationName;
+
+  // Check if the animation name indicates it's an entering animation
+  if (animationName && animationName.startsWith('REA-ENTERING-')) {
+    removeElementAnimation(element);
+  }
+
+  for (const child of Array.from(element.children)) {
+    if (child instanceof HTMLElement) {
+      cleanupEnteringAnimations(child);
+    }
+  }
+}
+
 export function handleExitingAnimation(
   element: ReanimatedHTMLElement,
   animationConfig: AnimationConfig
@@ -344,6 +389,10 @@ export function handleExitingAnimation(
   };
   saveScrollPosition(element);
 
+  // Clean up entering animations on all descendants before moving them to the dummy.
+  // This prevents entering animations from restarting when elements are moved to a new parent.
+  cleanupEnteringAnimations(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
@@ -367,7 +416,7 @@ export function handleExitingAnimation(
   };
   restoreScrollPosition(dummy);
 
-  const snapshot = snapshots.get(element)!;
+  const snapshot = getSnapshotForElement(element);
 
   const scrollOffsets = getElementScrollValue(element);
 

package/src/layoutReanimation/web/createAnimation.ts

@@ -2,6 +2,8 @@
 
 import type { TransformsStyle } from 'react-native';
 
+import { maybeAddSuffix } from '../../common';
+import { LayoutAnimationType } from '../../commonTypes';
 import type {
   AnimationData,
   ReanimatedWebTransformProperties,
@@ -19,12 +21,27 @@ import { LinearTransition } from './transition/Linear.web';
 import { SequencedTransition } from './transition/Sequenced.web';
 
 type TransformType = NonNullable<TransformsStyle['transform']>;
+type TransformValue = string | number;
+
+function assignTransformRules(
+  map: Map<string, TransformValue>,
+  transform?: ReanimatedWebTransformProperties[]
+) {
+  if (!transform) {
+    return;
+  }
+
+  for (const rule of transform) {
+    for (const [property, value] of Object.entries(rule)) {
+      map.set(property, value as TransformValue);
+    }
+  }
+}
 
 // Translate values are passed as numbers. However, if `translate` property receives number, it will not automatically
 // convert it to `px`. Therefore if we want to keep transform we have to add 'px' suffix to each of translate values
 // that are present inside transform.
 //
-
 function addPxToTransform(transform: TransformType) {
   type RNTransformProp = NonNullable<(typeof transform)[number]>;
 
@@ -52,7 +69,8 @@ function addPxToTransform(transform: TransformType) {
 }
 
 export function createCustomKeyFrameAnimation(
-  keyframeDefinitions: KeyframeDefinitions
+  keyframeDefinitions: KeyframeDefinitions,
+  animationType: LayoutAnimationType
 ) {
   for (const value of Object.values(keyframeDefinitions)) {
     if (value.transform) {
@@ -66,7 +84,7 @@ export function createCustomKeyFrameAnimation(
     duration: -1,
   };
 
-  animationData.name = generateNextCustomKeyframeName();
+  animationData.name = generateNextCustomKeyframeName(animationType);
 
   // Move keyframe easings one keyframe up (our LA Keyframe definition is different
   // from the CSS keyframes and expects easing to be present in the keyframe to which
@@ -92,46 +110,36 @@ export function createCustomKeyFrameAnimation(
 
 export function createAnimationWithInitialValues(
   animationName: string,
-  initialValues: InitialValuesStyleProps
+  initialValues: InitialValuesStyleProps,
+  animationType: LayoutAnimationType
 ) {
   const animationStyle = structuredClone(AnimationsData[animationName].style);
   const firstAnimationStep = animationStyle['0'];
 
-  const { transform, ...rest } = initialValues;
-  const transformWithPx = addPxToTransform(transform as TransformType);
+  const { transform, originX, originY, ...rest } = initialValues;
+
+  const transformStyle = new Map<string, TransformValue>();
+  assignTransformRules(transformStyle, firstAnimationStep.transform);
 
   if (transform) {
-    // If there was no predefined transform, we can simply assign transform from `initialValues`.
-    if (!firstAnimationStep.transform) {
-      firstAnimationStep.transform = transformWithPx;
-    } else {
-      // Othwerwise we have to merge predefined transform with the one provided in `initialValues`.
-      // To do that, we create `Map` that will contain final transform.
-      const transformStyle = new Map<string, any>();
-
-      // First we assign all of the predefined rules
-      for (const rule of firstAnimationStep.transform) {
-        // In most cases there will be just one iteration
-        for (const [property, value] of Object.entries(rule)) {
-          transformStyle.set(property, value);
-        }
-      }
+    const transformWithPx = addPxToTransform(transform as TransformType);
+    assignTransformRules(transformStyle, transformWithPx);
+  }
 
-      // Then we either add new rule, or override one that already exists.
-      for (const rule of transformWithPx) {
-        for (const [property, value] of Object.entries(rule)) {
-          transformStyle.set(property, value);
-        }
-      }
+  if (originX !== undefined) {
+    transformStyle.set('translateX', maybeAddSuffix(originX, 'px'));
+  }
 
-      // Finally, we convert `Map` with final transform back into array of objects.
-      firstAnimationStep.transform = Array.from(
-        transformStyle,
-        ([property, value]) => ({
-          [property]: value,
-        })
-      );
-    }
+  if (originY !== undefined) {
+    transformStyle.set('translateY', maybeAddSuffix(originY, 'px'));
+  }
+
+  const mergedTransform = Array.from(transformStyle, ([property, value]) => ({
+    [property]: value,
+  }));
+
+  if (transformStyle.size) {
+    firstAnimationStep.transform = mergedTransform;
   }
 
   animationStyle['0'] = {
@@ -140,7 +148,7 @@ export function createAnimationWithInitialValues(
   };
 
   // TODO: Maybe we can extract the logic below into separate function
-  const keyframeName = generateNextCustomKeyframeName();
+  const keyframeName = generateNextCustomKeyframeName(animationType);
 
   const animationObject: AnimationData = {
     name: keyframeName,
@@ -157,8 +165,14 @@ export function createAnimationWithInitialValues(
 
 let customKeyframeCounter = 0;
 
-function generateNextCustomKeyframeName() {
-  return `REA${customKeyframeCounter++}`;
+const ANIMATION_TYPE_STRINGS: Partial<Record<LayoutAnimationType, string>> = {
+  [LayoutAnimationType.ENTERING]: 'ENTERING',
+  [LayoutAnimationType.EXITING]: 'EXITING',
+  [LayoutAnimationType.LAYOUT]: 'LAYOUT',
+};
+
+function generateNextCustomKeyframeName(animationType: LayoutAnimationType) {
+  return `REA-${ANIMATION_TYPE_STRINGS[animationType] ?? ''}-${customKeyframeCounter++}`;
 }
 
 /**
@@ -174,7 +188,9 @@ export function TransitionGenerator(
   transitionType: TransitionType,
   transitionData: TransitionData
 ) {
-  const transitionKeyframeName = generateNextCustomKeyframeName();
+  const transitionKeyframeName = generateNextCustomKeyframeName(
+    LayoutAnimationType.LAYOUT
+  );
   let dummyTransitionKeyframeName;
 
   let transitionObject;
@@ -207,7 +223,9 @@ export function TransitionGenerator(
 
     // Here code block with {} is necessary because of eslint
     case TransitionType.CURVED: {
-      dummyTransitionKeyframeName = generateNextCustomKeyframeName();
+      dummyTransitionKeyframeName = generateNextCustomKeyframeName(
+        LayoutAnimationType.LAYOUT
+      );
 
       const { firstKeyframeObj, secondKeyframeObj } = CurvedTransition(
         transitionKeyframeName,

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.2.0';
+export const jsVersion = '4.2.1';

package/src/updateProps/updateProps.ts

@@ -10,14 +10,11 @@ import {
   processColorsInProps,
   processFilter,
   processTransform,
+  processTransformOrigin,
   ReanimatedError,
   SHOULD_BE_USE_WEB,
 } from '../common';
-import {
-  processBoxShadowWeb,
-  processFilterWeb,
-  processTransformOrigin,
-} from '../common/web';
+import { processBoxShadowWeb, processFilterWeb } from '../common/web';
 import type {
   AnimatedStyle,
   ShadowNodeWrapper,