react-native-reanimated 3.19.0 → 3.19.2

package/lib/typescript/layoutReanimation/web/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/layoutReanimation/web/config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACX,MAAM,mBAAmB,CAAC;AAoC3B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;AAErE,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;AAEjE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,mBAAmB,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,UAAU;IAClB,IAAI,MAAM,CAAC;IACX,CAAC,gBAAgB,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,oBAAY,cAAc;IACxB,MAAM,IAAA;IACN,SAAS,IAAA;IACT,MAAM,IAAA;IACN,OAAO,IAAA;IACP,MAAM,IAAA;IACN,UAAU,IAAA;CACX;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoBxD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC;AACrD,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,cAAc,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/layoutReanimation/web/config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAoC1D,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;AAErE,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,IAAI,EAC3B,cAAc,CACf,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,mBAAmB,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,MAAM,CAAC;IACX,CAAC,gBAAgB,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;IAC7C,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,oBAAY,cAAc;IACxB,MAAM,IAAA;IACN,SAAS,IAAA;IACT,MAAM,IAAA;IACN,OAAO,IAAA;IACP,MAAM,IAAA;IACN,UAAU,IAAA;CACX;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoBxD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC;AACrD,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,cAAc,CAAC"}

package/lib/typescript/layoutReanimation/web/createAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createAnimation.d.ts","sourceRoot":"","sources":["../../../../src/layoutReanimation/web/createAnimation.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,EAAkB,cAAc,EAAE,MAAM,UAAU,CAAC;AA0C1D,wBAAgB,6BAA6B,CAC3C,mBAAmB,EAAE,mBAAmB,UAqBzC;AAED,wBAAgB,gCAAgC,CAC9C,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,uBAAuB,UA6DvC;AAQD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc;;;EAkE/B"}
+{"version":3,"file":"createAnimation.d.ts","sourceRoot":"","sources":["../../../../src/layoutReanimation/web/createAnimation.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,EAAkB,cAAc,EAAE,MAAM,UAAU,CAAC;AA0C1D,wBAAgB,6BAA6B,CAC3C,mBAAmB,EAAE,mBAAmB,UAoCzC;AAED,wBAAgB,gCAAgC,CAC9C,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,uBAAuB,UA6DvC;AAQD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc;;;EAkE/B"}

package/lib/typescript/layoutReanimation/web/transition/Curved.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Curved.web.d.ts","sourceRoot":"","sources":["../../../../../src/layoutReanimation/web/transition/Curved.web.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAgGjD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,qBAAqB,EAC9B,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,cAAc,EAC9B,2BAA2B,EAAE,MAAM;;;EAYpC;AAED,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;EAoC/B"}
+{"version":3,"file":"Curved.web.d.ts","sourceRoot":"","sources":["../../../../../src/layoutReanimation/web/transition/Curved.web.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AACrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAiGjD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,qBAAqB,EAC9B,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,cAAc,EAC9B,2BAA2B,EAAE,MAAM;;;EAYpC;AAED,wBAAgB,gBAAgB,CAC9B,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;EAoC/B"}

package/lib/typescript/platform-specific/jsVersion.d.ts

@@ -3,5 +3,5 @@
  * 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 declare const jsVersion = "3.19.0";
+export declare const jsVersion = "3.19.2";
 //# sourceMappingURL=jsVersion.d.ts.map

package/lib/typescript/platformFunctions/scrollTo.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scrollTo.web.d.ts","sourceRoot":"","sources":["../../../src/platformFunctions/scrollTo.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,EAC1C,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAC3B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,QAAQ,EAAE,OAAO,QAUlB"}
+{"version":3,"file":"scrollTo.web.d.ts","sourceRoot":"","sources":["../../../src/platformFunctions/scrollTo.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGvD,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,EAC1C,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAC3B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,QAAQ,EAAE,OAAO,QAelB"}

package/lib/typescript/runtimes.d.ts

@@ -13,7 +13,7 @@ export type WorkletRuntime = {
  *   the same thread immediately after the runtime is created.
  * @returns WorkletRuntime which is a
  *   `jsi::HostObject<reanimated::WorkletRuntime>` - {@link WorkletRuntime}
- * @see https://docs.swmansion.com/react-native-reanimated/docs/threading/createWorkletRuntime
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/3.x/threading/createWorkletRuntime
  */
 export declare function createWorkletRuntime(name: string, initializer?: () => void): WorkletRuntime;
 export declare function runOnRuntime<Args extends unknown[], ReturnValue>(workletRuntime: WorkletRuntime, worklet: (...args: Args) => ReturnValue): WorkletFunction<Args, ReturnValue>;

package/lib/typescript/threads.d.ts

@@ -5,7 +5,7 @@ export declare const callMicrotasks: () => void;
  * Lets you asynchronously run
  * [workletized](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#to-workletize)
  * functions on the [UI
- * thread](https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI).
+ * thread](https://docs.swmansion.com/react-native-reanimated/docs/3.x/threading/runOnUI).
  *
  * This method does not schedule the work immediately but instead waits for
  * other worklets to be scheduled within the same JS loop. It uses
@@ -13,12 +13,12 @@ export declare const callMicrotasks: () => void;
  * within the same frame boundaries on the UI thread.
  *
  * @param fun - A reference to a function you want to execute on the [UI
- *   thread](https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI)
+ *   thread](https://docs.swmansion.com/react-native-reanimated/docs/3.x/threading/runOnUI)
  *   from the [JavaScript
- *   thread](https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI).
+ *   thread](https://docs.swmansion.com/react-native-reanimated/docs/3.x/threading/runOnUI).
  * @returns A function that accepts arguments for the function passed as the
  *   first argument.
- * @see https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/3.x/threading/runOnUI
  */
 export declare function runOnUI<Args extends unknown[], ReturnValue>(worklet: (...args: Args) => ReturnValue): (...args: Args) => void;
 export declare function executeOnUIRuntimeSync<Args extends unknown[], ReturnValue>(worklet: (...args: Args) => ReturnValue): (...args: Args) => ReturnValue;
@@ -42,7 +42,7 @@ type RemoteFunction<Args extends unknown[], ReturnValue> = ReleaseRemoteFunction
  *   thread from the UI thread.
  * @returns A function that accepts arguments for the function passed as the
  *   first argument.
- * @see https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnJS
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/3.x/threading/runOnJS
  */
 export declare function runOnJS<Args extends unknown[], ReturnValue>(fun: ((...args: Args) => ReturnValue) | RemoteFunction<Args, ReturnValue> | WorkletFunction<Args, ReturnValue>): (...args: Args) => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated",
-  "version": "3.19.0",
+  "version": "3.19.2",
   "description": "More powerful alternative to Animated library for React Native.",
   "scripts": {
     "test": "jest",

package/scripts/reanimated_utils.rb

@@ -53,7 +53,7 @@ end
 
 def assert_minimal_react_native_version(config)
       # If you change the minimal React Native version remember to update Compatibility Table in docs
-  minimalReactNativeVersion = 75
+  minimalReactNativeVersion = 78
   if config[:react_native_minor_version] < minimalReactNativeVersion
     raise "[Reanimated] Unsupported React Native version. Please use #{minimalReactNativeVersion} or newer."
   end

package/src/ViewDescriptorsSet.ts

@@ -7,13 +7,18 @@ export interface ViewDescriptorsSet {
   shareableViewDescriptors: SharedValue<Descriptor[]>;
   add: (item: Descriptor) => void;
   remove: (viewTag: number) => void;
+  has: (viewTag: number) => boolean;
 }
 
 export function makeViewDescriptorsSet(): ViewDescriptorsSet {
   const shareableViewDescriptors = makeMutable<Descriptor[]>([]);
+  const viewTags = new Set<number>();
+
   const data: ViewDescriptorsSet = {
     shareableViewDescriptors,
+
     add: (item: Descriptor) => {
+      viewTags.add(item.tag as number);
       shareableViewDescriptors.modify((descriptors) => {
         'worklet';
         const index = descriptors.findIndex(
@@ -29,6 +34,7 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
     },
 
     remove: (viewTag: number) => {
+      viewTags.delete(viewTag);
       shareableViewDescriptors.modify((descriptors) => {
         'worklet';
         const index = descriptors.findIndex(
@@ -40,6 +46,9 @@ export function makeViewDescriptorsSet(): ViewDescriptorsSet {
         return descriptors;
       }, false);
     },
+
+    has: (viewTag: number) => viewTags.has(viewTag),
   };
+
   return data;
 }

package/src/animation/util.ts

@@ -284,6 +284,8 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
       res.push(animation[i].current);
     });
 
+    animation.unroundedCurrent = res;
+
     // We need to clamp the res values to make sure they are in the correct RGBA range
     clampRGBA(res as ParsedColorArray);
 
@@ -296,11 +298,11 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     animation: Animation<AnimationObject>,
     timestamp: Timestamp
   ): boolean => {
-    const RGBACurrent = toLinearSpace(convertToRGBA(animation.current));
     const res: Array<number> = [];
     let finished = true;
-    tab.forEach((i, index) => {
-      animation[i].current = RGBACurrent[index];
+    // We must restore nonscale current to ever end the animation.
+    animation.current = animation.nonscaledCurrent;
+    tab.forEach((i) => {
       const result = animation[i].onFrame(animation[i], timestamp);
       // We really need to assign this value to result, instead of passing it directly - otherwise once "finished" is false, onFrame won't be called
       finished = finished && result;
@@ -309,7 +311,7 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
 
     // We need to clamp the res values to make sure they are in the correct RGBA range
     clampRGBA(res as ParsedColorArray);
-
+    animation.nonscaledCurrent = res;
     animation.current = rgbaArrayToRGBAColor(
       toGammaSpace(res as ParsedColorArray)
     );

package/src/component/ReducedMotionConfig.tsx

@@ -14,7 +14,7 @@ import {
  *
  * @param mode - Determines default reduce motion behavior globally in your
  *   application. Configured with {@link ReduceMotion} enum.
- * @see https://docs.swmansion.com/react-native-reanimated/docs/components/ReducedMotionConfig
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/3.x/device/ReducedMotionConfig/
  */
 export function ReducedMotionConfig({ mode }: { mode: ReduceMotion }) {
   useEffect(() => {

package/src/createAnimatedComponent/NativeEventsManager.ts

@@ -108,7 +108,7 @@ export class NativeEventsManager implements INativeEventsManager {
       // On the first render of a component, we may already receive a resolved view tag.
       return this.#managedComponent.getComponentViewTag();
     }
-    if (componentAnimatedRef.__nativeTag || componentAnimatedRef._nativeTag) {
+    if (componentAnimatedRef?.__nativeTag || componentAnimatedRef?._nativeTag) {
       /*
         Fast path for native refs,
         _nativeTag is used by Paper components,

package/src/createAnimatedComponent/createAnimatedComponent.tsx

@@ -30,6 +30,7 @@ import { ReanimatedError } from '../errors';
 import { getShadowNodeWrapperFromRef } from '../fabricUtils';
 import type { AnimateProps } from '../helperTypes';
 import type { AnimatedStyleHandle } from '../hook/commonTypes';
+import type { BaseAnimationBuilder } from '../layoutReanimation';
 import { SharedTransition } from '../layoutReanimation';
 import {
   configureWebLayoutAnimations,
@@ -203,14 +204,18 @@ export function createAnimatedComponent(
           saveSnapshot(this._componentDOMRef);
         }
 
-        if (
-          !this.props.entering ||
-          getReducedMotionFromConfig(this.props.entering as CustomConfig)
-        ) {
+        if (!this.props.entering) {
           this._isFirstRender = false;
           return;
         }
 
+        if (getReducedMotionFromConfig(this.props.entering as CustomConfig)) {
+          this._isFirstRender = false;
+
+          (this.props.entering as BaseAnimationBuilder).callbackV?.(true);
+          return;
+        }
+
         const skipEntering = this.context?.current;
 
         if (!skipEntering) {
@@ -252,12 +257,11 @@ export function createAnimatedComponent(
 
       const exiting = this.props.exiting;
 
-      if (
-        IS_WEB &&
-        this._componentDOMRef &&
-        exiting &&
-        !getReducedMotionFromConfig(exiting as CustomConfig)
-      ) {
+      if (IS_WEB && this._componentDOMRef && exiting) {
+        if (getReducedMotionFromConfig(exiting as CustomConfig)) {
+          (exiting as BaseAnimationBuilder).callbackV?.(true);
+          return;
+        }
         addHTMLMutationObserver();
 
         startWebLayoutAnimation(
@@ -383,6 +387,11 @@ export function createAnimatedComponent(
         adaptViewConfig(viewConfig);
       }
 
+      const newStyles = new Set<StyleProps>(styles);
+
+      const isStyleAttached = (style: StyleProps) =>
+        style.viewDescriptors.has(viewTag);
+
       // remove old styles
       if (prevStyles) {
         // in most of the cases, views have only a single animated style and it remains unchanged
@@ -391,13 +400,15 @@ export function createAnimatedComponent(
           prevStyles.length === 1 &&
           styles[0] === prevStyles[0];
 
-        if (!hasOneSameStyle) {
-          // otherwise, remove each style that is not present in new styles
-          for (const prevStyle of prevStyles) {
-            const isPresent = styles.some((style) => style === prevStyle);
-            if (!isPresent) {
-              prevStyle.viewDescriptors.remove(viewTag);
-            }
+        if (hasOneSameStyle && isStyleAttached(prevStyles[0])) {
+          return;
+        }
+
+        // otherwise, remove each style that is not present in new styles
+        for (const prevStyle of prevStyles) {
+          const isPresent = styles.some((style) => style === prevStyle);
+          if (!isPresent && isStyleAttached(prevStyle)) {
+            prevStyle.viewDescriptors.remove(viewTag);
           }
         }
       }
@@ -413,7 +424,7 @@ export function createAnimatedComponent(
         }
       }
 
-      styles.forEach((style) => {
+      newStyles.forEach((style) => {
         style.viewDescriptors.add({
           tag: viewTag,
           name: viewName,
@@ -480,12 +491,12 @@ export function createAnimatedComponent(
         saveSnapshot(this._componentDOMRef);
       }
 
-      if (
-        IS_WEB &&
-        snapshot &&
-        this.props.layout &&
-        !getReducedMotionFromConfig(this.props.layout as CustomConfig)
-      ) {
+      if (IS_WEB && snapshot && this.props.layout) {
+        if (getReducedMotionFromConfig(this.props.layout as CustomConfig)) {
+          (this.props.layout as BaseAnimationBuilder).callbackV?.(true);
+
+          return;
+        }
         tryActivateLayoutTransition(
           this.props,
           this._componentDOMRef as ReanimatedHTMLElement,

package/src/helperTypes.ts

@@ -7,7 +7,7 @@ until time comes to refactor the code and get necessary types right.
 This will not be easy though! 
 */
 
-import type { RegisteredStyle, StyleProp } from 'react-native';
+import type { StyleProp } from 'react-native';
 
 import type {
   AnimatedStyle,
@@ -20,6 +20,10 @@ import type { BaseAnimationBuilder } from './layoutReanimation/animationBuilder/
 import type { ReanimatedKeyframe } from './layoutReanimation/animationBuilder/Keyframe';
 import type { SharedTransition } from './layoutReanimation/sharedTransitions';
 
+// RegisteredStyle was removed from React Native, provide a fallback type
+// This is only used in a deprecated type definition
+type RegisteredStyle<T> = number & { __registeredStyleBrand: T };
+
 export type EntryOrExitLayoutType =
   | BaseAnimationBuilder
   | typeof BaseAnimationBuilder

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/animationParser.ts

@@ -1,5 +1,7 @@
 'use strict';
 
+import type { EasingFunction } from '../../commonTypes';
+import type { EasingFunctionFactory } from '../../Easing';
 import type { WebEasingsNames } from './Easing.web';
 import { WebEasings } from './Easing.web';
 
@@ -20,6 +22,7 @@ export interface ReanimatedWebTransformProperties {
 export interface AnimationStyle {
   opacity?: number;
   transform?: ReanimatedWebTransformProperties[];
+  easing?: EasingFunction | EasingFunctionFactory;
 }
 
 export interface AnimationData {

package/src/layoutReanimation/web/componentUtils.ts

@@ -1,6 +1,7 @@
 'use strict';
 
 import { LayoutAnimationType, ReduceMotion } from '../../commonTypes';
+import type { EasingFunctionFactory } from '../../Easing';
 import { EasingNameSymbol } from '../../Easing';
 import { logger } from '../../logger';
 import type { ReanimatedHTMLElement } from '../../ReanimatedModule/js-reanimated';
@@ -15,13 +16,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 {
@@ -29,15 +35,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,
@@ -43,7 +44,10 @@ import type { AnimationData, AnimationStyle } from './animationParser';
 
 export type AnimationCallback = ((finished: boolean) => void) | null;
 
-export type KeyframeDefinitions = Record<number, AnimationStyle>;
+export type KeyframeDefinitions = Record<
+  `${number}` | 'from' | 'to',
+  AnimationStyle
+>;
 
 export type InitialValuesStyleProps = Omit<StyleProps, 'opacity'> & {
   opacity?: number;
@@ -59,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/createAnimation.ts

@@ -68,6 +68,21 @@ export function createCustomKeyFrameAnimation(
 
   animationData.name = generateNextCustomKeyframeName();
 
+  // 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
+  // we animate instead of the keyframe we animate from)
+  const offsets = Object.keys(
+    keyframeDefinitions
+  ) as (keyof KeyframeDefinitions)[];
+
+  for (let i = 1; i < offsets.length; i++) {
+    const style = keyframeDefinitions[offsets[i]];
+    if (style.easing) {
+      keyframeDefinitions[offsets[i - 1]].easing = style.easing;
+      delete style.easing;
+    }
+  }
+
   const parsedKeyframe = convertAnimationObjectToKeyframes(animationData);
 
   insertWebAnimation(animationData.name, parsedKeyframe);

package/src/layoutReanimation/web/domUtils.ts

@@ -120,7 +120,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/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.0';
+export const jsVersion = '3.19.2';

package/src/platformFunctions/dispatchCommand.ts

@@ -44,8 +44,21 @@ function dispatchCommandFabric(
     return;
   }
 
-  const shadowNodeWrapper = animatedRef() as ShadowNodeWrapper;
-  global._dispatchCommandFabric!(shadowNodeWrapper, commandName, args);
+  const shadowNodeWrapper = animatedRef();
+
+  // This prevents crashes if ref has not been set yet
+  if (!shadowNodeWrapper) {
+    logger.warn(
+      `Tried to dispatch command "${commandName}" with an uninitialized ref. Make sure to pass the animated ref to the component before using it.`
+    );
+    return;
+  }
+
+  global._dispatchCommandFabric!(
+    shadowNodeWrapper as ShadowNodeWrapper,
+    commandName,
+    args
+  );
 }
 
 function dispatchCommandPaper(
@@ -59,6 +72,14 @@ function dispatchCommandPaper(
   }
 
   const viewTag = animatedRef() as number;
+
+  if (viewTag < 0) {
+    logger.warn(
+      `Tried to dispatch command "${commandName}" with an uninitialized ref. Make sure to pass the animated ref to the component before using it.`
+    );
+    return;
+  }
+
   global._dispatchCommandPaper!(viewTag, commandName, args);
 }