react-native-reanimated 3.19.3 → 3.19.5

package/src/layoutReanimation/web/createAnimation.ts

@@ -2,6 +2,7 @@
 
 import type { TransformsStyle } from 'react-native';
 
+import { LayoutAnimationType } from '../../commonTypes';
 import type {
   AnimationData,
   ReanimatedWebTransformProperties,
@@ -19,6 +20,26 @@ import { LinearTransition } from './transition/Linear.web';
 import { SequencedTransition } from './transition/Sequenced.web';
 
 type TransformType = NonNullable<TransformsStyle['transform']>;
+type TransformValue = string | number;
+
+function maybeAddPx(value: string | number) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+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
@@ -52,7 +73,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 +88,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 +114,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 { transform, originX, originY, ...rest } = initialValues;
+
+  const transformStyle = new Map<string, TransformValue>();
+  assignTransformRules(transformStyle, firstAnimationStep.transform);
 
   if (transform) {
     const transformWithPx = addPxToTransform(transform as TransformType);
-    // 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);
-        }
-      }
+    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', maybeAddPx(originX));
+  }
 
-      // 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', maybeAddPx(originY));
+  }
+
+  const mergedTransform = Array.from(transformStyle, ([property, value]) => ({
+    [property]: value,
+  }));
+
+  if (transformStyle.size) {
+    firstAnimationStep.transform = mergedTransform;
   }
 
   animationStyle['0'] = {
@@ -140,7 +152,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 +169,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 +192,9 @@ export function TransitionGenerator(
   transitionType: TransitionType,
   transitionData: TransitionData
 ) {
-  const transitionKeyframeName = generateNextCustomKeyframeName();
+  const transitionKeyframeName = generateNextCustomKeyframeName(
+    LayoutAnimationType.LAYOUT
+  );
   let dummyTransitionKeyframeName;
 
   let transitionObject;
@@ -207,7 +227,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/layoutReanimation/web/domUtils.ts

@@ -176,7 +176,7 @@ function findDescendantWithExitingAnimation(
     return;
   }
 
-  if (node.reanimatedDummy && node.removedAfterAnimation === undefined) {
+  if (node.isDummy && node.removedAfterAnimation === undefined) {
     reattachElementToAncestor(node, root);
   }
 

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

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

package/src/mock.ts

@@ -321,7 +321,7 @@ const core = {
 const layoutReanimation = {
   BaseAnimationBuilder: new BaseAnimationMock(),
   ComplexAnimationBuilder: new BaseAnimationMock(),
-  Keyframe: new BaseAnimationMock(),
+  Keyframe: BaseAnimationMock,
   // Flip
   FlipInXUp: new BaseAnimationMock(),
   FlipInYLeft: new BaseAnimationMock(),

package/src/platform-specific/findHostInstance.ts

@@ -1,6 +1,7 @@
 /* eslint-disable camelcase */
 'use strict';
 
+import type { InternalHostInstance } from '../commonTypes';
 import type { IAnimatedComponentInternal } from '../createAnimatedComponent/commonTypes';
 import { ReanimatedError } from '../errors';
 import { isFabric } from '../PlatformChecker';
@@ -68,7 +69,7 @@ function resolveFindHostInstance_DEPRECATED() {
 
 let findHostInstance_DEPRECATED: (ref: unknown) => HostInstance;
 export function findHostInstance(
-  component: IAnimatedComponentInternal | React.Component
+  component: IAnimatedComponentInternal | InternalHostInstance
 ): HostInstance {
   // Fast path for native refs
   const hostInstance = findHostInstanceFastPath(

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 = '3.19.3';
+export const jsVersion = '3.19.5';