react-native-screen-transitions 4.0.0-alpha.9 → 4.1.0-alpha.0

package/src/components/screen-container/layers/surface.tsx

@@ -0,0 +1,65 @@
+import { type ComponentType, memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
+import type { ScreenSurfaceComponentProps } from "../../../types";
+import { usesLayerRenderProps } from "./render-component";
+
+type Props = {
+	children: React.ReactNode;
+	pointerEvents: "box-none" | undefined;
+};
+
+export const SurfaceLayer = memo(({ children, pointerEvents }: Props) => {
+	const SurfaceComponent = useDescriptorsStore(
+		(store) => store.options.surfaceComponent,
+	);
+
+	const AnimatedSurfaceComponent = useMemo(() => {
+		return SurfaceComponent && !usesLayerRenderProps(SurfaceComponent)
+			? Animated.createAnimatedComponent(SurfaceComponent as ComponentType<any>)
+			: null;
+	}, [SurfaceComponent]);
+
+	const animatedSurfaceStyle = useSlotStyles("surface");
+	const animatedSurfaceProps = useSlotProps("surface");
+	const surfaceStyles = [
+		styles.surface,
+		animatedSurfaceStyle,
+	] as ScreenSurfaceComponentProps["styles"];
+	const surfaceProps =
+		animatedSurfaceProps as ScreenSurfaceComponentProps["props"];
+
+	if (!SurfaceComponent) {
+		return children;
+	}
+
+	if (AnimatedSurfaceComponent) {
+		return (
+			<AnimatedSurfaceComponent
+				style={surfaceStyles}
+				animatedProps={animatedSurfaceProps}
+				pointerEvents={pointerEvents}
+			>
+				{children}
+			</AnimatedSurfaceComponent>
+		);
+	}
+
+	return (
+		<SurfaceComponent
+			styles={surfaceStyles}
+			props={surfaceProps}
+			pointerEvents={pointerEvents}
+		>
+			{children}
+		</SurfaceComponent>
+	);
+});
+
+const styles = StyleSheet.create({
+	surface: {
+		flex: 1,
+	},
+});

package/src/components/screen-lifecycle/index.tsx

@@ -16,8 +16,8 @@ interface Props {
  * Reads current/previous descriptors from DescriptorsProvider context.
  */
 export const ScreenLifecycle = ({ children }: Props) => {
-	const current = useDescriptorsStore((store) => store.current);
-	const previous = useDescriptorsStore((store) => store.previous);
+	const current = useDescriptorsStore((store) => store.descriptors.current);
+	const previous = useDescriptorsStore((store) => store.descriptors.previous);
 
 	const animations = AnimationStore.getBag(current.route.key);
 	const system = SystemStore.getBag(current.route.key);

package/src/components/stack-view.tsx

@@ -1,5 +1,4 @@
-import { memo, type ReactNode } from "react";
-import { NavigationScreenProvider } from "../providers/navigation/navigation-host.provider";
+import { memo } from "react";
 import { ScreenComposer } from "../providers/screen/screen-composer";
 import {
 	BlankStackProvider,
@@ -18,28 +17,6 @@ interface RouteKeyProps {
 	routeKey: string;
 }
 
-const BlankNavigationProvider = memo(function BlankNavigationProvider({
-	children,
-	routeKey,
-}: RouteKeyProps & { children: ReactNode }) {
-	const navigation = useBlankStackStore(
-		(store) => store.scenesByKey[routeKey]?.descriptor.navigation,
-	);
-	const route = useBlankStackStore(
-		(store) => store.scenesByKey[routeKey]?.route,
-	);
-
-	if (!navigation || !route) {
-		throw new Error(`Blank stack scene "${routeKey}" was not found.`);
-	}
-
-	return (
-		<NavigationScreenProvider navigation={navigation} route={route}>
-			{children}
-		</NavigationScreenProvider>
-	);
-});
-
 const BlankSceneContent = memo(function BlankSceneContent({
 	routeKey,
 }: RouteKeyProps) {
@@ -47,27 +24,21 @@ const BlankSceneContent = memo(function BlankSceneContent({
 		(store) => store?.scenesByKey[routeKey]?.descriptor.render,
 	);
 
-	return render?.() ?? null;
+	return render?.();
 });
 
 const BlankSceneRow = memo(function BlankSceneRow({ routeKey }: RouteKeyProps) {
 	return (
-		<BlankNavigationProvider routeKey={routeKey}>
-			<ActivityScreen routeKey={routeKey}>
-				<ScreenComposer routeKey={routeKey}>
-					<BlankSceneContent routeKey={routeKey} />
-				</ScreenComposer>
-			</ActivityScreen>
-		</BlankNavigationProvider>
+		<ActivityScreen routeKey={routeKey}>
+			<ScreenComposer routeKey={routeKey}>
+				<BlankSceneContent routeKey={routeKey} />
+			</ScreenComposer>
+		</ActivityScreen>
 	);
 });
 
-const EMPTY_ROUTE_KEYS: string[] = [];
-
 const StackViewContent = memo(function StackViewContent() {
-	const routeKeys = useBlankStackStore(
-		(store) => store?.routeKeys ?? EMPTY_ROUTE_KEYS,
-	);
+	const routeKeys = useBlankStackStore((store) => store?.routeKeys);
 
 	return (
 		<PortalProvider>
@@ -89,7 +60,6 @@ export const StackView = memo(function StackView({
 	state,
 	navigation,
 	descriptors,
-	describe,
 }: StackViewProps) {
 	return (
 		<StackCoreProvider
@@ -101,7 +71,6 @@ export const StackView = memo(function StackView({
 				state={state}
 				navigation={navigation}
 				descriptors={descriptors}
-				describe={describe}
 			>
 				<StackViewContent />
 			</BlankStackProvider>

package/src/configs/index.ts

@@ -1,9 +1,6 @@
 import {
 	DraggableCard,
 	ElasticCard,
-	SharedAppleMusic,
-	SharedIGImage,
-	SharedXImage,
 	SlideFromBottom,
 	SlideFromTop,
 	ZoomIn,
@@ -23,7 +20,4 @@ export const Presets = {
 	SlideFromBottom,
 	DraggableCard,
 	ElasticCard,
-	SharedIGImage,
-	SharedAppleMusic,
-	SharedXImage,
 };

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/custom-navigator.ts

@@ -0,0 +1,25 @@
+export {
+	BlankStackHost,
+	type BlankStackHostProps,
+} from "./components/blank-stack-host";
+export {
+	BlankStackRuntime,
+	type BlankStackRuntimeProps,
+} from "./components/blank-stack-runtime";
+export {
+	BlankStackScene,
+	type BlankStackSceneProps,
+} from "./components/blank-stack-scene";
+export {
+	type BlankStackState,
+	useBlankStackState,
+} from "./hooks/navigation/use-blank-stack-state";
+export type { BlankStackStandardNavigatorProps } from "./navigators/create-blank-stack-navigator";
+export {
+	type StackTransition,
+	useStackTransition,
+} from "./providers/stack/stack-transition";
+export type {
+	BlankStackNavigationEventMap,
+	BlankStackNavigationOptions,
+} from "./types/blank-stack.types";

package/src/hooks/navigation/use-blank-stack-state.ts

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import { useBlankStackStore } from "../../providers/stack/blank-stack.provider";
+import type { BlankStackStoreValue } from "../../types/providers/blank-stack-provider.types";
+
+export type BlankStackState = Pick<
+	BlankStackStoreValue,
+	"focusedIndex" | "routeKeys" | "routes" | "scenes"
+>;
+
+/**
+ * Reads the durable scene state produced by Blank Stack without prescribing
+ * how those scenes are presented.
+ */
+export const useBlankStackState = (): BlankStackState => {
+	const focusedIndex = useBlankStackStore((store) => store.focusedIndex);
+	const routeKeys = useBlankStackStore((store) => store.routeKeys);
+	const routes = useBlankStackStore((store) => store.routes);
+	const scenes = useBlankStackStore((store) => store.scenes);
+
+	return useMemo(
+		() => ({ focusedIndex, routeKeys, routes, scenes }),
+		[focusedIndex, routeKeys, routes, scenes],
+	);
+};

package/src/hooks/navigation/use-navigation-helpers.ts

@@ -9,8 +9,10 @@ import {
 import { dispatchCloseAction } from "../../utils/navigation/close-action-replay";
 
 export function useNavigationHelpers() {
-	const route = useDescriptorsStore((store) => store.current.route);
-	const navigation = useDescriptorsStore((store) => store.current.navigation);
+	const route = useDescriptorsStore((store) => store.descriptors.current.route);
+	const navigation = useDescriptorsStore(
+		(store) => store.descriptors.current.navigation,
+	);
 	const requestStackDismiss = useBlankStackStore(
 		(stack) => stack.requestDismiss,
 	);