react-native-screen-transitions 4.0.0-alpha.2 → 4.0.0-alpha.4

package/src/components/stack-view.tsx

@@ -1,73 +1,134 @@
-import { memo } from "react";
-import { ActivityContainer, ActivityScreen } from "../components/activity";
-import { PortalProvider } from "../components/boundary/portal";
-import { Overlay } from "../components/overlay";
-import { NavigationScreenProvider } from "../providers/navigation/navigation-host.provider";
+import {
+	NavigationContext,
+	type NavigationProp,
+	NavigationRouteContext,
+	type ParamListBase,
+} from "@react-navigation/native";
+import { memo, type ReactNode } from "react";
 import { ScreenComposer } from "../providers/screen/screen-composer";
-import { withBlankStack } from "../providers/stack/blank-stack.provider";
-import { withStackCore } from "../providers/stack/core.provider";
+import {
+	BlankStackProvider,
+	useBlankStackStore,
+} from "../providers/stack/blank-stack.provider";
+import {
+	type StackCoreConfig,
+	StackCoreProvider,
+} from "../providers/stack/core.provider";
 import type {
 	BlankStackDescriptor,
 	BlankStackNavigationHelpers,
 } from "../types/blank-stack.types";
-import type { BaseStackScene } from "../types/stack.types";
+import type { BlankStackProviderProps } from "../types/providers/blank-stack-provider.types";
+import { ActivityContainer, ActivityScreen } from "./activity";
+import { PortalProvider } from "./boundary/portal";
+import { Overlay } from "./overlay";
 
-interface BlankSceneRowProps {
-	scene: BaseStackScene<BlankStackDescriptor>;
-	paintDriverRouteKey?: string;
+interface RouteKeyProps {
+	routeKey: string;
 }
 
-const BlankSceneRow = memo(function BlankSceneRow({
-	scene,
-	paintDriverRouteKey,
-}: BlankSceneRowProps) {
-	const descriptor = scene.descriptor;
-	const route = scene.route;
+const BlankNavigationProvider = memo(function BlankNavigationProvider({
+	children,
+	routeKey,
+}: RouteKeyProps & { children: ReactNode }) {
+	const navigation = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.descriptor.navigation,
+	) as NavigationProp<ParamListBase> | undefined;
+	const route = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.route,
+	);
+
+	if (!navigation || !route) {
+		throw new Error(`Blank stack scene "${routeKey}" was not found.`);
+	}
 
 	return (
-		<NavigationScreenProvider navigation={descriptor.navigation} route={route}>
-			<ActivityScreen
-				activity={descriptor.activity}
-				inactiveBehavior={descriptor.options.inactiveBehavior}
-				paintDriverRouteKey={paintDriverRouteKey}
-				hasNestedState={"state" in route}
-			>
-				<ScreenComposer
-					previous={scene.previousDescriptor}
-					current={descriptor}
-					next={scene.nextDescriptor}
-				>
-					{descriptor.render?.()}
+		<NavigationContext.Provider value={navigation}>
+			<NavigationRouteContext.Provider value={route}>
+				{children}
+			</NavigationRouteContext.Provider>
+		</NavigationContext.Provider>
+	);
+});
+
+const BlankSceneContent = memo(function BlankSceneContent({
+	routeKey,
+}: RouteKeyProps) {
+	const render = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.descriptor.render,
+	);
+
+	return render?.() ?? null;
+});
+
+const BlankSceneRow = memo(function BlankSceneRow({ routeKey }: RouteKeyProps) {
+	return (
+		<BlankNavigationProvider routeKey={routeKey}>
+			<ActivityScreen routeKey={routeKey}>
+				<ScreenComposer routeKey={routeKey}>
+					<BlankSceneContent routeKey={routeKey} />
 				</ScreenComposer>
 			</ActivityScreen>
-		</NavigationScreenProvider>
+		</BlankNavigationProvider>
 	);
 });
 
-export const StackView = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: true, DISABLE_NATIVE_SCREENS: false },
-	withBlankStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
-		({ scenes, shouldShowFloatOverlay }) => {
-			return (
-				<PortalProvider>
-					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+const EMPTY_ROUTE_KEYS: string[] = [];
+
+const StackViewContent = memo(function StackViewContent() {
+	const routeKeys = useBlankStackStore(
+		(store) => store?.routeKeys ?? EMPTY_ROUTE_KEYS,
+	);
+	const shouldShowFloatOverlay = useBlankStackStore(
+		(store) => store?.shouldShowFloatOverlay ?? false,
+	);
+
+	return (
+		<PortalProvider>
+			{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+
+			<ActivityContainer>
+				{routeKeys.map((routeKey) => (
+					<BlankSceneRow key={routeKey} routeKey={routeKey} />
+				))}
+			</ActivityContainer>
+		</PortalProvider>
+	);
+});
 
-					<ActivityContainer>
-						{scenes.map((scene, index) => {
-							const route = scene.route;
-							const paintDriverRouteKey = scenes[index + 2]?.route.key;
+type StackViewProps = BlankStackProviderProps<
+	BlankStackDescriptor,
+	BlankStackNavigationHelpers
+> &
+	StackCoreConfig;
 
-							return (
-								<BlankSceneRow
-									key={route.key}
-									scene={scene}
-									paintDriverRouteKey={paintDriverRouteKey}
-								/>
-							);
-						})}
-					</ActivityContainer>
-				</PortalProvider>
-			);
-		},
-	),
-);
+export const StackView = memo(function StackView({
+	DISABLE_NATIVE_SCREENS,
+	DISABLE_NATIVE_SCREEN_CONTAINER,
+	TRANSITIONS_ALWAYS_ON,
+	STACK_TYPE,
+	state,
+	navigation,
+	descriptors,
+	describe,
+}: StackViewProps) {
+	return (
+		<StackCoreProvider
+			config={{
+				TRANSITIONS_ALWAYS_ON: TRANSITIONS_ALWAYS_ON ?? true,
+				STACK_TYPE,
+				DISABLE_NATIVE_SCREENS: DISABLE_NATIVE_SCREENS ?? false,
+				DISABLE_NATIVE_SCREEN_CONTAINER,
+			}}
+		>
+			<BlankStackProvider
+				state={state}
+				navigation={navigation}
+				descriptors={descriptors}
+				describe={describe}
+			>
+				<StackViewContent />
+			</BlankStackProvider>
+		</StackCoreProvider>
+	);
+});

package/src/configs/presets.ts

@@ -237,10 +237,10 @@ export const ElasticCard = (
 };
 
 export const SharedIGImage = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		gestureEnabled: true,
@@ -278,11 +278,11 @@ export const SharedIGImage = ({
 
 			const navigationStyles =
 				bounds({
-					id: sharedBoundTag,
+					id,
 				}).navigation.zoom() ?? {};
 
 			// Extract raw style values from bounds result (legacy format)
-			const sourceStyle = navigationStyles[sharedBoundTag] as
+			const sourceStyle = navigationStyles[id] as
 				| Record<string, unknown>
 				| undefined;
 			const containerStyle = navigationStyles[
@@ -347,7 +347,7 @@ export const SharedIGImage = ({
 						pointerEvents: current.gesture.dismissing ? "none" : "auto",
 					},
 				},
-				[sharedBoundTag]: {
+				[id]: {
 					style: {
 						...(sourceStyle ?? {}),
 						transform: [
@@ -384,10 +384,10 @@ export const SharedIGImage = ({
 };
 
 export const SharedAppleMusic = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		enableTransitions: true,
@@ -434,7 +434,7 @@ export const SharedAppleMusic = ({
 			const dragXScale = interpolate(normX, [0, 1], xScaleOuput);
 			const dragYScale = interpolate(normY, [0, 1], yScaleOuput);
 
-			const boundValues = bounds({ id: sharedBoundTag }).values({
+			const boundValues = bounds({ id }).values({
 				method: focused ? "content" : "transform",
 				anchor: "top",
 				scaleMode: "uniform",
@@ -453,7 +453,7 @@ export const SharedAppleMusic = ({
 			 * ===============================
 			 */
 			if (focused) {
-				const maskedValues = bounds({ id: sharedBoundTag }).values({
+				const maskedValues = bounds({ id }).values({
 					space: "absolute",
 					method: "size",
 					target: "fullscreen",
@@ -545,7 +545,7 @@ export const SharedAppleMusic = ({
 			const contentScale = interpolate(progress, [1, 2], [1, 0.9], "clamp");
 
 			return {
-				[sharedBoundTag]: {
+				[id]: {
 					style: {
 						transform: [
 							{ translateX: dragX || 0 },
@@ -593,10 +593,10 @@ export const SharedAppleMusic = ({
 };
 
 export const SharedXImage = ({
-	sharedBoundTag,
+	id,
 	...config
 }: Partial<ScreenTransitionConfig> & {
-	sharedBoundTag: string;
+	id: string;
 }): ScreenTransitionConfig => {
 	return {
 		//@ts-expect-error - Should not lead to any issues
@@ -616,7 +616,7 @@ export const SharedXImage = ({
 
 			const navigationStyles =
 				bounds({
-					id: sharedBoundTag,
+					id,
 				}).navigation.zoom() ?? {};
 			const maskStyle = navigationStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] as
 				| Record<string, unknown>

package/src/constants.ts

@@ -71,6 +71,7 @@ const DEFAULT_GESTURE_VALUES = {
 	dragging: 0,
 	settling: 0,
 	active: null,
+	initiator: "none",
 	direction: null,
 
 	// Deprecated aliases

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

@@ -8,28 +8,29 @@ const createPopAction = () => ({
 });
 
 export function useNavigationHelpers() {
-	const current = useDescriptorsStore((store) => store.descriptors.current);
+	const route = useDescriptorsStore((store) => store.current.route);
+	const navigation = useDescriptorsStore((store) => store.current.navigation);
 	const requestStackDismiss = useStack((stack) => stack.requestDismiss);
 
 	const requestDismiss = useCallback((): boolean => {
-		return requestStackDismiss?.({ route: current.route }) ?? false;
-	}, [current.route, requestStackDismiss]);
+		return requestStackDismiss?.({ route }) ?? false;
+	}, [route, requestStackDismiss]);
 
 	const dismissScreen = useCallback((): boolean => {
-		const state = current.navigation.getState();
+		const state = navigation.getState();
 		const routeIndex = state.routes.findIndex(
-			(route) => route.key === current.route.key,
+			(stateRoute) => stateRoute.key === route.key,
 		);
 		const routeStillPresent = routeIndex !== -1;
 		if (!routeStillPresent || routeIndex === 0) return false;
 
-		current.navigation.dispatch({
+		navigation.dispatch({
 			...createPopAction(),
-			source: current.route.key,
+			source: route.key,
 			target: state.key,
 		});
 		return true;
-	}, [current]);
+	}, [navigation, route.key]);
 
 	return { dismissScreen, requestDismiss };
 }

package/src/hooks/navigation/use-screen-state.ts

@@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react";
 import { snapDescriptorToIndex } from "../../animation/snap-to";
 import {
 	type BaseDescriptor,
-	useDescriptors,
+	useDescriptorsStore,
 } from "../../providers/screen/descriptors";
 import type { ScreenTransitionConfig } from "../../types/screen.types";
 import type { BaseStackNavigation } from "../../types/stack.types";
@@ -65,7 +65,9 @@ export function useScreenState<
 >(): ScreenState<TNavigation> {
 	const { routes, scenes, routeKeys, focusedIndex } =
 		useStack<StackContextValue>();
-	const { current } = useDescriptors<BaseDescriptor>();
+	const current = useDescriptorsStore(
+		(store) => store.current,
+	) as BaseDescriptor;
 
 	const index = useMemo(
 		() => routeKeys.indexOf(current.route.key),