react-native-screen-transitions 2.4.2-beta.2 → 3.0.0-beta.0

package/src/shared/configs/presets.ts

@@ -0,0 +1,628 @@
+import { Platform } from "react-native";
+import {
+	Extrapolation,
+	interpolate,
+	interpolateColor,
+} from "react-native-reanimated";
+import type { ScreenTransitionConfig } from "../types/core";
+import { DefaultSpec } from "./specs";
+
+const platform = Platform.OS;
+
+export const SlideFromTop = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: "vertical-inverted",
+		screenStyleInterpolator: ({
+			progress,
+			layouts: {
+				screen: { height },
+			},
+		}) => {
+			"worklet";
+
+			const y = interpolate(progress, [0, 1, 2], [-height, 0, height]);
+
+			return {
+				contentStyle: {
+					transform: [{ translateY: y }],
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+
+		...config,
+	};
+};
+
+export const ZoomIn = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: false,
+		screenStyleInterpolator: ({ progress }) => {
+			"worklet";
+
+			const scale = interpolate(
+				progress,
+				[0, 1, 2],
+				[0.5, 1, 0.5],
+				Extrapolation.CLAMP,
+			);
+
+			const opacity = interpolate(
+				progress,
+				[0, 1, 2],
+				[0, 1, 0],
+				Extrapolation.CLAMP,
+			);
+
+			return {
+				contentStyle: {
+					transform: [{ scale }],
+					opacity,
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};
+
+export const SlideFromBottom = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: "vertical",
+		screenStyleInterpolator: ({
+			layouts: {
+				screen: { height },
+			},
+			progress,
+		}) => {
+			"worklet";
+
+			const y = interpolate(progress, [0, 1, 2], [height, 0, -height]);
+
+			return {
+				contentStyle: {
+					transform: [{ translateY: y }],
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};
+
+export const DraggableCard = (
+	config: Partial<ScreenTransitionConfig> = {},
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: ["horizontal", "vertical"],
+		screenStyleInterpolator: ({ current, progress, layouts: { screen } }) => {
+			"worklet";
+
+			/** Combined */
+			const scale = interpolate(progress, [0, 1, 2], [0, 1, 0.75]);
+
+			/** Vertical */
+			const translateY = interpolate(
+				current.gesture.normalizedY,
+				[-1, 1],
+				[-screen.height * 0.5, screen.height * 0.5],
+				"clamp",
+			);
+
+			/** Horizontal */
+			const translateX = interpolate(
+				current.gesture.normalizedX,
+				[-1, 1],
+				[-screen.width * 0.5, screen.width * 0.5],
+				"clamp",
+			);
+
+			return {
+				contentStyle: {
+					transform: [{ scale }, { translateY: translateY }, { translateX }],
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...config,
+	};
+};
+
+export const ElasticCard = (
+	config: Partial<ScreenTransitionConfig> & {
+		elasticFactor?: number;
+	} = { elasticFactor: 0.5 },
+): ScreenTransitionConfig => {
+	return {
+		enableTransitions: true,
+		gestureEnabled: true,
+		gestureDirection: "bidirectional",
+		screenStyleInterpolator: ({
+			current,
+			next,
+			layouts: { screen },
+			progress,
+		}) => {
+			"worklet";
+
+			/**
+			 * Applies to both screens ( previous and incoming)
+			 */
+			const scale = interpolate(progress, [0, 1, 2], [0, 1, 0.8]);
+
+			// applies to current screen
+			const maxElasticityX = screen.width * (config.elasticFactor ?? 0.5);
+			const maxElasticityY = screen.height * (config.elasticFactor ?? 0.5);
+			const translateX = interpolate(
+				current.gesture.normalizedX,
+				[-1, 0, 1],
+				[-maxElasticityX, 0, maxElasticityX],
+				"clamp",
+			);
+
+			const translateY = interpolate(
+				current.gesture.normalizedY,
+				[-1, 0, 1],
+				[-maxElasticityY, 0, maxElasticityY],
+				"clamp",
+			);
+
+			// applies to unfocused screen ( previous screen )
+			const overlayColor = interpolateColor(
+				progress,
+				[0, 1],
+				["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"],
+			);
+
+			return {
+				contentStyle: {
+					transform: [{ scale }, { translateX }, { translateY }],
+				},
+				overlayStyle: {
+					backgroundColor: !next ? overlayColor : "rgba(0,0,0,0)",
+				},
+			};
+		},
+		transitionSpec: {
+			open: DefaultSpec,
+			close: DefaultSpec,
+		},
+		...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,
+			active,
+		}) => {
+			"worklet";
+
+			const normX = active.gesture.normalizedX;
+			const normY = active.gesture.normalizedY;
+
+			// animations for both bounds
+			const dragX = interpolate(
+				normX,
+				[-1, 0, 1],
+				[-width * 0.7, 0, width * 0.7],
+				"clamp",
+			);
+			const dragY = interpolate(
+				normY,
+				[-1, 0, 1],
+				[-height * 0.4, 0, height * 0.4],
+				"clamp",
+			);
+			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,
+				//@ts-expect-error
+				restSpeedThreshold: 0.02,
+			},
+			close: {
+				stiffness: 1500,
+				damping: 1000,
+				mass: 3,
+				overshootClamping: true,
+				//@ts-expect-error
+				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,
+			active,
+		}) => {
+			"worklet";
+
+			const normX = active.gesture.normalizedX;
+			const normY = active.gesture.normalizedY;
+			const initialDirection = active.gesture.direction;
+
+			/**
+			 * ===============================
+			 * Animations for both bounds
+			 * ===============================
+			 */
+			const xResistance = initialDirection === "horizontal" ? 0.7 : 0.4;
+			const yResistance = initialDirection === "vertical" ? 0.7 : 0.4;
+
+			const xScaleOuput = initialDirection === "horizontal" ? [1, 0.5] : [1, 1];
+			const yScaleOuput = initialDirection === "vertical" ? [1, 0.5] : [1, 1];
+
+			const dragX = interpolate(
+				normX,
+				[-1, 0, 1],
+				[-screen.width * xResistance, 0, screen.width * xResistance],
+				"clamp",
+			);
+			const dragY = interpolate(
+				normY,
+				[-1, 0, 1],
+				[-screen.height * yResistance, 0, screen.height * yResistance],
+				"clamp",
+			);
+			const dragXScale = interpolate(normX, [0, 1], xScaleOuput);
+			const dragYScale = interpolate(normY, [0, 1], yScaleOuput);
+
+			const boundValues = bounds({
+				method: focused ? "content" : "transform",
+				anchor: "top",
+				scaleMode: "uniform",
+				raw: true,
+			});
+
+			const opacity = interpolate(
+				progress,
+				[0, 0.25, 1.25, 2],
+				[0, 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,
+				//@ts-expect-error
+				restSpeedThreshold: 0.02,
+			},
+			close: {
+				stiffness: 600,
+				damping: 60,
+				mass: 4,
+				overshootClamping: false,
+				//@ts-expect-error
+				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/shared/constants.ts

@@ -0,0 +1,108 @@
+import type { ParamListBase, RouteProp } from "@react-navigation/native";
+import type { MeasuredDimensions } from "react-native-reanimated";
+import type { ScreenTransitionState } from "./types/animation";
+import type { BoundEntry } from "./types/bounds";
+import type { Layout } from "./types/core";
+import type { ActivationArea } from "./types/gesture";
+import type { Complete } from "./types/utils";
+import type { BoundsBuilderOptions } from "./utils/bounds/_types/builder";
+
+/**
+ * Masked view integration
+ */
+export const MASK_STYLE_ID = "_ROOT_MASKED";
+export const CONTAINER_STYLE_ID = "_ROOT_CONTAINER";
+
+/**
+ * Styles
+ */
+export const NO_STYLES = Object.freeze({});
+
+/**
+ * Default screen transition state
+ */
+export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
+	Object.freeze({
+		progress: 0,
+		closing: 0,
+		animating: 0,
+		gesture: {
+			x: 0,
+			y: 0,
+			normalizedX: 0,
+			normalizedY: 0,
+			isDismissing: 0,
+			isDragging: 0,
+			direction: null,
+		},
+		bounds: {} as Record<string, BoundEntry>,
+		route: {} as RouteProp<ParamListBase>,
+	});
+
+/**
+ * Bounds API Defaults
+ */
+export const NO_BOUNDS_MAP: Record<string, BoundEntry> = Object.freeze({});
+export const EMPTY_BOUND_HELPER_RESULT = Object.freeze({});
+export const EMPTY_BOUND_HELPER_RESULT_RAW = Object.freeze({
+	scaleX: 1,
+	scaleY: 1,
+	scale: 1,
+	translateX: 0,
+	translateY: 0,
+	width: 0,
+	height: 0,
+});
+export const ENTER_RANGE = [0, 1] as const;
+export const EXIT_RANGE = [1, 2] as const;
+
+export const FULLSCREEN_DIMENSIONS = (
+	dimensions: Layout,
+): MeasuredDimensions => {
+	"worklet";
+	return {
+		x: 0,
+		y: 0,
+		pageX: 0,
+		pageY: 0,
+		width: dimensions.width,
+		height: dimensions.height,
+	};
+};
+
+export const DEFAULT_BUILDER_OPTIONS: Complete<
+	Omit<BoundsBuilderOptions, "id">
+> = Object.freeze({
+	gestures: { x: 0, y: 0 },
+	toFullscreen: false,
+	absolute: false,
+	relative: true,
+	method: "transform",
+	contentScaleMode: "auto",
+	//
+	space: "relative",
+	target: "bound",
+	scaleMode: "match",
+	anchor: "center",
+	raw: false,
+} as const);
+
+/**
+ * Default gesture config
+ */
+export const GESTURE_VELOCITY_IMPACT = 0.3;
+export const DEFAULT_GESTURE_DIRECTION = "horizontal";
+export const DEFAULT_GESTURE_ENABLED = false;
+export const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
+export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
+
+/**
+ * Default gesture offset
+ */
+export const GESTURE_ACTIVATION_THRESHOLD_X = 10;
+export const GESTURE_ACTIVATION_THRESHOLD_Y = 10;
+export const GESTURE_FAIL_TOLERANCE_X = 15;
+export const GESTURE_FAIL_TOLERANCE_Y = 20;
+export const DEFAULT_EDGE_DISTANCE_HORIZONTAL = 50;
+export const DEFAULT_EDGE_DISTANCE_VERTICAL = 135;
+export const DEFAULT_ACTIVATION_AREA = "screen" as const;