From 188de256190fe03dec6e51518abcebadb4970f38 Mon Sep 17 00:00:00 2001
From: Krzysztof Piaskowy <krzysztof.piaskowy@swmansion.com>
Date: Mon, 1 Jul 2024 11:34:24 +0200
Subject: [PATCH] Fix FadingTransition (#6183)

## Summary

This PR aims to fix some unexpected behaviour during `FadingTransition`.

| before | after |
| --- | --- |
| <video
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/e855c796-a926-48bf-b55d-80014694043d"
/> | <video
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/004bd2f6-2bb7-41b2-af1d-6d98a94908c0"
/> |

Expected behavior:
- The component stays in the original position.
- Starts the fade-out animation.
- Wen component is invisible, changes position to the target position.
- Starts the fade-in animation.

In the previous approach, when the `delayFunction` was not specified
(when no one called `.delay()`), the component jumped to the final
position after 50ms instead of waiting until the component became
invisible.

## Test plan

I tested it on the example from
https://github.com/software-mansion/react-native-reanimated/pull/6151
---
 .../defaultTransitions/FadingTransition.ts     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/FadingTransition.ts b/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/FadingTransition.ts
index 2c1f1b21191..0ac4e993c7a 100644
--- a/packages/react-native-reanimated/src/layoutReanimation/defaultTransitions/FadingTransition.ts
+++ b/packages/react-native-reanimated/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,
@@ -49,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,