react-native-screen-transitions 4.0.0-alpha.1 → 4.0.0-alpha.3

package/src/components/screen-lifecycle/hooks/use-close-transition-intent.ts

@@ -3,10 +3,10 @@ import { useLayoutEffect, useMemo, useRef } from "react";
 import useStableCallback from "../../../hooks/use-stable-callback";
 import {
 	type BaseDescriptor,
-	useDescriptorDerivations,
+	useDescriptorsStore,
 } from "../../../providers/screen/descriptors";
-import { useBlankStackContext } from "../../../providers/stack/blank-stack.provider";
-import { useStackCoreContext } from "../../../providers/stack/core.provider";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
+import { useStackCoreStore } from "../../../providers/stack/core.provider";
 import { GestureStore } from "../../../stores/gesture.store";
 import {
 	LifecycleTransitionRequestKind,
@@ -27,10 +27,15 @@ const useBlankStackClose = ({
 	requestLifecycleTransition,
 	resetStores,
 }: CloseHookParams) => {
-	const { handleCloseRoute } = useBlankStackContext();
+	const handleCloseRoute = useBlankStackStore(
+		(store) => store?.handleCloseRoute,
+	);
+	const isClosing = useBlankStackStore(
+		(store) => store?.scenesByKey[current.route.key]?.activity === "closing",
+	);
 
 	useLayoutEffect(() => {
-		if (current.activity !== "closing") {
+		if (!isClosing) {
 			return;
 		}
 
@@ -38,10 +43,13 @@ const useBlankStackClose = ({
 			LifecycleTransitionRequestKind.BlankStackClose,
 			0,
 		);
-	}, [current.activity, requestLifecycleTransition]);
+	}, [isClosing, requestLifecycleTransition]);
 
 	const handleBlankStackCloseEnd = useStableCallback((finished: boolean) => {
 		if (!finished) return;
+		if (!handleCloseRoute) {
+			throw new Error("Blank stack close handler was not found.");
+		}
 		handleCloseRoute({ route: current.route });
 		requestAnimationFrame(() => {
 			resetStores();
@@ -59,7 +67,9 @@ const useNativeStackClose = ({
 	requestLifecycleTransition,
 	resetStores,
 }: CloseHookParams) => {
-	const { parentScreenKey } = useDescriptorDerivations();
+	const parentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.parentScreenKey,
+	);
 	const pendingActionRef = useRef<any>(null);
 
 	const nearestAncestorDismissing = useMemo(() => {
@@ -121,8 +131,8 @@ export function useCloseTransitionIntent(
 	handleNativeCloseEnd?: (finished: boolean) => void;
 } {
 	const routeKey = current.route.key;
-	const { flags } = useStackCoreContext();
-	const isNativeStack = flags.STACK_TYPE === StackType.NATIVE;
+	const stackType = useStackCoreStore((store) => store.flags.STACK_TYPE);
+	const isNativeStack = stackType === StackType.NATIVE;
 	const { requestLifecycleTransition } = system.actions;
 
 	const resetStores = useStableCallback(() => {

package/src/components/screen-lifecycle/hooks/use-open-transition-intent.ts

@@ -1,7 +1,7 @@
 import { useLayoutEffect } from "react";
 import {
 	type BaseDescriptor,
-	useDescriptorDerivations,
+	useDescriptorsStore,
 } from "../../../providers/screen/descriptors";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
 import {
@@ -41,7 +41,9 @@ export function useOpenTransitionIntent(
 	animations: AnimationStoreMap,
 	system: SystemStoreMap,
 ) {
-	const { isFirstKey } = useDescriptorDerivations();
+	const isFirstKey = useDescriptorsStore(
+		(store) => store.derivations.isFirstKey,
+	);
 	const { requestLifecycleTransition } = system.actions;
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
@@ -78,6 +80,7 @@ export function useOpenTransitionIntent(
 			return;
 		}
 
+		animations.entering.set(1);
 		requestLifecycleTransition(
 			LifecycleTransitionRequestKind.Open,
 			initialProgress ?? 1,

package/src/components/screen-lifecycle/hooks/use-transition-start-controller.ts

@@ -1,6 +1,7 @@
 import { useAnimatedReaction } from "react-native-reanimated";
 import type { BaseDescriptor } from "../../../providers/screen/descriptors";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
+import { GestureStore } from "../../../stores/gesture.store";
 import {
 	LifecycleTransitionRequestKind,
 	type SystemStoreMap,
@@ -22,12 +23,14 @@ export const useTransitionStartController = ({
 }) => {
 	const {
 		targetProgress,
+		animationProgress,
 		pendingLifecycleRequestKind,
 		pendingLifecycleRequestTarget,
 		pendingLifecycleStartBlockCount,
 	} = system;
 	const { clearLifecycleTransitionRequest } = system.actions;
 	const transitionSpec = current.options.transitionSpec;
+	const isDragging = GestureStore.getValue(current.route.key, "dragging");
 
 	useAnimatedReaction(
 		() => {
@@ -60,9 +63,14 @@ export const useTransitionStartController = ({
 			animateToProgress({
 				target,
 				spec: transitionSpec,
+				emitWillAnimate:
+					kind !== LifecycleTransitionRequestKind.Open ||
+					!animations.entering.get(),
 				animations,
 				targetProgress,
+				animationProgress,
 				onAnimationFinish,
+				isDragging,
 			});
 
 			clearLifecycleTransitionRequest();

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

@@ -1,4 +1,4 @@
-import { useDescriptors } from "../../providers/screen/descriptors";
+import { useDescriptorsStore } from "../../providers/screen/descriptors";
 import { AnimationStore } from "../../stores/animation.store";
 import { SystemStore } from "../../stores/system.store";
 import { useScreenHistory } from "./hooks/history/use-screen-history";
@@ -15,7 +15,8 @@ interface Props {
  * Reads current/previous descriptors from DescriptorsProvider context.
  */
 export const ScreenLifecycle = ({ children }: Props) => {
-	const { current, previous } = useDescriptors();
+	const current = useDescriptorsStore((store) => store.current);
+	const previous = useDescriptorsStore((store) => store.previous);
 
 	const animations = AnimationStore.getBag(current.route.key);
 	const system = SystemStore.getBag(current.route.key);

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),

package/src/navigators/react-navigation/index.tsx

@@ -1,22 +1,15 @@
 import {
 	createStandardNavigationFactories,
-	type NavigatorTypeBagBase,
-	type ParamListBase,
 	type StackActionHelpers,
 	type StackNavigationState,
 	StackRouter,
 	type StackRouterOptions,
 	type StandardNavigationTypeBagBase,
-	type StaticConfig,
-	type TypedNavigator,
 } from "@react-navigation/native";
-import type * as React from "react";
 import { reactNavigationHost } from "../../providers/navigation/react-navigation-host";
 import type {
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,
-	BlankStackNavigationProp,
-	BlankStackNavigatorProps,
 } from "../../types/blank-stack.types";
 import {
 	BlankStackNavigator,
@@ -31,26 +24,10 @@ interface BlankStackStandardTypeBag extends StandardNavigationTypeBagBase {
 	RouterOptions: StackRouterOptions;
 }
 
-type BlankStackTypeBagFor<
-	ParamList extends ParamListBase,
-	NavigatorID extends string | undefined,
-> = NavigatorTypeBagBase & {
-	ParamList: ParamList;
-	NavigatorID: NavigatorID;
-	State: StackNavigationState<ParamList>;
-	ScreenOptions: BlankStackNavigationOptions;
-	EventMap: BlankStackNavigationEventMap;
-	NavigationList: {
-		[RouteName in keyof ParamList]: BlankStackNavigationProp<
-			ParamList,
-			RouteName,
-			NavigatorID
-		>;
-	};
-	Navigator: React.ComponentType<BlankStackNavigatorProps>;
-};
-
-const standardBlankStackFactories = createStandardNavigationFactories<
+export const {
+	createNavigator: createBlankStackNavigator,
+	createScreen: createBlankStackScreen,
+} = createStandardNavigationFactories<
 	BlankStackStandardTypeBag,
 	BlankStackStandardNavigatorProps
 >(BlankStackNavigator, StackRouter, ({ state, navigation }) => ({
@@ -59,27 +36,6 @@ const standardBlankStackFactories = createStandardNavigationFactories<
 	navigationHost: reactNavigationHost,
 }));
 
-export const createBlankStackScreen = standardBlankStackFactories.createScreen;
-
-const createReactNavigationBlankStackNavigator =
-	standardBlankStackFactories.createNavigator as unknown as (
-		config?: unknown,
-	) => unknown;
-
-export function createBlankStackNavigator<
-	const ParamList extends ParamListBase = ParamListBase,
-	const NavigatorID extends string | undefined = undefined,
-	const TypeBag extends NavigatorTypeBagBase = BlankStackTypeBagFor<
-		ParamList,
-		NavigatorID
-	>,
-	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
->(config?: Config): TypedNavigator<TypeBag, Config> {
-	return createReactNavigationBlankStackNavigator(
-		config,
-	) as unknown as TypedNavigator<TypeBag, Config>;
-}
-
 export type {
 	BlankStackFactoryOptions,
 	BlankStackNavigationEventMap,

package/src/providers/helpers/measured-bounds-writes.ts

@@ -67,6 +67,7 @@ export const applyMeasuredBoundsWrites = (
 			measured,
 			preparedStyles,
 			group,
+			{ handoff, escapeClipping },
 		);
 	}
 };