react-native-screen-transitions 4.0.0-alpha.8 → 4.0.0

package/src/configs/presets.ts

@@ -1,19 +1,11 @@
-import { Platform } from "react-native";
 import {
 	Extrapolation,
 	interpolate,
 	interpolateColor,
 } from "react-native-reanimated";
-import {
-	NAVIGATION_MASK_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-} from "../constants";
 import type { ScreenTransitionConfig } from "../types/screen.types";
-import { normalizeInterpolatedStyle } from "../utils/normalize-interpolated-style";
 import { DefaultSpec } from "./specs";
 
-const platform = Platform.OS;
-
 export const SlideFromTop = (
 	config: Partial<ScreenTransitionConfig> = {},
 ): ScreenTransitionConfig => {
@@ -235,442 +227,3 @@ export const ElasticCard = (
 		...config,
 	};
 };
-
-export const SharedIGImage = ({
-	id,
-	...config
-}: Partial<ScreenTransitionConfig> & {
-	id: string;
-}): ScreenTransitionConfig => {
-	return {
-		gestureEnabled: true,
-		gestureDirection: ["vertical", "horizontal"],
-		enableTransitions: true,
-		screenStyleInterpolator: ({
-			current,
-			layouts: {
-				screen: { height, width },
-			},
-			bounds,
-			progress,
-			focused,
-			active,
-		}) => {
-			"worklet";
-
-			const normX = active.gesture.handoff.normX;
-			const normY = active.gesture.handoff.normY;
-
-			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 navigationStyles =
-				bounds({
-					id,
-				}).navigation.zoom() ?? {};
-
-			// Read the bound-specific slots before normalizing the full result.
-			const sourceStyle = navigationStyles[id] as
-				| Record<string, unknown>
-				| undefined;
-			const containerStyle = navigationStyles[
-				NAVIGATION_MASK_CONTAINER_STYLE_ID
-			] as Record<string, unknown> | undefined;
-			const maskStyle = navigationStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] as
-				| Record<string, unknown>
-				| undefined;
-
-			const normalizedNav = normalizeInterpolatedStyle(
-				navigationStyles as Record<string, any>,
-			);
-
-			if (focused) {
-				return {
-					...normalizedNav,
-					backdrop: {
-						style: {
-							backgroundColor: "black",
-							opacity: interpolate(progress, [0, 1], [0, 0.5]),
-						},
-					},
-					content: {
-						style: {
-							transform: [
-								{ translateX: dragX },
-								{ translateY: dragY },
-								{ scale: dragXScale },
-								{ scale: dragYScale },
-							],
-						},
-					},
-					[NAVIGATION_MASK_CONTAINER_STYLE_ID]: containerStyle
-						? {
-								style: {
-									...containerStyle,
-									transform: [
-										...(((containerStyle.transform as any[]) ?? []) as any[]),
-										{ translateX: dragX * 0.2 },
-										{ translateY: dragY * 0.2 },
-									],
-								},
-							}
-						: undefined,
-					[NAVIGATION_MASK_ELEMENT_STYLE_ID]: maskStyle
-						? {
-								style: {
-									...maskStyle,
-									borderRadius: interpolate(progress, [0, 1], [0, 24]),
-								},
-							}
-						: undefined,
-				};
-			}
-
-			return {
-				...normalizedNav,
-				content: {
-					style: {
-						...(normalizedNav.content?.style ?? {}),
-						pointerEvents: current.gesture.dismissing ? "none" : "auto",
-					},
-				},
-				[id]: {
-					style: {
-						...(sourceStyle ?? {}),
-						transform: [
-							{ translateX: dragX || 0 },
-							{ translateY: dragY || 0 },
-							...(((sourceStyle?.transform as any[]) ?? []) as any[]),
-							{ 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 = ({
-	id,
-	...config
-}: Partial<ScreenTransitionConfig> & {
-	id: string;
-}): ScreenTransitionConfig => {
-	return {
-		enableTransitions: true,
-		gestureEnabled: true,
-		gestureDirection: ["vertical", "horizontal"],
-		screenStyleInterpolator: ({
-			bounds,
-			focused,
-			progress,
-			layouts: { screen },
-			current,
-			active,
-		}) => {
-			"worklet";
-
-			const normX = active.gesture.handoff.normX;
-			const normY = active.gesture.handoff.normY;
-			const initialGesture = active.gesture.handoff.active;
-
-			/**
-			 * ===============================
-			 * Animations for both bounds
-			 * ===============================
-			 */
-			const xResistance = initialGesture === "horizontal" ? 0.7 : 0.4;
-			const yResistance = initialGesture === "vertical" ? 0.7 : 0.4;
-
-			const xScaleOuput = initialGesture === "horizontal" ? [1, 0.5] : [1, 1];
-			const yScaleOuput = initialGesture === "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({ id }).values({
-				method: focused ? "content" : "transform",
-				anchor: "top",
-				scaleMode: "uniform",
-			});
-
-			const opacity = interpolate(
-				progress,
-				[0, 0.25, 1.25, 2],
-				[0, 1, 1, 0],
-				"clamp",
-			);
-
-			/**
-			 * ===============================
-			 * Focused specific animations
-			 * ===============================
-			 */
-			if (focused) {
-				const maskedValues = bounds({ id }).values({
-					space: "absolute",
-					method: "size",
-					target: "fullscreen",
-				});
-
-				// 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 {
-					content: {
-						style: {
-							pointerEvents: current.animating ? "none" : "auto",
-							transform: [
-								{ translateX: dragX || 0 },
-								{ translateY: dragY || 0 },
-								{ scale: dragXScale },
-								{ scale: dragYScale },
-							],
-							opacity,
-							...(platform === "ios" ? IOSShadowStyle : AndroidShadowStyle),
-						},
-					},
-					_ROOT_CONTAINER: {
-						style: {
-							transform: [
-								{ translateX: boundValues.translateX || 0 },
-								{ translateY: boundValues.translateY || 0 },
-								//@ts-expect-error
-								{ scale: boundValues.scale || 1 },
-							],
-						},
-					},
-					_ROOT_MASKED: {
-						style: {
-							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 {
-				[id]: {
-					style: {
-						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",
-					},
-				},
-				content: {
-					style: {
-						transform: [{ scale: contentScale }],
-					},
-				},
-			};
-		},
-		transitionSpec: {
-			open: {
-				stiffness: 1000,
-				damping: 500,
-				mass: 3,
-				overshootClamping: true,
-				//@ts-expect-error - Should not lead to any issues
-				restSpeedThreshold: 0.02,
-			},
-			close: {
-				stiffness: 600,
-				damping: 60,
-				mass: 4,
-				overshootClamping: false,
-				//@ts-expect-error - Should not lead to any issues
-				restSpeedThreshold: 0.02,
-				restDisplacementThreshold: 0.002,
-			},
-		},
-		...config,
-	};
-};
-
-export const SharedXImage = ({
-	id,
-	...config
-}: Partial<ScreenTransitionConfig> & {
-	id: string;
-}): ScreenTransitionConfig => {
-	return {
-		//@ts-expect-error - Should not lead to any issues
-		enableTransitions: true,
-		gestureEnabled: true,
-		gestureDirection: ["vertical", "vertical-inverted"],
-		screenStyleInterpolator: ({
-			focused,
-			bounds,
-			current,
-			layouts: { screen },
-			progress,
-		}) => {
-			"worklet";
-
-			if (!focused) return {};
-
-			const navigationStyles =
-				bounds({
-					id,
-				}).navigation.zoom() ?? {};
-			const maskStyle = navigationStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] as
-				| Record<string, unknown>
-				| undefined;
-
-			const normalizedNav = normalizeInterpolatedStyle(
-				navigationStyles as Record<string, any>,
-			);
-
-			const dragY = interpolate(
-				current.gesture.normY,
-				[-1, 0, 1],
-				[-screen.height, 0, screen.height],
-			);
-
-			const contentY = interpolate(
-				progress,
-				[0, 1],
-				[dragY >= 0 ? screen.height : -screen.height, 0],
-			);
-
-			const overlayClr = interpolateColor(
-				current.progress - Math.abs(current.gesture.normY),
-				[0, 1],
-				["rgba(0,0,0,0)", "rgba(0,0,0,1)"],
-			);
-
-			const borderRadius = interpolate(current.progress, [0, 1], [12, 0]);
-
-			return {
-				...normalizedNav,
-				[NAVIGATION_MASK_ELEMENT_STYLE_ID]: maskStyle
-					? {
-							style: {
-								...maskStyle,
-								borderRadius,
-							},
-						}
-					: undefined,
-				content: {
-					style: {
-						transform: [{ translateY: contentY }, { translateY: dragY }],
-						pointerEvents: current.animating ? "none" : "auto",
-					},
-				},
-				backdrop: {
-					style: {
-						backgroundColor: overlayClr,
-					},
-				},
-			};
-		},
-		transitionSpec: {
-			open: DefaultSpec,
-			close: DefaultSpec,
-		},
-		...config,
-	};
-};

package/src/constants.ts

@@ -10,6 +10,7 @@ import type {
 	GestureTracking,
 	Layout,
 	SheetScrollGestureBehavior,
+	SheetSnapBehavior,
 } from "./types/screen.types";
 import type { BaseStackRoute } from "./types/stack.types";
 
@@ -167,6 +168,7 @@ export const DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE = 1;
 export const DEFAULT_GESTURE_DIRECTION = "horizontal";
 export const DEFAULT_GESTURE_TRACKING: GestureTracking = "auto";
 export const DEFAULT_GESTURE_SNAP_LOCKED = false;
+export const DEFAULT_SHEET_SNAP_BEHAVIOR: SheetSnapBehavior = "continuous";
 export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
 export const DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR: SheetScrollGestureBehavior =
 	"expand-and-collapse";

package/src/index.ts

@@ -50,7 +50,7 @@ export {
 export type {
 	AnimatedViewStyle,
 	AnimationConfig,
-	BoundaryTeleportControl,
+	BoundaryHandoffTarget,
 	BoundsMotion,
 	BoundsMotionFrame,
 	BoundsMotionTransform,
@@ -73,6 +73,8 @@ export type {
 	ScreenInterpolationProps,
 	ScreenLayerComponentProps,
 	ScreenStyleInterpolator,
+	ScreenSurfaceComponent,
+	ScreenSurfaceComponentProps,
 	ScreenTransitionAccessor,
 	ScreenTransitionConfig,
 	ScreenTransitionDepthTarget,
@@ -81,6 +83,7 @@ export type {
 	ScrollGestureAxisState,
 	ScrollGestureState,
 	ScrollMetadataState,
+	SheetSnapBehavior,
 	TransitionInterpolatedStyle,
 	TransitionSlotProps,
 	TransitionSlotStyle,

package/src/navigators/create-blank-stack-navigator.tsx

@@ -1,19 +1,6 @@
-import * as React from "react";
-import {
-	createStandardNavigator,
-	type NavigatorDescriptor,
-} from "standard-navigation";
+import { createStandardNavigator } from "standard-navigation";
 import { StackView } from "../components/stack-view";
-import {
-	type NavigationHostContextValue,
-	NavigationHostProvider,
-} from "../providers/navigation/navigation-host.provider";
-import type {
-	BlankStackDescriptor,
-	BlankStackFactoryOptions,
-	BlankStackNavigationHelpers,
-	BlankStackNavigationOptions,
-} from "../types/blank-stack.types";
+import type { BlankStackNavigationOptions } from "../types/blank-stack.types";
 import type {
 	BaseStackNavigation,
 	BaseStackRoute,
@@ -22,122 +9,27 @@ import type {
 
 export type BlankStackStandardEventMap = {};
 
-export type BlankStackStandardNavigatorProps = BlankStackFactoryOptions & {
+export type BlankStackStandardNavigatorProps = {
 	navigationState?: BaseStackState<BaseStackRoute>;
 	navigation?: BaseStackNavigation;
-	navigationHost?: NavigationHostContextValue;
-};
-
-type StandardDescriptor = NavigatorDescriptor<BlankStackNavigationOptions> & {
-	navigation?: BaseStackNavigation;
-	route?: BaseStackRoute;
 };
 
-type StandardDescriptorMap = Record<string, StandardDescriptor>;
-type BlankStackDescriptorMap = Record<string, BlankStackDescriptor>;
-
-function createDescriptorMap({
-	routes,
-	descriptors,
-	navigation,
-}: {
-	routes: BaseStackRoute[];
-	descriptors: StandardDescriptorMap;
-	navigation: BaseStackNavigation;
-}): BlankStackDescriptorMap {
-	const result: BlankStackDescriptorMap = {};
-
-	for (const route of routes) {
-		const descriptor = descriptors[route.key];
-
-		if (!descriptor) {
-			continue;
-		}
-
-		result[route.key] = {
-			route: descriptor.route ?? route,
-			navigation: (descriptor.navigation ??
-				navigation) as BlankStackDescriptor["navigation"],
-			options: descriptor.options,
-			render: () => descriptor.render() as React.JSX.Element,
-		};
-	}
-
-	return result;
-}
-
 export const BlankStackNavigator = createStandardNavigator<
 	BlankStackNavigationOptions,
 	BlankStackStandardEventMap,
 	BlankStackStandardNavigatorProps
->(
-	({
-		actions,
-		descriptors,
-		state,
-		navigation,
-		navigationHost,
-		navigationState,
-	}) => {
-		const stackState = navigationState ?? {
-			key: "blank-stack",
-			index: state.index,
-			routes: state.routes as BaseStackRoute[],
-		};
-		const stackStateRef = React.useRef(stackState);
-		stackStateRef.current = stackState;
-
-		const fallbackNavigation = React.useMemo<BaseStackNavigation>(
-			() => ({
-				getState: () => stackStateRef.current,
-				dispatch: (action) => {
-					if (action?.type === "GO_BACK" || action?.type === "POP") {
-						actions.back();
-						return;
-					}
-
-					const name = action?.payload?.name;
-					if (action?.type === "NAVIGATE" && typeof name === "string") {
-						actions.navigate(name, action.payload.params);
-					}
-				},
-			}),
-			[actions],
-		);
-		const stackNavigation = navigation ?? fallbackNavigation;
-		const stackDescriptors = React.useMemo(
-			() =>
-				createDescriptorMap({
-					routes: stackState.routes,
-					descriptors,
-					navigation: stackNavigation,
-				}),
-			[descriptors, stackNavigation, stackState.routes],
-		);
-		const describe = React.useCallback(
-			(route: BlankStackDescriptor["route"]) => {
-				const descriptor = stackDescriptors[route.key];
-
-				if (!descriptor) {
-					throw new Error(
-						`BlankStack could not find a descriptor for route "${route.key}".`,
-					);
-				}
-
-				return descriptor;
-			},
-			[stackDescriptors],
+>(({ descriptors, navigation, navigationState }) => {
+	if (!navigationState || !navigation) {
+		throw new Error(
+			"BlankStack requires navigation state and helpers from its integration.",
 		);
+	}
 
-		return (
-			<NavigationHostProvider value={navigationHost}>
-				<StackView
-					state={stackState}
-					navigation={stackNavigation as BlankStackNavigationHelpers}
-					descriptors={stackDescriptors}
-					describe={describe}
-				/>
-			</NavigationHostProvider>
-		);
-	},
-);
+	return (
+		<StackView
+			state={navigationState}
+			navigation={navigation}
+			descriptors={descriptors}
+		/>
+	);
+});

package/src/navigators/expo-router/index.tsx

@@ -4,11 +4,6 @@ import {
 	type StackRouterOptions,
 	unstable_integrateWithRouter,
 } from "expo-router";
-import {
-	NavigationContext,
-	NavigationRouteContext,
-} from "expo-router/react-navigation";
-import type { NavigationScreenProviderComponent } from "../../providers/navigation/navigation-host.provider";
 import type { BlankStackNavigationOptions } from "../../types/blank-stack.types";
 import {
 	BlankStackNavigator,
@@ -18,22 +13,6 @@ import {
 
 type BlankStackExpoRouterParamList = Record<string, object | undefined>;
 
-const ExpoRouterScreenProvider: NavigationScreenProviderComponent = ({
-	children,
-	navigation,
-	route,
-}) => (
-	<NavigationContext.Provider value={navigation as never}>
-		<NavigationRouteContext.Provider value={route as never}>
-			{children}
-		</NavigationRouteContext.Provider>
-	</NavigationContext.Provider>
-);
-
-const expoRouterNavigationHost = {
-	ScreenProvider: ExpoRouterScreenProvider,
-};
-
 export const BlankStack = unstable_integrateWithRouter<
 	BlankStackNavigationOptions,
 	StackNavigationState<BlankStackExpoRouterParamList>,
@@ -44,14 +23,12 @@ export const BlankStack = unstable_integrateWithRouter<
 	createProps: ({ state, navigation }) => ({
 		navigationState: state,
 		navigation,
-		navigationHost: expoRouterNavigationHost,
 	}),
 });
 
 export const BlankStackScreen = BlankStack.Screen;
 
 export type {
-	BlankStackFactoryOptions,
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,
 	BlankStackNavigationProp,