react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.0

package/src/providers/screen/topology/topology.provider.tsx

@@ -1,72 +0,0 @@
-import { type ReactNode, useLayoutEffect, useMemo } from "react";
-import createProvider from "../../../utils/create-provider";
-import { useBlankStackStore } from "../../stack/blank-stack.provider";
-import { useDescriptorsStore } from "../descriptors";
-import { screenTopology } from "./helpers/create-screen-topology";
-
-type Props = {
-	children: ReactNode;
-};
-
-type ScreenTopologyContextValue = {
-	screenKey: string;
-};
-
-const {
-	ScreenTopologyProvider,
-	useOptionalScreenTopologyStore,
-	useScreenTopologyStore,
-} = createProvider("ScreenTopology")<Props, ScreenTopologyContextValue>(
-	({ children }) => {
-		const screenKey = useDescriptorsStore(
-			(store) => store.derivations.currentScreenKey,
-		);
-		const transitionKey = useDescriptorsStore(
-			(store) => store.options.transitionKey,
-		);
-		const parentScreenKey = useOptionalScreenTopologyStore(
-			(store) => store?.screenKey,
-		);
-		const navigatorKey = useBlankStackStore((store) => store.navigatorKey);
-		const isActiveScreen = useBlankStackStore((store) => {
-			const focusedScene = store.scenes[store.focusedIndex];
-			return (
-				focusedScene?.route.key === screenKey &&
-				focusedScene.activity === "active"
-			);
-		});
-		useLayoutEffect(() => {
-			screenTopology.register({
-				screenKey,
-				navigatorKey,
-				parentScreenKey,
-				transitionKey,
-			});
-		}, [screenKey, navigatorKey, parentScreenKey, transitionKey]);
-
-		useLayoutEffect(() => {
-			if (!isActiveScreen || !parentScreenKey) return;
-
-			screenTopology.activate({
-				screenKey,
-				parentScreenKey,
-			});
-		}, [isActiveScreen, parentScreenKey, screenKey]);
-
-		useLayoutEffect(
-			() => () => {
-				screenTopology.unregister(screenKey);
-			},
-			[screenKey],
-		);
-
-		const value = useMemo(() => ({ screenKey }), [screenKey]);
-
-		return {
-			value,
-			children,
-		};
-	},
-);
-
-export { ScreenTopologyProvider, useScreenTopologyStore };

package/src/providers/screen/use-current-screen-relationships.ts

@@ -1,10 +0,0 @@
-import { useDescriptorsStore } from "./descriptors";
-import { useScreenRelationships } from "./topology";
-
-export const useCurrentScreenRelationships = () => {
-	const screenKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
-
-	return useScreenRelationships(screenKey);
-};

package/src/providers/stack/core.provider.tsx

@@ -1,89 +0,0 @@
-import { memo, type ReactNode, useContext, useMemo } from "react";
-import { Dimensions, Platform, StyleSheet, View } from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import {
-	initialWindowMetrics,
-	SafeAreaInsetsContext,
-	SafeAreaProvider,
-} from "react-native-safe-area-context";
-import createProvider from "../../utils/create-provider";
-
-export interface StackCoreConfig {
-	TRANSITIONS_ALWAYS_ON?: boolean;
-}
-
-interface StackCoreProviderProps {
-	config: StackCoreConfig;
-	children: ReactNode;
-}
-
-export interface StackCoreContextValue {
-	flags: {
-		TRANSITIONS_ALWAYS_ON: boolean;
-	};
-}
-
-const { width = 0, height = 0 } = Dimensions.get("window");
-
-const initialSafeAreaMetrics =
-	Platform.OS === "web" || initialWindowMetrics == null
-		? {
-				frame: { x: 0, y: 0, width, height },
-				insets: { top: 0, left: 0, right: 0, bottom: 0 },
-			}
-		: initialWindowMetrics;
-
-const StackSafeAreaProvider = memo(function StackSafeAreaProvider({
-	children,
-}: {
-	children: ReactNode;
-}) {
-	const insets = useContext(SafeAreaInsetsContext);
-
-	if (insets) {
-		return <View style={styles.container}>{children}</View>;
-	}
-
-	return (
-		<SafeAreaProvider
-			initialMetrics={initialSafeAreaMetrics}
-			style={styles.container}
-		>
-			{children}
-		</SafeAreaProvider>
-	);
-});
-
-const StackCoreRoot = memo(function StackCoreRoot({
-	children,
-}: {
-	children: ReactNode;
-}) {
-	return (
-		<GestureHandlerRootView style={styles.container}>
-			<StackSafeAreaProvider>{children}</StackSafeAreaProvider>
-		</GestureHandlerRootView>
-	);
-});
-
-export const { StackCoreProvider, useStackCoreStore } = createProvider(
-	"StackCore",
-)<StackCoreProviderProps, StackCoreContextValue>(({ config, children }) => {
-	const { TRANSITIONS_ALWAYS_ON = false } = config;
-
-	const flags = useMemo(
-		() => ({
-			TRANSITIONS_ALWAYS_ON,
-		}),
-		[TRANSITIONS_ALWAYS_ON],
-	);
-
-	return {
-		value: { flags },
-		children: <StackCoreRoot>{children}</StackCoreRoot>,
-	};
-});
-
-const styles = StyleSheet.create({
-	container: { flex: 1 },
-});

package/src/providers/stack/stack-transition/index.ts

@@ -1,5 +0,0 @@
-export { StackTransitionProvider } from "./stack-transition.provider";
-export {
-	type StackTransition,
-	useStackTransition,
-} from "./use-stack-transition";

package/src/providers/stack/stack-transition/stack-transition-controller.ts

@@ -1,341 +0,0 @@
-import { EPSILON } from "../../../constants";
-import type { BlankStackStoreValue } from "../../../types/providers/blank-stack-provider.types";
-import type { SnapPoint } from "../../../types/screen.types";
-
-export type StackTransitionDirection = "forward" | "backward";
-
-export type StackTransitionSelection = {
-	direction: StackTransitionDirection;
-	driverRouteKey: string;
-	sourceRouteKey: string;
-	targetRouteKey: string;
-};
-
-export type StackTransitionStateSnapshot = {
-	focusedIndex: number;
-	scenes: BlankStackStoreValue["scenes"];
-};
-
-export type StackTransitionControllerSnapshot = {
-	selection: StackTransitionSelection | null;
-};
-
-export enum StackTransitionDriverSignal {
-	Idle = 0,
-	Forward = 1,
-	Backward = 2,
-}
-
-export type StackTransitionDriverFrame = {
-	closing: number;
-	dismissalBoundary: number;
-	dismissing: number;
-	dragging: number;
-	entering: number;
-	progressBaseline: number;
-	progressSettled: number;
-	settling: number;
-	targetProgress: number;
-	visualProgress: number;
-};
-
-export type StackTransitionController = {
-	getSnapshot: () => StackTransitionControllerSnapshot;
-	handleDriverSignal: (signal: StackTransitionDriverSignal) => void;
-	subscribe: (listener: () => void) => () => void;
-	update: (snapshot: StackTransitionStateSnapshot) => void;
-};
-
-const getFocusedScene = (snapshot: StackTransitionStateSnapshot) =>
-	snapshot.scenes[snapshot.focusedIndex];
-
-const findScene = (
-	snapshot: StackTransitionStateSnapshot,
-	routeKey: string | undefined,
-) =>
-	routeKey
-		? snapshot.scenes.find((scene) => scene.route.key === routeKey)
-		: undefined;
-
-const createForwardSelection = (
-	snapshot: StackTransitionStateSnapshot,
-): StackTransitionSelection | null => {
-	const target = getFocusedScene(snapshot);
-	const source = findScene(snapshot, target?.previousDescriptor?.route.key);
-
-	if (!source || !target || target.activity !== "active") {
-		return null;
-	}
-
-	return {
-		direction: "forward",
-		driverRouteKey: target.route.key,
-		sourceRouteKey: source.route.key,
-		targetRouteKey: target.route.key,
-	};
-};
-
-const createBackwardSelection = (
-	snapshot: StackTransitionStateSnapshot,
-): StackTransitionSelection | null => {
-	const focused = getFocusedScene(snapshot);
-	const focusedPrevious = findScene(
-		snapshot,
-		focused?.previousDescriptor?.route.key,
-	);
-
-	if (focused?.activity === "active" && focusedPrevious) {
-		return {
-			direction: "backward",
-			driverRouteKey: focused.route.key,
-			sourceRouteKey: focused.route.key,
-			targetRouteKey: focusedPrevious.route.key,
-		};
-	}
-
-	const focusedRouteKey = focused?.route.key;
-	const closing = [...snapshot.scenes].reverse().find((scene) => {
-		if (scene.activity !== "closing") return false;
-		if (!focusedRouteKey) return true;
-
-		return scene.previousDescriptor?.route.key === focusedRouteKey;
-	});
-	const fallbackClosing =
-		closing ??
-		[...snapshot.scenes]
-			.reverse()
-			.find((scene) => scene.activity === "closing");
-	const target = findScene(
-		snapshot,
-		fallbackClosing?.previousDescriptor?.route.key,
-	);
-
-	if (!fallbackClosing || !target) {
-		return null;
-	}
-
-	return {
-		direction: "backward",
-		driverRouteKey: fallbackClosing.route.key,
-		sourceRouteKey: fallbackClosing.route.key,
-		targetRouteKey: target.route.key,
-	};
-};
-
-const createFocusChangeSelection = (
-	previous: StackTransitionStateSnapshot,
-	next: StackTransitionStateSnapshot,
-): StackTransitionSelection | null => {
-	const previousFocused = getFocusedScene(previous);
-	const nextFocused = getFocusedScene(next);
-
-	if (
-		!previousFocused ||
-		!nextFocused ||
-		previousFocused.route.key === nextFocused.route.key
-	) {
-		return null;
-	}
-
-	const targetExisted = previous.scenes.some(
-		(scene) => scene.route.key === nextFocused.route.key,
-	);
-
-	if (targetExisted) {
-		return {
-			direction: "backward",
-			driverRouteKey: previousFocused.route.key,
-			sourceRouteKey: previousFocused.route.key,
-			targetRouteKey: nextFocused.route.key,
-		};
-	}
-
-	return {
-		direction: "forward",
-		driverRouteKey: nextFocused.route.key,
-		sourceRouteKey: previousFocused.route.key,
-		targetRouteKey: nextFocused.route.key,
-	};
-};
-
-const areSelectionsEqual = (
-	left: StackTransitionSelection | null,
-	right: StackTransitionSelection | null,
-) =>
-	left === right ||
-	(left !== null &&
-		right !== null &&
-		left.direction === right.direction &&
-		left.driverRouteKey === right.driverRouteKey &&
-		left.sourceRouteKey === right.sourceRouteKey &&
-		left.targetRouteKey === right.targetRouteKey);
-
-export const normalizeStackTransitionProgress = (
-	direction: StackTransitionDirection,
-	driverProgress: number,
-	dismissalBoundary: number,
-) => {
-	"worklet";
-
-	const normalizedDriverProgress = Math.min(
-		1,
-		Math.max(0, driverProgress / Math.max(EPSILON, dismissalBoundary)),
-	);
-
-	return direction === "forward"
-		? normalizedDriverProgress
-		: 1 - normalizedDriverProgress;
-};
-
-export const resolveStackTransitionDismissalBoundary = ({
-	progressBaseline,
-	resolvedAutoSnapPoint,
-	snapPoints,
-}: {
-	progressBaseline: number;
-	resolvedAutoSnapPoint: number;
-	snapPoints: SnapPoint[] | undefined;
-}) => {
-	"worklet";
-
-	if (!snapPoints?.length) return progressBaseline;
-
-	let boundary = Number.POSITIVE_INFINITY;
-	for (let index = 0; index < snapPoints.length; index++) {
-		const snapPoint = snapPoints[index];
-		const resolvedSnapPoint =
-			snapPoint === "auto" ? resolvedAutoSnapPoint : snapPoint;
-
-		if (
-			Number.isFinite(resolvedSnapPoint) &&
-			resolvedSnapPoint > EPSILON &&
-			resolvedSnapPoint < boundary
-		) {
-			boundary = resolvedSnapPoint;
-		}
-	}
-
-	return Number.isFinite(boundary) ? boundary : progressBaseline;
-};
-
-export const resolveStackTransitionDriverSignal = ({
-	closing,
-	dismissalBoundary,
-	dismissing,
-	dragging,
-	entering,
-	progressBaseline,
-	progressSettled,
-	settling,
-	targetProgress,
-	visualProgress,
-}: StackTransitionDriverFrame): StackTransitionDriverSignal => {
-	"worklet";
-
-	if (closing || dismissing || (!progressSettled && targetProgress === 0)) {
-		return StackTransitionDriverSignal.Backward;
-	}
-
-	if (entering) {
-		return StackTransitionDriverSignal.Forward;
-	}
-
-	if (
-		(dragging || settling) &&
-		visualProgress < Math.min(progressBaseline, dismissalBoundary) - EPSILON
-	) {
-		return StackTransitionDriverSignal.Backward;
-	}
-
-	return StackTransitionDriverSignal.Idle;
-};
-
-export const createStackTransitionController = (
-	initialState: StackTransitionStateSnapshot,
-): StackTransitionController => {
-	let state = initialState;
-	let driverActivated = false;
-	let snapshot: StackTransitionControllerSnapshot = { selection: null };
-	const listeners = new Set<() => void>();
-
-	const setSelection = (
-		selection: StackTransitionSelection | null,
-		notify: boolean,
-	) => {
-		if (areSelectionsEqual(snapshot.selection, selection)) return false;
-
-		snapshot = { selection };
-		driverActivated = false;
-		if (notify) {
-			for (const listener of listeners) listener();
-		}
-		return true;
-	};
-
-	const update = (nextState: StackTransitionStateSnapshot) => {
-		const focusChange = createFocusChangeSelection(state, nextState);
-		state = nextState;
-
-		if (focusChange) {
-			setSelection(focusChange, false);
-			return;
-		}
-
-		const selection = snapshot.selection;
-		if (
-			selection &&
-			!nextState.scenes.some(
-				(scene) => scene.route.key === selection.driverRouteKey,
-			)
-		) {
-			setSelection(null, false);
-			return;
-		}
-
-		if (!selection) {
-			const closingSelection = createBackwardSelection(nextState);
-			if (
-				closingSelection &&
-				findScene(nextState, closingSelection.driverRouteKey)?.activity ===
-					"closing"
-			) {
-				setSelection(closingSelection, false);
-			}
-		}
-	};
-
-	const handleDriverSignal = (signal: StackTransitionDriverSignal) => {
-		if (signal === StackTransitionDriverSignal.Idle) {
-			if (driverActivated) setSelection(null, true);
-			return;
-		}
-
-		const direction =
-			signal === StackTransitionDriverSignal.Forward ? "forward" : "backward";
-		const currentSelection = snapshot.selection;
-
-		if (currentSelection?.direction === direction) {
-			driverActivated = true;
-			return;
-		}
-
-		const selection =
-			direction === "forward"
-				? createForwardSelection(state)
-				: createBackwardSelection(state);
-		if (!selection) return;
-
-		setSelection(selection, true);
-		driverActivated = true;
-	};
-
-	return {
-		getSnapshot: () => snapshot,
-		handleDriverSignal,
-		subscribe: (listener) => {
-			listeners.add(listener);
-			return () => listeners.delete(listener);
-		},
-		update,
-	};
-};

package/src/providers/stack/stack-transition/stack-transition.provider.tsx

@@ -1,120 +0,0 @@
-import { type ReactNode, useMemo, useRef, useSyncExternalStore } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import { AnimationStore } from "../../../stores/animation.store";
-import { GestureStore } from "../../../stores/gesture.store";
-import { SystemStore } from "../../../stores/system.store";
-import type { SnapPoint } from "../../../types/screen.types";
-import createProvider from "../../../utils/create-provider";
-import { useBlankStackStore } from "../blank-stack.provider";
-import {
-	createStackTransitionController,
-	resolveStackTransitionDismissalBoundary,
-	resolveStackTransitionDriverSignal,
-	type StackTransitionController,
-	StackTransitionDriverSignal,
-	type StackTransitionSelection,
-} from "./stack-transition-controller";
-
-type StackTransitionProviderProps = {
-	children: ReactNode;
-};
-
-type StackTransitionStoreValue = {
-	selection: StackTransitionSelection | null;
-};
-
-const useDriverSignal = ({
-	controller,
-	driverRouteKey,
-	snapPoints,
-}: {
-	controller: StackTransitionController;
-	driverRouteKey: string | undefined;
-	snapPoints: SnapPoint[] | undefined;
-}) => {
-	const driver = useMemo(() => {
-		if (!driverRouteKey) return null;
-
-		return {
-			animations: AnimationStore.getBag(driverRouteKey),
-			gestures: GestureStore.getBag(driverRouteKey),
-			system: SystemStore.getBag(driverRouteKey),
-		};
-	}, [driverRouteKey]);
-
-	useAnimatedReaction(
-		() => {
-			if (!driver) return StackTransitionDriverSignal.Idle;
-			const progressBaseline = driver.gestures.internal.progressBaseline.get();
-
-			return resolveStackTransitionDriverSignal({
-				closing: driver.animations.closing.get(),
-				dismissalBoundary: resolveStackTransitionDismissalBoundary({
-					progressBaseline,
-					resolvedAutoSnapPoint: driver.system.resolvedAutoSnapPoint.get(),
-					snapPoints,
-				}),
-				dismissing: driver.gestures.dismissing.get(),
-				dragging: driver.gestures.dragging.get(),
-				entering: driver.animations.entering.get(),
-				progressBaseline,
-				progressSettled: driver.animations.progressSettled.get(),
-				settling: driver.gestures.settling.get(),
-				targetProgress: driver.system.targetProgress.get(),
-				visualProgress: driver.animations.visualProgress.get(),
-			});
-		},
-		(signal, previousSignal) => {
-			if (signal === previousSignal) return;
-
-			scheduleOnRN(controller.handleDriverSignal, signal);
-		},
-		[controller, driver, snapPoints],
-	);
-};
-
-export const { StackTransitionProvider, useStackTransitionStore } =
-	createProvider("StackTransition")<
-		StackTransitionProviderProps,
-		StackTransitionStoreValue
-	>(({ children }) => {
-		const focusedIndex = useBlankStackStore((store) => store.focusedIndex);
-		const scenes = useBlankStackStore((store) => store.scenes);
-		const controllerRef = useRef<StackTransitionController | null>(null);
-
-		if (!controllerRef.current) {
-			controllerRef.current = createStackTransitionController({
-				focusedIndex,
-				scenes,
-			});
-		}
-
-		const controller = controllerRef.current;
-		controller.update({ focusedIndex, scenes });
-
-		const snapshot = useSyncExternalStore(
-			controller.subscribe,
-			controller.getSnapshot,
-			controller.getSnapshot,
-		);
-		const focusedRouteKey = scenes[focusedIndex]?.route.key;
-		const driverRouteKey =
-			snapshot.selection?.driverRouteKey ?? focusedRouteKey;
-		const driverSnapPoints = scenes.find(
-			(scene) => scene.route.key === driverRouteKey,
-		)?.descriptor.options.snapPoints;
-
-		useDriverSignal({
-			controller,
-			driverRouteKey,
-			snapPoints: driverSnapPoints,
-		});
-
-		return {
-			children,
-			value: {
-				selection: snapshot.selection,
-			},
-		};
-	});

package/src/providers/stack/stack-transition/use-stack-transition.ts

@@ -1,77 +0,0 @@
-import { useMemo } from "react";
-import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
-import { AnimationStore } from "../../../stores/animation.store";
-import { SystemStore } from "../../../stores/system.store";
-import type { BlankStackStoreValue } from "../../../types/providers/blank-stack-provider.types";
-import { useBlankStackStore } from "../blank-stack.provider";
-import { useStackTransitionStore } from "./stack-transition.provider";
-import {
-	normalizeStackTransitionProgress,
-	resolveStackTransitionDismissalBoundary,
-	type StackTransitionDirection,
-} from "./stack-transition-controller";
-
-export type StackTransition = {
-	direction: StackTransitionDirection;
-	driver: BlankStackStoreValue["scenes"][number];
-	progress: DerivedValue<number>;
-	source: BlankStackStoreValue["scenes"][number];
-	target: BlankStackStoreValue["scenes"][number];
-};
-
-export const useStackTransition = (): StackTransition | null => {
-	const selection = useStackTransitionStore((store) => store.selection);
-	const scenesByKey = useBlankStackStore((store) => store.scenesByKey);
-	const driverProgress = useMemo(
-		() =>
-			selection
-				? AnimationStore.getValue(selection.driverRouteKey, "visualProgress")
-				: null,
-		[selection],
-	);
-	const resolvedAutoSnapPoint = useMemo(
-		() =>
-			selection
-				? SystemStore.getValue(
-						selection.driverRouteKey,
-						"resolvedAutoSnapPoint",
-					)
-				: null,
-		[selection],
-	);
-	const driverSnapPoints = selection
-		? scenesByKey[selection.driverRouteKey]?.descriptor.options.snapPoints
-		: undefined;
-	const direction = selection?.direction ?? "forward";
-	const progress = useDerivedValue(() => {
-		if (!driverProgress) return 0;
-		const dismissalBoundary = resolveStackTransitionDismissalBoundary({
-			progressBaseline: 1,
-			resolvedAutoSnapPoint: resolvedAutoSnapPoint?.get() ?? -1,
-			snapPoints: driverSnapPoints,
-		});
-
-		return normalizeStackTransitionProgress(
-			direction,
-			driverProgress.get(),
-			dismissalBoundary,
-		);
-	}, [direction, driverProgress, driverSnapPoints, resolvedAutoSnapPoint]);
-
-	return useMemo(() => {
-		if (!selection) return null;
-
-		const source = scenesByKey[selection.sourceRouteKey];
-		const target = scenesByKey[selection.targetRouteKey];
-		const driver = scenesByKey[selection.driverRouteKey];
-		if (!source || !target || !driver) return null;
-
-		return {
-			direction: selection.direction,
-			driver,
-			progress,
-			source,
-			target,
-		};
-	}, [progress, scenesByKey, selection]);
-};