react-native-reanimated 3.8.0 → 3.9.0-layout-animation-experimental

package/src/reanimated2/globals.d.ts

@@ -18,6 +18,7 @@ import type { ProgressTransitionRegister } from './layoutReanimation/sharedTrans
 import type { UpdatePropsManager } from './UpdateProps';
 import type { callGuardDEV } from './initializers';
 import type { WorkletRuntime } from './runtimes';
+import type { RNScreensTurboModuleType } from './screenTransition/commonTypes';
 
 declare global {
   var _REANIMATED_IS_REDUCED_MOTION: boolean | undefined;
@@ -39,7 +40,10 @@ declare global {
   ) => void;
   var _notifyAboutEnd: (tag: number, removeView: boolean) => void;
   var _setGestureState: (handlerTag: number, newState: number) => void;
-  var _makeShareableClone: <T>(value: T) => FlatShareableRef<T>;
+  var _makeShareableClone: <T>(
+    value: T,
+    nativeStateSource?: object
+  ) => FlatShareableRef<T>;
   var _scheduleOnJS: (fun: (...args: A) => R, args?: A) => void;
   var _scheduleOnRuntime: (
     runtime: WorkletRuntime,
@@ -102,4 +106,10 @@ declare global {
   var UpdatePropsManager: UpdatePropsManager;
   var ProgressTransitionRegister: ProgressTransitionRegister;
   var updateJSProps: (viewTag: number, props: Record<string, unknown>) => void;
+  var RNScreensTurboModule: RNScreensTurboModuleType | undefined;
+  var _obtainPropPaper: (viewTag: number, propName: string) => string;
+  var _obtainPropFabric: (
+    shadowNodeWrapper: ShadowNodeWrapper,
+    propName: string
+  ) => string;
 }

package/src/reanimated2/hook/commonTypes.ts

@@ -30,6 +30,7 @@ export interface AnimatedRef<T extends Component> {
     | ShadowNodeWrapper // Fabric
     | HTMLElement; // web
   current: T | null;
+  getTag: () => number;
 }
 
 // Might make that type generic if it's ever needed.
@@ -78,6 +79,15 @@ export type RNNativeScrollEvent = NativeSyntheticEvent<NativeScrollEvent>;
 
 export type ReanimatedScrollEvent = ReanimatedEvent<RNNativeScrollEvent>;
 
+export interface IWorkletEventHandler<Event extends object> {
+  updateEventHandler: (
+    newWorklet: (event: ReanimatedEvent<Event>) => void,
+    newEvents: string[]
+  ) => void;
+  registerForEvents: (viewTag: number, fallbackEventName?: string) => void;
+  unregisterFromEvents: (viewTag: number) => void;
+}
+
 export interface AnimatedStyleHandle<
   Style extends DefaultStyle = DefaultStyle
 > {

package/src/reanimated2/hook/useAnimatedRef.ts

@@ -11,7 +11,6 @@ import { Platform, findNodeHandle } from 'react-native';
 import type { ScrollView, FlatList } from 'react-native';
 import { isFabric, isWeb } from '../PlatformChecker';
 
-const IS_FABRIC = isFabric();
 const IS_WEB = isWeb();
 
 interface MaybeScrollableComponent extends Component {
@@ -25,18 +24,14 @@ interface MaybeScrollableComponent extends Component {
 }
 
 function getComponentOrScrollable(component: MaybeScrollableComponent) {
-  if (IS_FABRIC && component.getNativeScrollRef) {
+  if (isFabric() && component.getNativeScrollRef) {
     return component.getNativeScrollRef();
-  } else if (!IS_FABRIC && component.getScrollableNode) {
+  } else if (!isFabric() && component.getScrollableNode) {
     return component.getScrollableNode();
   }
   return component;
 }
 
-const getTagValueFunction = IS_FABRIC
-  ? getShadowNodeWrapperFromRef
-  : findNodeHandle;
-
 /**
  * Lets you get a reference of a view that you can use inside a worklet.
  *
@@ -57,12 +52,26 @@ export function useAnimatedRef<
     ) => {
       // enters when ref is set by attaching to a component
       if (component) {
-        tag.value = IS_WEB
-          ? getComponentOrScrollable(component)
-          : getTagValueFunction(getComponentOrScrollable(component));
+        const getTagValueFunction = isFabric()
+          ? getShadowNodeWrapperFromRef
+          : findNodeHandle;
+
+        const getTagOrShadowNodeWrapper = () => {
+          return IS_WEB
+            ? getComponentOrScrollable(component)
+            : getTagValueFunction(getComponentOrScrollable(component));
+        };
+
+        tag.value = getTagOrShadowNodeWrapper();
+
+        // On Fabric we have to unwrap the tag from the shadow node wrapper
+        fun.getTag = isFabric()
+          ? () => findNodeHandle(getComponentOrScrollable(component))
+          : getTagOrShadowNodeWrapper;
+
         fun.current = component;
         // viewName is required only on iOS with Paper
-        if (Platform.OS === 'ios' && !IS_FABRIC) {
+        if (Platform.OS === 'ios' && !isFabric()) {
           viewName.value =
             (component as MaybeScrollableComponent)?.viewConfig
               ?.uiViewClassName || 'RCTView';

package/src/reanimated2/hook/useEvent.ts

@@ -1,7 +1,7 @@
 'use strict';
 import { useRef } from 'react';
-import WorkletEventHandler from '../WorkletEventHandler';
-import type { ReanimatedEvent } from './commonTypes';
+import { WorkletEventHandler } from '../WorkletEventHandler';
+import type { IWorkletEventHandler, ReanimatedEvent } from './commonTypes';
 
 /**
  * Worklet to provide as an argument to `useEvent` hook.
@@ -17,7 +17,7 @@ export type EventHandlerProcessed<
 > = (event: Event, context?: Context) => void;
 
 export type EventHandlerInternal<Event extends object> = {
-  workletEventHandler: WorkletEventHandler<Event>;
+  workletEventHandler: IWorkletEventHandler<Event>;
 };
 
 /**
@@ -57,7 +57,7 @@ export function useEvent<Event extends object, Context = never>(
     initRef.current = { workletEventHandler };
   } else if (rebuild) {
     const workletEventHandler = initRef.current.workletEventHandler;
-    workletEventHandler.updateWorklet(handler);
+    workletEventHandler.updateEventHandler(handler, eventNames);
     initRef.current = { workletEventHandler };
   }
 

package/src/reanimated2/hook/useScrollViewOffset.ts

@@ -1,7 +1,6 @@
 'use strict';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import type { SharedValue } from '../commonTypes';
-import { findNodeHandle } from 'react-native';
 import type { EventHandlerInternal } from './useEvent';
 import { useEvent } from './useEvent';
 import { useSharedValue } from './useSharedValue';
@@ -15,14 +14,6 @@ import { isWeb } from '../PlatformChecker';
 
 const IS_WEB = isWeb();
 
-const scrollEventNames = [
-  'onScroll',
-  'onScrollBeginDrag',
-  'onScrollEndDrag',
-  'onMomentumScrollBegin',
-  'onMomentumScrollEnd',
-];
-
 /**
  * Lets you synchronously get the current offset of a `ScrollView`.
  *
@@ -30,36 +21,99 @@ const scrollEventNames = [
  * @returns A shared value which holds the current offset of the `ScrollView`.
  * @see https://docs.swmansion.com/react-native-reanimated/docs/scroll/useScrollViewOffset
  */
-export function useScrollViewOffset(
+export const useScrollViewOffset = IS_WEB
+  ? useScrollViewOffsetWeb
+  : useScrollViewOffsetNative;
+
+function useScrollViewOffsetWeb(
   animatedRef: AnimatedRef<AnimatedScrollView>,
-  initialRef?: SharedValue<number>
+  providedOffset?: SharedValue<number>
 ): SharedValue<number> {
-  const offsetRef = useRef(
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    initialRef !== undefined ? initialRef : useSharedValue(0)
-  );
+  const internalOffset = useSharedValue(0);
+  const offset = useRef(providedOffset ?? internalOffset).current;
+  const scrollRef = useRef<AnimatedScrollView | null>(null);
+
+  const eventHandler = useCallback(() => {
+    'worklet';
+    const element = getWebScrollableElement(animatedRef.current);
+    // scrollLeft is the X axis scrolled offset, works properly also with RTL layout
+    offset.value =
+      element.scrollLeft === 0 ? element.scrollTop : element.scrollLeft;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animatedRef, animatedRef.current]);
+
+  useEffect(() => {
+    // We need to make sure that listener for old animatedRef value is removed
+    if (scrollRef.current !== null) {
+      getWebScrollableElement(scrollRef.current).removeEventListener(
+        'scroll',
+        eventHandler
+      );
+    }
+    scrollRef.current = animatedRef.current;
+
+    const element = getWebScrollableElement(animatedRef.current);
+    element.addEventListener('scroll', eventHandler);
+    return () => {
+      element.removeEventListener('scroll', eventHandler);
+    };
+    // React here has a problem with `animatedRef.current` since a Ref .current
+    // field shouldn't be used as a dependency. However, in this case we have
+    // to do it this way.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animatedRef, animatedRef.current, eventHandler]);
+
+  return offset;
+}
+
+function useScrollViewOffsetNative(
+  animatedRef: AnimatedRef<AnimatedScrollView>,
+  providedOffset?: SharedValue<number>
+): SharedValue<number> {
+  const internalOffset = useSharedValue(0);
+  const offset = useRef(providedOffset ?? internalOffset).current;
+  const scrollRef = useRef<AnimatedScrollView | null>(null);
+  const scrollRefTag = useRef<number | null>(null);
 
   const eventHandler = useEvent<RNNativeScrollEvent>(
     (event: ReanimatedScrollEvent) => {
       'worklet';
-      offsetRef.current.value =
+      offset.value =
         event.contentOffset.x === 0
           ? event.contentOffset.y
           : event.contentOffset.x;
     },
-    scrollEventNames
+    scrollNativeEventNames
     // Read https://github.com/software-mansion/react-native-reanimated/pull/5056
     // for more information about this cast.
   ) as unknown as EventHandlerInternal<ReanimatedScrollEvent>;
 
   useEffect(() => {
-    const component = animatedRef.current;
-    const viewTag = IS_WEB ? component : findNodeHandle(component);
+    // We need to make sure that listener for old animatedRef value is removed
+    if (scrollRef.current !== null && scrollRefTag.current !== null) {
+      eventHandler.workletEventHandler.unregisterFromEvents(
+        scrollRefTag.current
+      );
+    }
 
-    eventHandler.workletEventHandler.registerForEvents(viewTag as number);
+    // Store the ref and viewTag for future cleanup
+    scrollRef.current = animatedRef.current;
+    scrollRefTag.current = animatedRef.getTag();
+
+    if (scrollRefTag === null) {
+      console.warn(
+        '[Reanimated] ScrollViewOffset failed to resolve the view tag from animated ref. Did you forget to attach the ref to a component?'
+      );
+    } else {
+      eventHandler.workletEventHandler.registerForEvents(scrollRefTag.current);
+    }
 
     return () => {
-      eventHandler.workletEventHandler?.unregisterFromEvents();
+      if (scrollRefTag.current !== null) {
+        eventHandler.workletEventHandler.unregisterFromEvents(
+          scrollRefTag.current
+        );
+      }
     };
     // React here has a problem with `animatedRef.current` since a Ref .current
     // field shouldn't be used as a dependency. However, in this case we have
@@ -67,5 +121,22 @@ export function useScrollViewOffset(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animatedRef, animatedRef.current, eventHandler]);
 
-  return offsetRef.current;
+  return offset;
+}
+
+function getWebScrollableElement(
+  scrollComponent: AnimatedScrollView | null
+): HTMLElement {
+  return (
+    (scrollComponent?.getScrollableNode() as unknown as HTMLElement) ??
+    scrollComponent
+  );
 }
+
+const scrollNativeEventNames = [
+  'onScroll',
+  'onScrollBeginDrag',
+  'onScrollEndDrag',
+  'onMomentumScrollBegin',
+  'onMomentumScrollEnd',
+];

package/src/reanimated2/index.ts

@@ -257,6 +257,7 @@ export {
   getAnimatedStyle,
 } from './jestUtils';
 export { LayoutAnimationConfig } from './component/LayoutAnimationConfig';
+export { PerformanceMonitor } from './component/PerformanceMonitor';
 export type {
   Adaptable,
   AdaptTransforms,
@@ -273,3 +274,13 @@ export type {
 export type { AnimatedScrollViewProps } from './component/ScrollView';
 export type { FlatListPropsWithLayout } from './component/FlatList';
 export { startMapper, stopMapper } from './mappers';
+export {
+  startScreenTransition,
+  finishScreenTransition,
+  ScreenTransition,
+} from './screenTransition';
+export type {
+  AnimatedScreenTransition,
+  GoBackGesture,
+  ScreenTransitionConfig,
+} from './screenTransition';

package/src/reanimated2/js-reanimated/JSReanimated.ts

@@ -55,12 +55,15 @@ export default class JSReanimated {
     _eventName: string,
     _emitterReactTag: number
   ): number {
-    // noop
-    return -1;
+    throw new Error(
+      '[Reanimated] registerEventHandler is not available in JSReanimated.'
+    );
   }
 
   unregisterEventHandler(_: number): void {
-    // noop
+    throw new Error(
+      '[Reanimated] unregisterEventHandler is not available in JSReanimated.'
+    );
   }
 
   enableLayoutAnimations() {
@@ -83,10 +86,6 @@ export default class JSReanimated {
     }
   }
 
-  configureLayoutAnimation() {
-    // no-op
-  }
-
   configureLayoutAnimationBatch() {
     // no-op
   }
@@ -282,6 +281,7 @@ export default class JSReanimated {
   getViewProp<T>(
     _viewTag: number,
     _propName: string,
+    _component?: React.Component,
     _callback?: (result: T) => void
   ): Promise<T> {
     throw new Error(

package/src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts

@@ -8,6 +8,7 @@ import type {
 import type { EasingFunction } from '../../Easing';
 import { BaseAnimationBuilder } from './BaseAnimationBuilder';
 import type { StyleProps } from '../../commonTypes';
+import { assertEasingIsWorklet } from '../../animation/util';
 
 export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   easingV?: EasingFunction;
@@ -40,6 +41,9 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder {
   }
 
   easing(easingFunction: EasingFunction): this {
+    if (__DEV__) {
+      assertEasingIsWorklet(easingFunction);
+    }
     this.easingV = easingFunction;
     return this;
   }

package/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts

@@ -12,7 +12,10 @@ import type {
 import type { StyleProps } from '../../commonTypes';
 import type { TransformArrayItem } from '../../helperTypes';
 import { ReduceMotion } from '../../commonTypes';
-import { getReduceMotionFromConfig } from '../../animation/util';
+import {
+  assertEasingIsWorklet,
+  getReduceMotionFromConfig,
+} from '../../animation/util';
 
 interface KeyframePoint {
   duration: number;
@@ -129,6 +132,11 @@ class InnerKeyframe implements IEntryExitAnimationBuilder {
           "[Reanimated] Keyframe can contain only that set of properties that were provide with initial values (keyframe 0 or 'from')"
         );
       }
+
+      if (__DEV__ && easing) {
+        assertEasingIsWorklet(easing);
+      }
+
       parsedKeyframes[key].push({
         duration: getAnimationDuration(key, currentKeyPoint),
         value,

package/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts

@@ -157,5 +157,13 @@ export type StylePropsWithArrayTransform = StyleProps & {
 export interface LayoutAnimationBatchItem {
   viewTag: number;
   type: LayoutAnimationType;
-  config: ShareableRef<Keyframe | LayoutAnimationFunction> | undefined;
+  config:
+    | ShareableRef<
+        | Keyframe
+        | LayoutAnimationFunction
+        | SharedTransitionAnimationsFunction
+        | ProgressAnimationCallback
+      >
+    | undefined;
+  sharedTransitionTag?: string;
 }

package/src/reanimated2/layoutReanimation/animationsManager.ts

@@ -8,9 +8,12 @@ import type {
   SharedTransitionAnimationsValues,
   LayoutAnimation,
 } from './animationBuilder/commonTypes';
+import { isFabric } from '../PlatformChecker';
 
 const TAG_OFFSET = 1e9;
 
+const IS_FABRIC = isFabric();
+
 function startObservingProgress(
   tag: number,
   sharedValue: SharedValue<Record<string, unknown>>,
@@ -55,8 +58,10 @@ function createLayoutAnimationManager() {
         global.ProgressTransitionRegister.onTransitionStart(tag, yogaValues);
         return;
       }
+      // console.log('start', tag, type, yogaValues, config);
 
       const style = config(yogaValues);
+      // console.log(style);
       let currentAnimation = style.animations;
 
       // When layout animation is requested, but a previous one is still running, we merge
@@ -72,7 +77,9 @@ function createLayoutAnimationManager() {
         value = makeUIMutable(style.initialValues);
         mutableValuesForTag.set(tag, value);
       } else {
-        stopObservingProgress(tag, value);
+        if (!IS_FABRIC) {
+          stopObservingProgress(tag, value);
+        }
         value._value = style.initialValues;
       }
 
@@ -98,7 +105,8 @@ function createLayoutAnimationManager() {
       if (!value) {
         return;
       }
-      stopObservingProgress(tag, value);
+      value.removeListener(tag + TAG_OFFSET);
+      // stopObservingProgress(tag, value);
     },
   };
 }

package/src/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.ts

@@ -7,6 +7,7 @@ import { BaseAnimationBuilder } from '../animationBuilder';
 import type { EasingFunction } from '../../Easing';
 import { Easing } from '../../Easing';
 import { withTiming } from '../../animation';
+import { assertEasingIsWorklet } from '../../animation/util';
 
 /**
  * Layout transitions with a curved animation. You can modify the behavior by chaining methods like `.duration(500)` or `.delay(500)`.
@@ -36,6 +37,9 @@ export class CurvedTransition
   }
 
   easingX(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing);
+    }
     this.easingXV = easing;
     return this;
   }
@@ -46,6 +50,9 @@ export class CurvedTransition
   }
 
   easingY(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing);
+    }
     this.easingYV = easing;
     return this;
   }
@@ -56,6 +63,9 @@ export class CurvedTransition
   }
 
   easingWidth(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing);
+    }
     this.easingWidthV = easing;
     return this;
   }
@@ -66,6 +76,9 @@ export class CurvedTransition
   }
 
   easingHeight(easing: EasingFunction): CurvedTransition {
+    if (__DEV__) {
+      assertEasingIsWorklet(easing);
+    }
     this.easingHeightV = easing;
     return this;
   }

package/src/reanimated2/layoutReanimation/sharedTransitions/ProgressTransitionManager.ts

@@ -39,14 +39,18 @@ export class ProgressTransitionManager {
         progressAnimation
       );
     })();
+
     this.registerEventHandlers();
   }
 
-  public removeProgressAnimation(viewTag: number) {
+  public removeProgressAnimation(viewTag: number, isUnmounting = true) {
     this.unregisterEventHandlers();
     runOnUIImmediately(() => {
       'worklet';
-      global.ProgressTransitionRegister.removeProgressAnimation(viewTag);
+      global.ProgressTransitionRegister.removeProgressAnimation(
+        viewTag,
+        isUnmounting
+      );
     })();
   }
 
@@ -141,19 +145,24 @@ function createProgressTransitionRegister() {
       viewTag: number,
       progressAnimation: ProgressAnimation
     ) => {
-      if (currentTransitions.size > 0) {
+      if (currentTransitions.size > 0 && !progressAnimations.has(viewTag)) {
         // there is no need to prevent cleaning on android
         isTransitionRestart = !IS_ANDROID;
       }
       progressAnimations.set(viewTag, progressAnimation);
     },
-    removeProgressAnimation: (viewTag: number) => {
+    removeProgressAnimation: (viewTag: number, isUnmounting: boolean) => {
       if (currentTransitions.size > 0) {
         // there is no need to prevent cleaning on android
         isTransitionRestart = !IS_ANDROID;
       }
-      // Remove the animation config after the transition is finished
-      toRemove.add(viewTag);
+      if (isUnmounting) {
+        // Remove the animation config after the transition is finished
+        toRemove.add(viewTag);
+      } else {
+        // if the animation is removed, without ever being started, it can be removed immediately
+        progressAnimations.delete(viewTag);
+      }
     },
     onTransitionStart: (
       viewTag: number,
@@ -194,7 +203,7 @@ function createProgressTransitionRegister() {
         return;
       }
       for (const viewTag of currentTransitions) {
-        global._notifyAboutEnd(viewTag, removeViews);
+        // global._notifyAboutEnd(viewTag, removeViews);
       }
       currentTransitions.clear();
       if (isTransitionRestart) {
@@ -206,7 +215,7 @@ function createProgressTransitionRegister() {
       if (toRemove.size > 0) {
         for (const viewTag of toRemove) {
           progressAnimations.delete(viewTag);
-          global._notifyAboutEnd(viewTag, removeViews);
+          // global._notifyAboutEnd(viewTag, removeViews);
         }
         toRemove.clear();
       }

package/src/reanimated2/layoutReanimation/sharedTransitions/SharedTransition.ts

@@ -13,8 +13,9 @@ import {
 } from '../animationBuilder/commonTypes';
 import type { StyleProps } from '../../commonTypes';
 import { ReduceMotion } from '../../commonTypes';
-import { configureLayoutAnimations } from '../../core';
 import { ProgressTransitionManager } from './ProgressTransitionManager';
+import { updateLayoutAnimations } from '../../UpdateLayoutAnimations';
+import { getReduceMotionFromConfig } from '../../animation/util';
 
 const SUPPORTED_PROPS = [
   'width',
@@ -80,8 +81,13 @@ export class SharedTransition {
 
   public registerTransition(
     viewTag: number,
-    sharedTransitionTag: string
-  ): void {
+    sharedTransitionTag: string,
+    isUnmounting = false
+  ) {
+    if (getReduceMotionFromConfig(this.getReduceMotion())) {
+      return;
+    }
+
     const transitionAnimation = this.getTransitionAnimation();
     const progressAnimation = this.getProgressAnimation();
     if (!this._defaultTransitionType) {
@@ -95,11 +101,12 @@ export class SharedTransition {
       this._defaultTransitionType === SharedTransitionType.ANIMATION
         ? LayoutAnimationType.SHARED_ELEMENT_TRANSITION
         : LayoutAnimationType.SHARED_ELEMENT_TRANSITION_PROGRESS;
-    configureLayoutAnimations(
+    updateLayoutAnimations(
       viewTag,
       layoutAnimationType,
       transitionAnimation,
-      sharedTransitionTag
+      sharedTransitionTag,
+      isUnmounting
     );
     SharedTransition._progressTransitionManager.addProgressAnimation(
       viewTag,
@@ -107,9 +114,21 @@ export class SharedTransition {
     );
   }
 
-  public unregisterTransition(viewTag: number): void {
+  public unregisterTransition(viewTag: number, isUnmounting = false): void {
+    const layoutAnimationType =
+      this._defaultTransitionType === SharedTransitionType.ANIMATION
+        ? LayoutAnimationType.SHARED_ELEMENT_TRANSITION
+        : LayoutAnimationType.SHARED_ELEMENT_TRANSITION_PROGRESS;
+    updateLayoutAnimations(
+      viewTag,
+      layoutAnimationType,
+      undefined,
+      undefined,
+      isUnmounting
+    );
     SharedTransition._progressTransitionManager.removeProgressAnimation(
-      viewTag
+      viewTag,
+      isUnmounting
     );
   }
 

package/src/reanimated2/layoutReanimation/web/animationsManager.ts

@@ -48,7 +48,7 @@ function checkUndefinedAnimationFail(
   }
 
   console.warn(
-    "[Reanimated] Couldn't load entering/exiting animation. Current version supports only predefined animations with modifiers: duration, delay, easing, randomizeDelay, wtihCallback, reducedMotion."
+    "[Reanimated] Couldn't load entering/exiting animation. Current version supports only predefined animations with modifiers: duration, delay, easing, randomizeDelay, withCallback, reducedMotion."
   );
 
   return true;

package/src/reanimated2/layoutReanimation/web/componentStyle.ts

@@ -78,5 +78,7 @@ export function setDummyPosition(
   dummy.style.height = `${snapshot.height}px`;
   dummy.style.margin = '0px'; // tmpElement has absolute position, so margin is not necessary
 
-  fixElementPosition(dummy, dummy.parentElement!, snapshot);
+  if (dummy.parentElement) {
+    fixElementPosition(dummy, dummy.parentElement, snapshot);
+  }
 }

package/src/reanimated2/layoutReanimation/web/componentUtils.ts

@@ -276,7 +276,7 @@ export function handleExitingAnimation(
 
   const scrollOffsets = getElementScrollValue(element);
 
-  // Scroll does not trigger snapshoting, therefore if we start exiting animation after
+  // Scroll does not trigger snapshotting, therefore if we start exiting animation after
   // scrolling through parent component, dummy will end up in wrong place. In order to fix that
   // we keep last known scroll position in snapshot and then adjust dummy position based on
   // last known scroll offset and current scroll offset