Mock window dimensions

apps/common-app/src/examples/RuntimeTests/ReanimatedRuntimeTestsRunner/RuntimeTestsApi.ts

@@ -180,6 +180,14 @@ export async function unmockAnimationTimer() {
   await testRunner.unmockAnimationTimer();
 }
 
+export async function mockWindowDimensions() {
+  await testRunner.mockWindowDimensions();
+}
+
+export async function unmockWindowDimensions() {
+  await testRunner.unmockWindowDimensions();
+}
+
 export async function setAnimationTimestamp(timestamp: number) {
   await testRunner.setAnimationTimestamp(timestamp);
 }

apps/common-app/src/examples/RuntimeTests/ReanimatedRuntimeTestsRunner/TestRunner.ts

@@ -16,11 +16,18 @@ import type {
 import { ComparisonMode, DescribeDecorator, TestDecorator } from './types';
 import { TestComponent } from './TestComponent';
 import { EMPTY_LOG_PLACEHOLDER, applyMarkdown, color, formatString, indentNestingLevel } from './stringFormatUtils';
-import type { SharedValue } from 'react-native-reanimated';
+import type {
+  SharedValue,
+  LayoutAnimationStartFunction,
+  LayoutAnimationType,
+  SharedTransitionAnimationsValues,
+  LayoutAnimation,
+} from 'react-native-reanimated';
 import { makeMutable, runOnUI, runOnJS } from 'react-native-reanimated';
 import { Matchers, nullableMatch } from './matchers/Matchers';
 import { assertMockedAnimationTimestamp, assertTestCase, assertTestSuite } from './Asserts';
 import { createUpdatesContainer } from './UpdatesContainer';
+export { Presets } from './Presets';
 
 let callTrackerRegistryJS: Record<string, number> = {};
 const callTrackerRegistryUI = makeMutable<Record<string, number>>({});
@@ -558,6 +565,46 @@ export class TestRunner {
     });
   }
 
+  public async unmockWindowDimensions() {
+    await this.runOnUIBlocking(() => {
+      'worklet';
+      if (global._LayoutAnimationsManager) {
+        global.LayoutAnimationsManager = global._LayoutAnimationsManager;
+      }
+    });
+  }
+
+  public async mockWindowDimensions() {
+    await this.runOnUIBlocking(() => {
+      'worklet';
+      const originalCreateAnimatedComponent = global.LayoutAnimationsManager;
+
+      const createAnimatedComponentOnStart: LayoutAnimationStartFunction = (
+        tag: number,
+        type: LayoutAnimationType,
+        _yogaValues: Partial<SharedTransitionAnimationsValues>,
+        config: (arg: Partial<SharedTransitionAnimationsValues>) => LayoutAnimation,
+      ) => {
+        originalCreateAnimatedComponent.start(
+          tag,
+          type,
+          {
+            ..._yogaValues,
+            windowHeight: 852,
+            windowWidth: 393,
+          },
+          config,
+        );
+      };
+
+      global._LayoutAnimationsManager = originalCreateAnimatedComponent;
+      global.LayoutAnimationsManager = {
+        start: createAnimatedComponentOnStart,
+        stop: originalCreateAnimatedComponent.stop,
+      };
+    });
+  }
+
   public wait(delay: number) {
     return new Promise(resolve => {
       setTimeout(resolve, delay);

apps/common-app/src/examples/RuntimeTests/ReanimatedRuntimeTestsRunner/types.ts

@@ -1,5 +1,5 @@
 import type { Component, Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
-import type { AnimatedStyle, StyleProps } from 'react-native-reanimated';
+import type { AnimatedStyle, StyleProps, LayoutAnimationStartFunction } from 'react-native-reanimated';
 
 export type CallTracker = {
   UICallsCount: number;
@@ -137,6 +137,14 @@ declare global {
   var _obtainPropPaper: (viewTag: number, propName: string) => string;
   var _obtainPropFabric: (shadowNodeWrapper: unknown, propName: string) => string;
   var __flushAnimationFrame: (frameTimestamp: number) => void;
+  var LayoutAnimationsManager: {
+    start: LayoutAnimationStartFunction;
+    stop: (tag: number) => void;
+  };
+  var _LayoutAnimationsManager: {
+    start: LayoutAnimationStartFunction;
+    stop: (tag: number) => void;
+  };
 }
 /* eslint-enable no-var */
 

apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/entering/predefinedEntering.test.tsx

@@ -51,6 +51,8 @@ import {
   wait,
   unmockAnimationTimer,
   clearRenderOutput,
+  mockWindowDimensions,
+  unmockWindowDimensions,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import {
   DurationEnteringSnapshots,
@@ -101,6 +103,7 @@ const EnteringOnMountComponent = ({ entering }: { entering: any }) => {
 
 async function getSnapshotUpdates(entering: any, waitTime: number, duration: number | undefined, springify = false) {
   await mockAnimationTimer();
+  await mockWindowDimensions();
 
   const updatesContainer = await recordAnimationUpdates();
   const springEntering = springify ? entering : entering.springify();
@@ -109,7 +112,9 @@ async function getSnapshotUpdates(entering: any, waitTime: number, duration: num
   await render(<EnteringOnMountComponent entering={componentEntering} />);
   await wait(waitTime);
   const updates = updatesContainer.getUpdates();
+
   await unmockAnimationTimer();
+  await unmockWindowDimensions();
   await clearRenderOutput();
 
   return updates;

apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/exiting/predefinedExiting.test.tsx

@@ -51,6 +51,8 @@ import {
   wait,
   unmockAnimationTimer,
   clearRenderOutput,
+  mockWindowDimensions,
+  unmockWindowDimensions,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import { DurationExitingSnapshots, NoModifierExitingSnapshots, SpringifyExitingSnapshots } from './exiting.snapshot';
 
@@ -99,6 +101,7 @@ const ExitingComponent = ({ exiting }: { exiting: any }) => {
 
 async function getSnapshotUpdates(exiting: any, waitTime: number, duration: number | undefined, springify = false) {
   await mockAnimationTimer();
+  await mockWindowDimensions();
 
   const updatesContainer = await recordAnimationUpdates();
   const springExiting = springify ? exiting : exiting.springify();
@@ -108,7 +111,9 @@ async function getSnapshotUpdates(exiting: any, waitTime: number, duration: numb
 
   await wait(waitTime);
   const updates = updatesContainer.getUpdates();
+
   await unmockAnimationTimer();
+  await unmockWindowDimensions();
   await clearRenderOutput();
 
   return updates;

apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/layout/predefinedLayoutPosition.test.tsx

@@ -18,6 +18,8 @@ import {
   unmockAnimationTimer,
   clearRenderOutput,
   getTestComponent,
+  mockWindowDimensions,
+  unmockWindowDimensions,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import {
   CurvedSnapshot,
@@ -32,6 +34,7 @@ import { Direction, TransitionUpOrDown, TransitionLeftOrRight, TRANSITION_REF }
 
 async function getSnapshotUpdates(layout: any, direction: Direction, waitTime: number) {
   await mockAnimationTimer();
+  await mockWindowDimensions();
 
   const updatesContainer = await recordAnimationUpdates();
   if (direction === Direction.UP || direction === Direction.DOWN) {
@@ -42,7 +45,9 @@ async function getSnapshotUpdates(layout: any, direction: Direction, waitTime: n
   await wait(waitTime);
   const component = getTestComponent(TRANSITION_REF);
   const updates = updatesContainer.getUpdates(component);
+
   await unmockAnimationTimer();
+  await unmockWindowDimensions();
   await clearRenderOutput();
 
   return updates;

packages/react-native-reanimated/src/index.ts

@@ -118,6 +118,9 @@ export type {
   EntryExitAnimationFunction,
   LayoutAnimationsValues,
   LayoutAnimationFunction,
+  LayoutAnimationStartFunction,
+  LayoutAnimationType,
+  SharedTransitionAnimationsValues,
   ILayoutAnimationBuilder,
   IEntryExitAnimationBuilder,
 } from './layoutReanimation';

packages/react-native-reanimated/src/layoutReanimation/animationBuilder/commonTypes.ts

@@ -80,7 +80,7 @@ export type LayoutAnimationStartFunction = (
   tag: number,
   type: LayoutAnimationType,
   yogaValues: Partial<SharedTransitionAnimationsValues>,
-  config: LayoutAnimationFunction
+  config: (arg: Partial<SharedTransitionAnimationsValues>) => LayoutAnimation
 ) => void;
 
 export interface ILayoutAnimationBuilder {

packages/react-native-reanimated/src/layoutReanimation/animationBuilder/index.ts

@@ -20,4 +20,5 @@ export type {
   BaseBuilderAnimationConfig,
   LayoutAnimationAndConfig,
   IEntryExitAnimationBuilder,
+  SharedTransitionAnimationsValues,
 } from './commonTypes';

packages/react-native-reanimated/src/layoutReanimation/animationsManager.ts

@@ -7,6 +7,7 @@ import { runOnUIImmediately } from '../threads';
 import type {
   SharedTransitionAnimationsValues,
   LayoutAnimation,
+  LayoutAnimationStartFunction,
 } from './animationBuilder/commonTypes';
 
 const TAG_OFFSET = 1e9;
@@ -34,7 +35,10 @@ function stopObservingProgress(
   global._notifyAboutEnd(tag, removeView);
 }
 
-function createLayoutAnimationManager() {
+function createLayoutAnimationManager(): {
+  start: LayoutAnimationStartFunction;
+  stop: (tag: number) => void;
+} {
   'worklet';
   const currentAnimationForTag = new Map();
   const mutableValuesForTag = new Map();