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

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

@@ -14,7 +14,7 @@ import { FadingTransition } from './transition/Fading.web';
 import { insertWebAnimation } from './domUtils';
 
 // 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 exisitng transform we have to add 'px' suffix to each of translate values
+// convert it to `px`. Therefore if we want to keep existing transform we have to add 'px' suffix to each of translate values
 // that are present inside transform.
 function addPxToTranslate(
   existingTransform: NonNullable<TransformsStyle['transform']>
@@ -43,7 +43,7 @@ function addPxToTranslate(
   return newTransform;
 }
 
-// In order to keep exisitng transform throughout animation, we have to add it to each of keyframe step.
+// In order to keep existing transform throughout animation, we have to add it to each of keyframe step.
 function addExistingTransform(
   newAnimationData: AnimationData,
   newTransform: ReanimatedWebTransformProperties[]

package/src/reanimated2/platform-specific/jsVersion.ts

@@ -4,4 +4,4 @@
  * with the 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.8.0';
+export const jsVersion = '3.9.0-layout-animation-experimental';

package/src/reanimated2/platformFunctions/getRelativeCoords.ts

@@ -31,7 +31,7 @@ export function getRelativeCoords(
     return null;
   }
   return {
-    x: absoluteX - parentCoords.x,
-    y: absoluteY - parentCoords.y,
+    x: absoluteX - parentCoords.pageX,
+    y: absoluteY - parentCoords.pageY,
   };
 }

package/src/reanimated2/screenTransition/RNScreensTurboModule.ts

@@ -0,0 +1,29 @@
+'use strict';
+import type { RNScreensTurboModuleType } from './commonTypes';
+
+function noopFactory<T>(defaultReturnValue?: T): () => T {
+  return () => {
+    'worklet';
+    console.warn(
+      '[Reanimated] RNScreensTurboModule has not been found. Check that you have installed `react-native-screens@3.30.0` or newer in your project and rebuilt your app.'
+    );
+    return defaultReturnValue as T;
+  };
+}
+
+type TransactionConfig = {
+  topScreenId: number;
+  belowTopScreenId: number;
+  canStartTransition: boolean;
+};
+
+export const RNScreensTurboModule: RNScreensTurboModuleType =
+  global.RNScreensTurboModule || {
+    startTransition: noopFactory<TransactionConfig>({
+      topScreenId: -1,
+      belowTopScreenId: -1,
+      canStartTransition: false,
+    }),
+    updateTransition: noopFactory(),
+    finishTransition: noopFactory(),
+  };

package/src/reanimated2/screenTransition/animationManager.ts

@@ -0,0 +1,45 @@
+'use strict';
+
+import type { LockAxis, ScreenTransitionConfig } from './commonTypes';
+import { configureProps } from '../../ConfigHelper';
+import { applyStyle } from './styleUpdater';
+import { getSwipeSimulator } from './swipeSimulator';
+
+configureProps();
+
+export function startScreenTransition(
+  screenTransitionConfig: ScreenTransitionConfig
+) {
+  'worklet';
+  const { stackTag, sharedEvent } = screenTransitionConfig;
+  sharedEvent.addListener(stackTag, () => {
+    applyStyle(screenTransitionConfig, sharedEvent.value);
+  });
+}
+
+function getLockAxis(goBackGesture: string): LockAxis {
+  'worklet';
+  if (['swipeRight', 'swipeLeft', 'horizontalSwipe'].includes(goBackGesture)) {
+    return 'x';
+  } else if (
+    ['swipeUp', 'swipeDown', 'verticalSwipe'].includes(goBackGesture)
+  ) {
+    return 'y';
+  }
+  return undefined;
+}
+
+export function finishScreenTransition(
+  screenTransitionConfig: ScreenTransitionConfig
+) {
+  'worklet';
+  const { stackTag, sharedEvent, goBackGesture } = screenTransitionConfig;
+  sharedEvent.removeListener(stackTag);
+  const lockAxis = getLockAxis(goBackGesture);
+  const step = getSwipeSimulator(
+    sharedEvent.value,
+    screenTransitionConfig,
+    lockAxis
+  );
+  step();
+}

package/src/reanimated2/screenTransition/commonTypes.ts

@@ -0,0 +1,63 @@
+'use strict';
+
+import type {
+  MeasuredDimensions,
+  ShadowNodeWrapper,
+  SharedValue,
+} from '../commonTypes';
+
+export type PanGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  translationX: number;
+  translationY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+export type AnimatedScreenTransition = {
+  topScreenStyle: (
+    event: PanGestureHandlerEventPayload,
+    screenDimensions: MeasuredDimensions
+  ) => Record<string, unknown>;
+  belowTopScreenStyle: (
+    event: PanGestureHandlerEventPayload,
+    screenDimensions: MeasuredDimensions
+  ) => Record<string, unknown>;
+};
+
+export type GoBackGesture =
+  | 'swipeRight'
+  | 'swipeLeft'
+  | 'swipeUp'
+  | 'swipeDown'
+  | 'verticalSwipe'
+  | 'horizontalSwipe'
+  | 'twoDimensionalSwipe';
+
+export type ScreenTransitionConfig = {
+  stackTag: number;
+  belowTopScreenId: number | ShadowNodeWrapper;
+  topScreenId: number | ShadowNodeWrapper;
+  screenTransition: AnimatedScreenTransition;
+  sharedEvent: SharedValue<PanGestureHandlerEventPayload>;
+  startingGesturePosition: SharedValue<PanGestureHandlerEventPayload>;
+  onFinishAnimation?: () => void;
+  isTransitionCanceled: boolean;
+  goBackGesture: GoBackGesture;
+  screenDimensions: MeasuredDimensions;
+};
+
+export type RNScreensTurboModuleType = {
+  startTransition: (stackTag: number) => {
+    topScreenId: number | ShadowNodeWrapper;
+    belowTopScreenId: number | ShadowNodeWrapper;
+    canStartTransition: boolean;
+  };
+  updateTransition: (stackTag: number, progress: number) => void;
+  finishTransition: (stackTag: number, isCanceled: boolean) => void;
+};
+
+export type LockAxis = 'x' | 'y' | undefined;

package/src/reanimated2/screenTransition/index.ts

@@ -0,0 +1,12 @@
+'use strict';
+
+export {
+  startScreenTransition,
+  finishScreenTransition,
+} from './animationManager';
+export { ScreenTransition } from './presets';
+export type {
+  AnimatedScreenTransition,
+  GoBackGesture,
+  ScreenTransitionConfig,
+} from './commonTypes';

package/src/reanimated2/screenTransition/presets.ts

@@ -0,0 +1,137 @@
+'use strict';
+
+import type { AnimatedScreenTransition } from './commonTypes';
+
+const SwipeRight: AnimatedScreenTransition = {
+  topScreenStyle: (event) => {
+    'worklet';
+    return {
+      transform: [{ translateX: event.translationX }],
+    };
+  },
+  belowTopScreenStyle: (event, screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateX: (event.translationX - screenSize.width) * 0.3 },
+      ],
+    };
+  },
+};
+
+const SwipeLeft: AnimatedScreenTransition = {
+  topScreenStyle: (event) => {
+    'worklet';
+    return {
+      transform: [{ translateX: event.translationX }],
+    };
+  },
+  belowTopScreenStyle: (event, screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateX: (event.translationX + screenSize.width) * 0.3 },
+      ],
+    };
+  },
+};
+
+const SwipeDown: AnimatedScreenTransition = {
+  topScreenStyle: (event) => {
+    'worklet';
+    return {
+      transform: [{ translateY: event.translationY }],
+    };
+  },
+  belowTopScreenStyle: (event, screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateY: (event.translationY - screenSize.height) * 0.3 },
+      ],
+    };
+  },
+};
+
+const SwipeUp: AnimatedScreenTransition = {
+  topScreenStyle: (event) => {
+    'worklet';
+    return {
+      transform: [{ translateY: event.translationY }],
+    };
+  },
+  belowTopScreenStyle: (event, screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateY: (event.translationY + screenSize.height) * 0.3 },
+      ],
+    };
+  },
+};
+
+const TwoDimensional: AnimatedScreenTransition = {
+  topScreenStyle: (event, _screenSize) => {
+    'worklet';
+    return {
+      transform: [
+        { translateX: event.translationX },
+        { translateY: event.translationY },
+      ],
+    };
+  },
+  belowTopScreenStyle: (_event, _screenSize) => {
+    'worklet';
+    return {};
+  },
+};
+
+const Horizontal: AnimatedScreenTransition = {
+  topScreenStyle: (event, _screenSize) => {
+    'worklet';
+    return {
+      transform: [{ translateX: event.translationX }],
+    };
+  },
+  belowTopScreenStyle: (_event, _screenSize) => {
+    'worklet';
+    return {};
+  },
+};
+
+const Vertical: AnimatedScreenTransition = {
+  topScreenStyle: (event, _screenSize) => {
+    'worklet';
+    return {
+      transform: [{ translateY: event.translationY }],
+    };
+  },
+  belowTopScreenStyle: (_event, _screenSize) => {
+    'worklet';
+    return {};
+  },
+};
+
+const SwipeRightFade: AnimatedScreenTransition = {
+  topScreenStyle: (event, screenSize) => {
+    'worklet';
+    return {
+      opacity: 1 - Math.abs(event.translationX / screenSize.width),
+    };
+  },
+  belowTopScreenStyle: (_event, _screenSize) => {
+    'worklet';
+    return {};
+  },
+};
+
+export const ScreenTransition = {
+  SwipeRight,
+  SwipeLeft,
+  SwipeDown,
+  SwipeUp,
+  Horizontal,
+  Vertical,
+  TwoDimensional,
+  SwipeRightFade,
+};

package/src/reanimated2/screenTransition/styleUpdater.ts

@@ -0,0 +1,73 @@
+'use strict';
+import { isFabric } from '../PlatformChecker';
+import updateProps from '../UpdateProps';
+import type { ShadowNodeWrapper, SharedValue } from '../commonTypes';
+import type { Descriptor } from '../hook/commonTypes';
+import type {
+  PanGestureHandlerEventPayload,
+  ScreenTransitionConfig,
+} from './commonTypes';
+
+const IS_FABRIC = isFabric();
+
+function createViewDescriptorPaper(screenId: number | ShadowNodeWrapper) {
+  'worklet';
+  return { tag: screenId, name: 'RCTView' };
+}
+function createViewDescriptorFabric(screenId: number | ShadowNodeWrapper) {
+  'worklet';
+  return { shadowNodeWrapper: screenId };
+}
+const createViewDescriptor = IS_FABRIC
+  ? createViewDescriptorFabric
+  : createViewDescriptorPaper;
+
+function applyStyleForTopScreen(
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload
+) {
+  'worklet';
+  const { screenDimensions, topScreenId, screenTransition } =
+    screenTransitionConfig;
+  const { topScreenStyle: computeTopScreenStyle } = screenTransition;
+  const topScreenStyle = computeTopScreenStyle(event, screenDimensions);
+  const topScreenDescriptor = {
+    value: [createViewDescriptor(topScreenId)],
+  };
+  updateProps(
+    topScreenDescriptor as SharedValue<Descriptor[]>,
+    topScreenStyle,
+    undefined
+  );
+}
+
+export function applyStyleForBelowTopScreen(
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload
+) {
+  'worklet';
+  const { screenDimensions, belowTopScreenId, screenTransition } =
+    screenTransitionConfig;
+  const { belowTopScreenStyle: computeBelowTopScreenStyle } = screenTransition;
+  const belowTopScreenStyle = computeBelowTopScreenStyle(
+    event,
+    screenDimensions
+  );
+  const belowTopScreenDescriptor = {
+    value: [createViewDescriptor(belowTopScreenId)],
+  };
+  updateProps(
+    belowTopScreenDescriptor as SharedValue<Descriptor[]>,
+    belowTopScreenStyle,
+    undefined
+  );
+}
+
+export function applyStyle(
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload
+) {
+  'worklet';
+  applyStyleForTopScreen(screenTransitionConfig, event);
+  applyStyleForBelowTopScreen(screenTransitionConfig, event);
+}

package/src/reanimated2/screenTransition/swipeSimulator.ts

@@ -0,0 +1,238 @@
+'use strict';
+import type {
+  PanGestureHandlerEventPayload,
+  ScreenTransitionConfig,
+  LockAxis,
+} from './commonTypes';
+import { applyStyle, applyStyleForBelowTopScreen } from './styleUpdater';
+import { RNScreensTurboModule } from './RNScreensTurboModule';
+
+const BASE_VELOCITY = 400;
+const ADDITIONAL_VELOCITY_FACTOR_X = 400;
+const ADDITIONAL_VELOCITY_FACTOR_Y = 500;
+const ADDITIONAL_VELOCITY_FACTOR_XY = 600;
+
+function computeEasingProgress(
+  startingTimestamp: number,
+  distance: number,
+  velocity: number
+) {
+  'worklet';
+  if (Math.abs(distance) < 1) {
+    return 1;
+  }
+  const elapsedTime = (_getAnimationTimestamp() - startingTimestamp) / 1000;
+  const currentPosition = velocity * elapsedTime;
+  const progress = currentPosition / distance;
+  return progress;
+}
+
+function easing(x: number): number {
+  'worklet';
+  // based on https://easings.net/#easeOutQuart
+  return 1 - Math.pow(1 - x, 5);
+}
+
+function computeProgress(
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload,
+  isTransitionCanceled: boolean
+) {
+  'worklet';
+  const screenDimensions = screenTransitionConfig.screenDimensions;
+  const progressX = Math.abs(event.translationX / screenDimensions.width);
+  const progressY = Math.abs(event.translationY / screenDimensions.height);
+  const maxProgress = Math.max(progressX, progressY);
+  const progress = isTransitionCanceled ? maxProgress / 2 : maxProgress;
+  return progress;
+}
+
+function maybeScheduleNextFrame(
+  step: () => void,
+  didScreenReachDestination: boolean,
+  screenTransitionConfig: ScreenTransitionConfig,
+  event: PanGestureHandlerEventPayload,
+  isTransitionCanceled: boolean
+) {
+  'worklet';
+  if (!didScreenReachDestination) {
+    const stackTag = screenTransitionConfig.stackTag;
+    const progress = computeProgress(
+      screenTransitionConfig,
+      event,
+      isTransitionCanceled
+    );
+    RNScreensTurboModule.updateTransition(stackTag, progress);
+    requestAnimationFrame(step);
+  } else {
+    screenTransitionConfig.onFinishAnimation?.();
+  }
+}
+
+export function getSwipeSimulator(
+  event: PanGestureHandlerEventPayload,
+  screenTransitionConfig: ScreenTransitionConfig,
+  lockAxis?: LockAxis
+) {
+  'worklet';
+  const screenDimensions = screenTransitionConfig.screenDimensions;
+  const startTimestamp = _getAnimationTimestamp();
+  const { isTransitionCanceled } = screenTransitionConfig;
+  const startingPosition = {
+    x: event.translationX,
+    y: event.translationY,
+  };
+  const direction = {
+    x: Math.sign(event.translationX),
+    y: Math.sign(event.translationY),
+  };
+  const finalPosition = isTransitionCanceled
+    ? { x: 0, y: 0 }
+    : {
+        x: direction.x * screenDimensions.width,
+        y: direction.y * screenDimensions.height,
+      };
+  const distance = {
+    x: Math.abs(finalPosition.x - startingPosition.x),
+    y: Math.abs(finalPosition.y - startingPosition.y),
+  };
+  const didScreenReachDestination = {
+    x: false,
+    y: false,
+  };
+  const velocity = { x: BASE_VELOCITY, y: BASE_VELOCITY };
+  if (lockAxis === 'x') {
+    velocity.y = 0;
+    velocity.x +=
+      (ADDITIONAL_VELOCITY_FACTOR_X * distance.x) / screenDimensions.width;
+  } else if (lockAxis === 'y') {
+    velocity.x = 0;
+    velocity.y +=
+      (ADDITIONAL_VELOCITY_FACTOR_Y * distance.y) / screenDimensions.height;
+  } else {
+    const euclideanDistance = Math.sqrt(distance.x ** 2 + distance.y ** 2);
+    const screenDiagonal = Math.sqrt(
+      screenDimensions.width ** 2 + screenDimensions.height ** 2
+    );
+    const velocityVectorLength =
+      BASE_VELOCITY +
+      (ADDITIONAL_VELOCITY_FACTOR_XY * euclideanDistance) / screenDiagonal;
+    if (Math.abs(startingPosition.x) > Math.abs(startingPosition.y)) {
+      velocity.x = velocityVectorLength;
+      velocity.y =
+        velocityVectorLength *
+        Math.abs(startingPosition.y / startingPosition.x);
+    } else {
+      velocity.x =
+        velocityVectorLength *
+        Math.abs(startingPosition.x / startingPosition.y);
+      velocity.y = velocityVectorLength;
+    }
+  }
+
+  if (isTransitionCanceled) {
+    function didScreenReachDestinationCheck() {
+      if (lockAxis === 'x') {
+        return didScreenReachDestination.x;
+      } else if (lockAxis === 'y') {
+        return didScreenReachDestination.y;
+      } else {
+        return didScreenReachDestination.x && didScreenReachDestination.y;
+      }
+    }
+
+    function restoreOriginalStyleForBelowTopScreen() {
+      event.translationX = direction.x * screenDimensions.width;
+      event.translationY = direction.y * screenDimensions.height;
+      applyStyleForBelowTopScreen(screenTransitionConfig, event);
+    }
+
+    const computeFrame = () => {
+      const progress = {
+        x: computeEasingProgress(startTimestamp, distance.x, velocity.x),
+        y: computeEasingProgress(startTimestamp, distance.y, velocity.y),
+      };
+      event.translationX =
+        startingPosition.x - direction.x * distance.x * easing(progress.x);
+      event.translationY =
+        startingPosition.y - direction.y * distance.y * easing(progress.y);
+      if (direction.x > 0) {
+        if (event.translationX <= 0) {
+          didScreenReachDestination.x = true;
+          event.translationX = 0;
+        }
+      } else {
+        if (event.translationX >= 0) {
+          didScreenReachDestination.x = true;
+          event.translationX = 0;
+        }
+      }
+      if (direction.y > 0) {
+        if (event.translationY <= 0) {
+          didScreenReachDestination.y = true;
+          event.translationY = 0;
+        }
+      } else {
+        if (event.translationY >= 0) {
+          didScreenReachDestination.y = true;
+          event.translationY = 0;
+        }
+      }
+      applyStyle(screenTransitionConfig, event);
+      const finished = didScreenReachDestinationCheck();
+      if (finished) {
+        restoreOriginalStyleForBelowTopScreen();
+      }
+      maybeScheduleNextFrame(
+        computeFrame,
+        finished,
+        screenTransitionConfig,
+        event,
+        isTransitionCanceled
+      );
+    };
+    return computeFrame;
+  } else {
+    const computeFrame = () => {
+      const progress = {
+        x: computeEasingProgress(startTimestamp, distance.x, velocity.x),
+        y: computeEasingProgress(startTimestamp, distance.y, velocity.y),
+      };
+      event.translationX =
+        startingPosition.x + direction.x * distance.x * easing(progress.x);
+      event.translationY =
+        startingPosition.y + direction.y * distance.y * easing(progress.y);
+      if (direction.x > 0) {
+        if (event.translationX >= screenDimensions.width) {
+          didScreenReachDestination.x = true;
+          event.translationX = screenDimensions.width;
+        }
+      } else {
+        if (event.translationX <= -screenDimensions.width) {
+          didScreenReachDestination.x = true;
+          event.translationX = -screenDimensions.width;
+        }
+      }
+      if (direction.y > 0) {
+        if (event.translationY >= screenDimensions.height) {
+          didScreenReachDestination.y = true;
+          event.translationY = screenDimensions.height;
+        }
+      } else {
+        if (event.translationY <= -screenDimensions.height) {
+          didScreenReachDestination.y = true;
+          event.translationY = -screenDimensions.height;
+        }
+      }
+      applyStyle(screenTransitionConfig, event);
+      maybeScheduleNextFrame(
+        computeFrame,
+        didScreenReachDestination.x || didScreenReachDestination.y,
+        screenTransitionConfig,
+        event,
+        isTransitionCanceled
+      );
+    };
+    return computeFrame;
+  }
+}