react-native-screen-transitions 2.0.4 → 2.1.0

package/src/configs/presets.ts

@@ -1,3 +1,4 @@
+import { Platform } from "react-native";
 import {
 	Extrapolation,
 	interpolate,
@@ -6,6 +7,8 @@ import {
 import type { ScreenTransitionConfig } from "../types/navigator";
 import { DefaultSpec } from "./specs";
 
+const platform = Platform.OS;
+
 export const SlideFromTop = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
@@ -181,9 +184,7 @@ export const ElasticCard = (
 
 			const scale = interpolate(progress, [0, 1, 2], [0, 1, 0.8]);
 
-			/**
-			 * Applies to current screen
-			 */
+			// applies to current screen
 			const maxElasticityX = screen.width * (config.elasticFactor ?? 0.5);
 			const maxElasticityY = screen.height * (config.elasticFactor ?? 0.5);
 			const translateX = interpolate(
@@ -200,9 +201,7 @@ export const ElasticCard = (
 				"clamp",
 			);
 
-			/**
-			 * Applies to unfocused screen ( previous screen )
-			 */
+			// applies to unfocused screen ( previous screen )
 			const overlayColor = interpolateColor(
 				progress,
 				[0, 1],
@@ -225,3 +224,399 @@ export const ElasticCard = (
 		...config,
 	};
 };
+
+export const SharedIGImage = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		gestureEnabled: true,
+		gestureDirection: ["vertical", "horizontal"],
+		enableTransitions: true,
+		gestureDrivesProgress: false,
+		screenStyleInterpolator: ({
+			current,
+			layouts: {
+				screen: { height, width },
+			},
+			bounds,
+			progress,
+			focused,
+			activeBoundId,
+			next,
+		}) => {
+			"worklet";
+
+			const normX = focused
+				? current.gesture.normalizedX
+				: (next?.gesture.normalizedX ?? 0);
+			const normY = focused
+				? current.gesture.normalizedY
+				: (next?.gesture.normalizedY ?? 0);
+
+			// animations for both bounds
+			const dragX = interpolate(
+				normX,
+				[-1, 0, 1],
+				[-width * 0.7, 0, width * 0.7],
+			);
+			const dragY = interpolate(
+				normY,
+				[-1, 0, 1],
+				[-height * 0.4, 0, height * 0.4],
+			);
+			const dragXScale = interpolate(normX, [0, 1], [1, 0.8]);
+			const dragYScale = interpolate(normY, [0, 1], [1, 0.8]);
+
+			const boundValues = bounds({
+				method: focused ? "content" : "transform",
+				scaleMode: "uniform",
+				raw: true,
+			});
+
+			// focused specific animations
+			if (focused) {
+				const maskedValues = bounds({
+					space: "absolute",
+					target: "fullscreen",
+					method: "size",
+					raw: true,
+				});
+
+				return {
+					overlayStyle: {
+						backgroundColor: "black",
+						opacity: interpolate(progress, [0, 1], [0, 0.5]),
+					},
+					contentStyle: {
+						transform: [
+							{ translateX: dragX },
+							{ translateY: dragY },
+							{ scale: dragXScale },
+							{ scale: dragYScale },
+						],
+					},
+
+					_ROOT_CONTAINER: {
+						transform: [
+							{ translateX: boundValues.translateX || 0 },
+							{ translateY: boundValues.translateY || 0 },
+							//@ts-expect-error
+							{ scale: boundValues.scale || 1 },
+						],
+					},
+					_ROOT_MASKED: {
+						width: maskedValues.width,
+						height: maskedValues.height,
+						transform: [
+							{ translateX: maskedValues.translateX || 0 },
+							{ translateY: maskedValues.translateY || 0 },
+						],
+						borderRadius: interpolate(progress, [0, 1], [0, 24]),
+					},
+				};
+			}
+
+			return {
+				contentStyle: {
+					pointerEvents: current.gesture.isDismissing ? "none" : "auto",
+				},
+				[activeBoundId]: {
+					transform: [
+						{ translateX: dragX || 0 },
+						{ translateY: dragY || 0 },
+						{ translateX: boundValues.translateX || 0 },
+						{ translateY: boundValues.translateY || 0 },
+						{ scaleX: boundValues.scaleX || 1 },
+						{ scaleY: boundValues.scaleY || 1 },
+						{ scale: dragXScale },
+						{ scale: dragYScale },
+					],
+				},
+			};
+		},
+		transitionSpec: {
+			open: {
+				stiffness: 1500,
+				damping: 1000,
+				mass: 3,
+				overshootClamping: true,
+				restSpeedThreshold: 0.02,
+			},
+			close: {
+				stiffness: 1500,
+				damping: 1000,
+				mass: 3,
+				overshootClamping: true,
+				restSpeedThreshold: 0.02,
+			},
+		},
+		...config,
+	};
+};
+
+export const SharedAppleMusic = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: ["vertical", "horizontal"],
+		gestureDrivesProgress: false,
+		screenStyleInterpolator: ({
+			bounds,
+			activeBoundId,
+			focused,
+			progress,
+			layouts: { screen },
+			current,
+			next,
+		}) => {
+			"worklet";
+
+			const normX = focused
+				? current.gesture.normalizedX
+				: (next?.gesture.normalizedX ?? 0);
+			const normY = focused
+				? current.gesture.normalizedY
+				: (next?.gesture.normalizedY ?? 0);
+
+			/**
+			 * ===============================
+			 * Animations for both bounds
+			 * ===============================
+			 */
+			const dragX = interpolate(normX, [0, 1], [0, screen.width * 0.8]);
+			const dragY = interpolate(normY, [0, 1], [0, screen.height * 0.8]);
+			const dragXScale = interpolate(normX, [0, 1], [1, 0.75]);
+			const dragYScale = interpolate(normY, [0, 1], [1, 0.75]);
+
+			const boundValues = bounds({
+				method: focused ? "content" : "transform",
+				anchor: "top",
+				scaleMode: "uniform",
+				raw: true,
+			});
+
+			const opacity = interpolate(
+				progress,
+				[0, 0.35, 1, 1.25, 2],
+				[0, 1, 1, 1, 0],
+				"clamp",
+			);
+
+			/**
+			 * ===============================
+			 * Focused specific animations
+			 * ===============================
+			 */
+			if (focused) {
+				const maskedValues = bounds({
+					space: "absolute",
+					method: "size",
+					target: "fullscreen",
+					raw: true,
+				});
+
+				// Apple Music style drop shadow that increases with drag magnitude
+				const dragMagnitude = Math.max(Math.abs(normX), Math.abs(normY));
+				const shadowOpacity = interpolate(
+					dragMagnitude,
+					[0, 1],
+					[0, 0.25],
+					"clamp",
+				);
+				const shadowRadius = interpolate(
+					dragMagnitude,
+					[0, 1],
+					[0, 24],
+					"clamp",
+				);
+				const shadowOffsetY = interpolate(
+					dragMagnitude,
+					[0, 1],
+					[0, 20],
+					"clamp",
+				);
+				const elevation = interpolate(dragMagnitude, [0, 1], [0, 24], "clamp");
+
+				const IOSShadowStyle = {
+					shadowColor: "#000",
+					shadowOpacity,
+					shadowRadius,
+					shadowOffset: { width: 0, height: shadowOffsetY },
+				};
+
+				const AndroidShadowStyle = {
+					elevation,
+					shadowColor: "#000",
+				};
+
+				return {
+					contentStyle: {
+						pointerEvents: current.animating ? "none" : "auto",
+						transform: [
+							{ translateX: dragX || 0 },
+							{ translateY: dragY || 0 },
+							{ scale: dragXScale },
+							{ scale: dragYScale },
+						],
+						opacity,
+						...(platform === "ios" ? IOSShadowStyle : AndroidShadowStyle),
+					},
+					_ROOT_CONTAINER: {
+						transform: [
+							{ translateX: boundValues.translateX || 0 },
+							{ translateY: boundValues.translateY || 0 },
+							//@ts-expect-error
+							{ scale: boundValues.scale || 1 },
+						],
+					},
+					_ROOT_MASKED: {
+						width: maskedValues.width,
+						height: maskedValues.height,
+						transform: [
+							{ translateX: maskedValues.translateX || 0 },
+							{ translateY: maskedValues.translateY || 0 },
+						],
+						borderRadius: interpolate(progress, [0, 1], [0, 24]),
+					},
+				};
+			}
+
+			/**
+			 * ===============================
+			 * Unfocused specific animations
+			 * ===============================
+			 */
+
+			const scaledBoundTranslateX = (boundValues.translateX || 0) * dragXScale;
+			const scaledBoundTranslateY = (boundValues.translateY || 0) * dragYScale;
+			const scaledBoundScaleX = (boundValues.scaleX || 1) * dragXScale;
+			const scaledBoundScaleY = (boundValues.scaleY || 1) * dragYScale;
+
+			const contentScale = interpolate(progress, [1, 2], [1, 0.9], "clamp");
+
+			return {
+				[activeBoundId]: {
+					transform: [
+						{ translateX: dragX || 0 },
+						{ translateY: dragY || 0 },
+						{ translateX: scaledBoundTranslateX },
+						{ translateY: scaledBoundTranslateY },
+						{ scale: dragXScale },
+						{ scale: dragYScale },
+						{ scaleX: scaledBoundScaleX },
+						{ scaleY: scaledBoundScaleY },
+					],
+					opacity,
+					zIndex: current.animating ? 999 : -1,
+					position: "relative",
+				},
+				contentStyle: {
+					transform: [{ scale: contentScale }],
+				},
+			};
+		},
+		transitionSpec: {
+			open: {
+				stiffness: 1000,
+				damping: 500,
+				mass: 3,
+				overshootClamping: true,
+				restSpeedThreshold: 0.02,
+			},
+			close: {
+				stiffness: 600,
+				damping: 60,
+				mass: 3,
+				overshootClamping: false,
+				restSpeedThreshold: 0.02,
+				restDisplacementThreshold: 0.002,
+			},
+		},
+		...config,
+	};
+};
+
+export const SharedXImage = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: ["vertical", "vertical-inverted"],
+		gestureDrivesProgress: false,
+		screenStyleInterpolator: ({
+			focused,
+			activeBoundId,
+			bounds,
+			current,
+			layouts: { screen },
+			progress,
+		}) => {
+			"worklet";
+
+			// twitter doesn't animate the unfocused screen
+			if (!focused) return {};
+
+			const boundValues = bounds({ method: "transform", raw: true });
+
+			// content styles
+			const dragY = interpolate(
+				current.gesture.normalizedY,
+				[-1, 0, 1],
+				[-screen.height, 0, screen.height],
+			);
+
+			// dynamically changes direction based on the drag direction
+			const contentY = interpolate(
+				progress,
+				[0, 1],
+				[dragY >= 0 ? screen.height : -screen.height, 0],
+			);
+
+			const overlayClr = interpolateColor(
+				current.progress - Math.abs(current.gesture.normalizedY),
+				[0, 1],
+				["rgba(0,0,0,0)", "rgba(0,0,0,1)"],
+			);
+
+			const borderRadius = interpolate(current.progress, [0, 1], [12, 0]);
+
+			// bound styles - only enter animation
+			const x = !current.closing ? boundValues.translateX : 0;
+			const y = !current.closing ? boundValues.translateY : 0;
+			const scaleX = !current.closing ? boundValues.scaleX : 1;
+			const scaleY = !current.closing ? boundValues.scaleY : 1;
+
+			return {
+				[activeBoundId]: {
+					transform: [
+						{
+							translateX: x,
+						},
+						{
+							translateY: y,
+						},
+						{ scaleX: scaleX },
+						{ scaleY: scaleY },
+					],
+					borderRadius,
+					overflow: "hidden",
+				},
+				contentStyle: {
+					transform: [{ translateY: contentY }, { translateY: dragY }],
+					pointerEvents: current.animating ? "none" : "auto",
+				},
+				overlayStyle: {
+					backgroundColor: overlayClr,
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};

package/src/configs/specs.ts

@@ -5,5 +5,5 @@ export const DefaultSpec: WithSpringConfig = {
 	damping: 500,
 	mass: 3,
 	overshootClamping: true,
-	restSpeedThreshold: 0.01,
+	restSpeedThreshold: 0.02,
 };

package/src/hooks/animation/use-associated-style.tsx

@@ -1,27 +1,28 @@
 import { useAnimatedStyle } from "react-native-reanimated";
-import { _useScreenAnimation } from "./use-screen-animation";
+import { useTransitionStyles } from "../../providers/transition-styles";
+
+type Props = {
+	id?: string;
+};
+
+const EMPTY_STYLE = Object.freeze({});
 
 /**
  * This hook is used to get the associated styles for a given styleId.
  * It is used to get the associated styles for a given styleId.
  * It is used to get the associated styles for a given styleId.
  */
-export const useAssociatedStyles = ({ id }: { id?: string } = {}) => {
-	const { screenStyleInterpolator, screenInterpolatorProps } =
-		_useScreenAnimation();
+export const useAssociatedStyles = ({ id }: Props = {}) => {
+	const stylesMap = useTransitionStyles();
 
 	const associatedStyles = useAnimatedStyle(() => {
 		"worklet";
 
-		if (!id || !screenStyleInterpolator) {
-			return {};
+		if (!id || !stylesMap) {
+			return EMPTY_STYLE;
 		}
 
-		return (
-			screenStyleInterpolator(screenInterpolatorProps.value)[id] || {
-				opacity: 1, // <-- This fixes flickering?? We'll have to deep dive this?? wtf
-			}
-		);
+		return stylesMap.value[id] || EMPTY_STYLE;
 	});
 
 	return { associatedStyles };

package/src/hooks/animation/use-screen-animation.tsx

@@ -1,4 +1,5 @@
 import type { ParamListBase, RouteProp } from "@react-navigation/native";
+import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -12,7 +13,7 @@ import type {
 } from "../../types/animation";
 import type { BoundEntry } from "../../types/bounds";
 import type { NativeStackDescriptor } from "../../types/navigator";
-import { buildBoundsAccessor } from "../../utils/bounds";
+import { derivations } from "../../utils/animation/derivations";
 
 type BuiltState = {
 	progress: SharedValue<number>;
@@ -22,7 +23,9 @@ type BuiltState = {
 	route: RouteProp<ParamListBase>;
 };
 
-const FALLBACK = Object.freeze({
+const EMPTY_BOUNDS = Object.freeze({}) as Record<string, BoundEntry>;
+
+const FALLBACK: ScreenTransitionState = Object.freeze({
 	progress: 0,
 	closing: 0,
 	animating: 0,
@@ -38,62 +41,64 @@ const FALLBACK = Object.freeze({
 	route: {} as RouteProp<ParamListBase>,
 });
 
-const useBuildScreenTransitionState = (
-	descriptor: NativeStackDescriptor | undefined,
-): BuiltState | undefined => {
-	const key = descriptor?.route.key;
-	if (!key) return undefined;
-	const progress = Animations.getAnimation(key, "progress");
-	const closing = Animations.getAnimation(key, "closing");
-	const animating = Animations.getAnimation(key, "animating");
-	const gesture = Gestures.getRouteGestures(key);
-	const route = descriptor?.route;
-
-	return { progress, closing, animating, gesture, route };
-};
-
 const unwrap = (
 	s: BuiltState | undefined,
 	key: string | undefined,
 ): ScreenTransitionState | undefined => {
 	"worklet";
-	return s && key
-		? {
-				progress: s.progress.value ?? 0,
-				closing: s.closing.value ?? 0,
-				animating: s.animating.value ?? 0,
-				gesture: {
-					x: s.gesture.x.value ?? 0,
-					y: s.gesture.y.value ?? 0,
-					normalizedX: s.gesture.normalizedX.value ?? 0,
-					normalizedY: s.gesture.normalizedY.value ?? 0,
-					isDismissing: s.gesture.isDismissing.value ?? 0,
-					isDragging: s.gesture.isDragging.value ?? 0,
-				},
-				bounds: Bounds.getBounds(key) ?? {},
-				route: s.route,
-			}
-		: undefined;
+	if (!s || !key) return undefined;
+
+	return {
+		progress: s.progress.value,
+		closing: s.closing.value,
+		animating: s.animating.value,
+		gesture: {
+			x: s.gesture.x.value,
+			y: s.gesture.y.value,
+			normalizedX: s.gesture.normalizedX.value,
+			normalizedY: s.gesture.normalizedY.value,
+			isDismissing: s.gesture.isDismissing.value,
+			isDragging: s.gesture.isDragging.value,
+		},
+		bounds: Bounds.getBounds(key) || EMPTY_BOUNDS,
+		route: s.route,
+	};
+};
+
+const useBuildScreenTransitionState = (
+	descriptor: NativeStackDescriptor | undefined,
+): BuiltState | undefined => {
+	const key = descriptor?.route.key;
+
+	return useMemo(() => {
+		if (!key) return undefined;
+
+		return {
+			progress: Animations.getAnimation(key, "progress"),
+			closing: Animations.getAnimation(key, "closing"),
+			animating: Animations.getAnimation(key, "animating"),
+			gesture: Gestures.getRouteGestures(key),
+			route: descriptor.route,
+		};
+	}, [key, descriptor?.route]);
 };
 
 export function _useScreenAnimation() {
+	const dimensions = useWindowDimensions();
+	const insets = useSafeAreaInsets();
+
 	const {
 		current: currentDescriptor,
 		next: nextDescriptor,
 		previous: previousDescriptor,
 	} = useKeys();
 
-	const dimensions = useWindowDimensions();
-
 	const currentAnimation = useBuildScreenTransitionState(currentDescriptor);
-
 	const nextAnimation = useBuildScreenTransitionState(nextDescriptor);
 	const prevAnimation = useBuildScreenTransitionState(previousDescriptor);
 
-	const insets = useSafeAreaInsets();
-
 	const screenInterpolatorProps = useDerivedValue<ScreenInterpolationProps>(
-		() => {
+		(): ScreenInterpolationProps => {
 			"worklet";
 
 			const previous = unwrap(prevAnimation, previousDescriptor?.route.key);
@@ -101,17 +106,10 @@ export function _useScreenAnimation() {
 			const current =
 				unwrap(currentAnimation, currentDescriptor?.route.key) ?? FALLBACK;
 
-			const progress = current.progress + (next?.progress ?? 0);
-
-			const focused = !next;
-			const activeBoundId = Bounds.getActiveBoundId() || "";
-
-			const bounds = buildBoundsAccessor({
-				activeBoundId,
+			const { progress, focused, activeBoundId, bounds } = derivations({
 				current,
-				previous,
 				next,
-				progress,
+				previous,
 				dimensions,
 			});
 
@@ -125,7 +123,7 @@ export function _useScreenAnimation() {
 				activeBoundId,
 				progress,
 				bounds,
-			} satisfies ScreenInterpolationProps;
+			};
 		},
 	);
 
@@ -135,6 +133,7 @@ export function _useScreenAnimation() {
 
 	return { screenInterpolatorProps, screenStyleInterpolator };
 }
+
 export function useScreenAnimation() {
 	const { screenInterpolatorProps } = _useScreenAnimation();