react-native-screen-transitions 3.9.0-beta.3 → 4.0.0-alpha.0

package/src/shared/components/screen-container/layers/backdrop.tsx

@@ -1,151 +0,0 @@
-import { type ComponentType, memo, useCallback, useMemo } from "react";
-import { Pressable, StyleSheet } from "react-native";
-import Animated, { runOnUI } from "react-native-reanimated";
-import { DefaultSnapSpec } from "../../../configs/specs";
-import { useNavigationHelpers } from "../../../hooks/navigation/use-navigation-helpers";
-import { useDescriptors } from "../../../providers/screen/descriptors";
-import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
-import { AnimationStore } from "../../../stores/animation.store";
-import { GestureStore } from "../../../stores/gesture.store";
-import { SystemStore } from "../../../stores/system.store";
-import type {
-	BackdropBehavior,
-	ScreenBackdropComponentProps,
-} from "../../../types/screen.types";
-import { animateToProgress } from "../../../utils/animation/animate-to-progress";
-import { findCollapseTarget } from "../helpers/find-collapse-target";
-import { usesLayerRenderProps } from "./render-component";
-
-export const BackdropLayer = memo(function BackdropLayer({
-	backdropBehavior,
-	isBackdropActive,
-}: {
-	backdropBehavior: BackdropBehavior;
-	isBackdropActive: boolean;
-}) {
-	const { current } = useDescriptors();
-	const { dismissScreen } = useNavigationHelpers();
-
-	const BackdropComponent = current.options.backdropComponent;
-	const routeKey = current.route.key;
-	const animations = AnimationStore.getBag(routeKey);
-	const { targetProgress, resolvedAutoSnapPoint } =
-		SystemStore.getBag(routeKey);
-
-	const AnimatedBackdropComponent = useMemo(
-		() =>
-			BackdropComponent && !usesLayerRenderProps(BackdropComponent)
-				? Animated.createAnimatedComponent(
-						BackdropComponent as ComponentType<any>,
-					)
-				: null,
-		[BackdropComponent],
-	);
-
-	const handleBackdropPress = useCallback(() => {
-		if (backdropBehavior === "dismiss") {
-			dismissScreen();
-			return;
-		}
-
-		if (backdropBehavior === "collapse") {
-			const rawSnapPoints = current.options.snapPoints;
-			const canDismiss = current.options.gestureEnabled !== false;
-
-			// No snap points → fallback to dismiss
-			if (!rawSnapPoints || rawSnapPoints.length === 0) {
-				dismissScreen();
-				return;
-			}
-
-			const gestures = GestureStore.getBag(routeKey);
-			const transitionSpec = current.options.transitionSpec;
-
-			runOnUI(() => {
-				"worklet";
-				const resolvedSnaps: number[] = [];
-
-				for (let i = 0; i < rawSnapPoints.length; i++) {
-					const point = rawSnapPoints[i];
-					const resolvedPoint =
-						point === "auto" ? resolvedAutoSnapPoint.get() : point;
-
-					if (typeof resolvedPoint === "number") {
-						resolvedSnaps.push(resolvedPoint);
-					}
-				}
-
-				const { target, shouldDismiss } = findCollapseTarget(
-					animations.transitionProgress.get(),
-					resolvedSnaps,
-					canDismiss,
-				);
-
-				// If already dismissing, skip
-				if (gestures.dismissing.get()) return;
-
-				gestures.dismissing.set(shouldDismiss ? 1 : 0);
-
-				const spec = shouldDismiss
-					? transitionSpec
-					: {
-							open: transitionSpec?.expand ?? DefaultSnapSpec,
-							close: transitionSpec?.collapse ?? DefaultSnapSpec,
-						};
-
-				animateToProgress({
-					target,
-					spec,
-					animations,
-					targetProgress,
-					onAnimationFinish: shouldDismiss ? dismissScreen : undefined,
-				});
-			})();
-		}
-	}, [
-		animations,
-		targetProgress,
-		resolvedAutoSnapPoint,
-		backdropBehavior,
-		current,
-		dismissScreen,
-		routeKey,
-	]);
-
-	const animatedBackdropStyle = useSlotStyles("backdrop");
-	const animatedBackdropProps = useSlotProps("backdrop");
-	const backdropPointerEvents = isBackdropActive ? "auto" : "none";
-	const backdropStyles = [
-		StyleSheet.absoluteFill,
-		animatedBackdropStyle,
-	] as ScreenBackdropComponentProps["styles"];
-	const backdropProps =
-		animatedBackdropProps as ScreenBackdropComponentProps["props"];
-
-	return (
-		<Pressable
-			style={StyleSheet.absoluteFill}
-			pointerEvents={isBackdropActive ? "auto" : "none"}
-			onPress={isBackdropActive ? handleBackdropPress : undefined}
-		>
-			{AnimatedBackdropComponent ? (
-				<AnimatedBackdropComponent
-					style={backdropStyles}
-					animatedProps={animatedBackdropProps}
-					pointerEvents={backdropPointerEvents}
-				/>
-			) : BackdropComponent ? (
-				<BackdropComponent
-					styles={backdropStyles}
-					props={backdropProps}
-					pointerEvents={backdropPointerEvents}
-				/>
-			) : (
-				<Animated.View
-					style={backdropStyles}
-					pointerEvents={backdropPointerEvents}
-				/>
-			)}
-		</Pressable>
-	);
-});

package/src/shared/components/screen-lifecycle/hooks/helpers/reset-stores-for-screen.ts

@@ -1,15 +0,0 @@
-import { runOnUI } from "react-native-reanimated";
-import { AnimationStore } from "../../../../stores/animation.store";
-import { clear } from "../../../../stores/bounds/internals/clear";
-import { GestureStore } from "../../../../stores/gesture.store";
-import { ScrollStore } from "../../../../stores/scroll.store";
-import { SystemStore } from "../../../../stores/system.store";
-
-export function resetStoresForScreen(routeKey: string) {
-	AnimationStore.clearBag(routeKey);
-	GestureStore.clearBag(routeKey);
-	ScrollStore.clearBag(routeKey);
-	SystemStore.clearBag(routeKey);
-
-	runOnUI(clear)(routeKey);
-}

package/src/shared/components/screen-lifecycle/hooks/history/use-screen-history.ts

@@ -1,89 +0,0 @@
-import { useEffect } from "react";
-import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
-import useStableCallback from "../../../../hooks/use-stable-callback";
-import type { BaseDescriptor } from "../../../../providers/screen/descriptors";
-import type { AnimationStoreMap } from "../../../../stores/animation.store";
-import { HistoryStore } from "../../../../stores/history.store";
-import {
-	registerMountedRoute,
-	unregisterMountedRoute,
-} from "./navigator-route-registry";
-
-function hasSnapPoints(descriptor: BaseDescriptor): boolean {
-	const snapPoints = descriptor.options?.snapPoints;
-	return Boolean(snapPoints && snapPoints.length > 0);
-}
-
-/**
- * Check if a screen is a leaf (renders visible content) vs a navigator container.
- * Navigator containers have nested state with routes.
- */
-function isLeafScreen(navigation: BaseDescriptor["navigation"]): boolean {
-	const state = navigation.getState();
-	const index = state?.index ?? -1;
-	const currentRoute = state?.routes?.[index];
-	if (!currentRoute) return false;
-	return !("state" in currentRoute);
-}
-
-function shouldTrackInHistory(descriptor: BaseDescriptor): boolean {
-	return hasSnapPoints(descriptor) || isLeafScreen(descriptor.navigation);
-}
-
-/**
- * Keeps navigator route registration and screen history in sync.
- */
-export function useScreenHistory(
-	current: BaseDescriptor,
-	previous: BaseDescriptor | undefined,
-	animations: AnimationStoreMap,
-) {
-	const navigatorKey = current.navigation.getState()?.key ?? "";
-	const routeKey = current.route.key;
-
-	useEffect(() => {
-		registerMountedRoute(navigatorKey, routeKey);
-
-		return () => {
-			const shouldClearNavigator = unregisterMountedRoute(
-				navigatorKey,
-				routeKey,
-			);
-			if (shouldClearNavigator) {
-				HistoryStore.clearNavigator(navigatorKey);
-			}
-		};
-	}, [navigatorKey, routeKey]);
-
-	// Track history via focus listener - waits for nested navigators to initialize
-	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
-	useEffect(() => {
-		if (shouldTrackInHistory(current)) {
-			HistoryStore.focus(current, navigatorKey);
-		}
-
-		const unsubscribe = current.navigation.addListener?.("focus", () => {
-			if (shouldTrackInHistory(current)) {
-				HistoryStore.focus(current, navigatorKey);
-			}
-		});
-
-		return () => unsubscribe?.();
-	}, []);
-
-	const handleBlur = useStableCallback(() => {
-		if (previous && shouldTrackInHistory(previous)) {
-			const prevNavigatorKey = previous.navigation.getState()?.key ?? "";
-			HistoryStore.focus(previous, prevNavigatorKey);
-		}
-	});
-
-	useAnimatedReaction(
-		() => animations.closing.get(),
-		(closing, prevClosing) => {
-			if (closing && !prevClosing) {
-				runOnJS(handleBlur)();
-			}
-		},
-	);
-}

package/src/shared/configs/index.ts

@@ -1,28 +0,0 @@
-import {
-	DraggableCard,
-	ElasticCard,
-	SharedAppleMusic,
-	SharedIGImage,
-	SharedXImage,
-	SlideFromBottom,
-	SlideFromTop,
-	ZoomIn,
-} from "./presets";
-import { DefaultSnapSpec, DefaultSpec, FlingSpec } from "./specs";
-
-export const Specs = {
-	DefaultSpec,
-	DefaultSnapSpec,
-	FlingSpec,
-};
-
-export const Presets = {
-	SlideFromTop,
-	ZoomIn,
-	SlideFromBottom,
-	DraggableCard,
-	ElasticCard,
-	SharedIGImage,
-	SharedAppleMusic,
-	SharedXImage,
-};

package/src/shared/configs/specs.ts

@@ -1,24 +0,0 @@
-import type { WithSpringConfig } from "react-native-reanimated";
-
-export const DefaultSpec: WithSpringConfig = {
-	stiffness: 1000,
-	damping: 500,
-	mass: 3,
-	overshootClamping: false,
-	// @ts-expect-error Reanimated v3 spring config support.
-	restSpeedThreshold: 0.02,
-};
-
-export const DefaultSnapSpec: WithSpringConfig = {
-	stiffness: 500,
-	damping: 50,
-	mass: 1,
-};
-
-export const FlingSpec: WithSpringConfig = {
-	damping: 23.5,
-	stiffness: 170,
-	mass: 1,
-	overshootClamping: false,
-	energyThreshold: 6e-9,
-};

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

@@ -1,31 +0,0 @@
-import { StackActions } from "@react-navigation/native";
-import { useCallback } from "react";
-import { useDescriptorsStore } from "../../providers/screen/descriptors";
-import { useStack } from "./use-stack";
-
-export function useNavigationHelpers() {
-	const current = useDescriptorsStore((store) => store.descriptors.current);
-	const requestStackDismiss = useStack((stack) => stack.requestDismiss);
-
-	const requestDismiss = useCallback((): boolean => {
-		return requestStackDismiss?.({ route: current.route }) ?? false;
-	}, [current.route, requestStackDismiss]);
-
-	const dismissScreen = useCallback((): boolean => {
-		const state = current.navigation.getState();
-		const routeIndex = state.routes.findIndex(
-			(route) => route.key === current.route.key,
-		);
-		const routeStillPresent = routeIndex !== -1;
-		if (!routeStillPresent || routeIndex === 0) return false;
-
-		current.navigation.dispatch({
-			...StackActions.pop(),
-			source: current.route.key,
-			target: state.key,
-		});
-		return true;
-	}, [current]);
-
-	return { dismissScreen, requestDismiss };
-}

package/src/shared/hooks/navigation/use-tab-press-reset.ts

@@ -1,41 +0,0 @@
-import { type EventArg, StackActions } from "@react-navigation/native";
-import * as React from "react";
-
-/**
- * When inside a tab navigator, resets the stack to the first screen
- * when the already-focused tab is pressed again. Replicates native behaviour.
- */
-export function useTabPressReset(
-	navigation: {
-		isFocused: () => boolean;
-		addListener?: (event: string, callback: (e: any) => void) => () => void;
-		dispatch: (action: any) => void;
-	},
-	stateIndex: number,
-	stateKey: string,
-) {
-	React.useEffect(
-		() =>
-			navigation?.addListener?.("tabPress", (e: any) => {
-				const isFocused = navigation.isFocused();
-
-				// Run the operation in the next frame so we're sure all listeners have been run
-				// This is necessary to know if preventDefault() has been called
-				requestAnimationFrame(() => {
-					if (
-						stateIndex > 0 &&
-						isFocused &&
-						!(e as EventArg<"tabPress", true>).defaultPrevented
-					) {
-						// When user taps on already focused tab and we're inside the tab,
-						// reset the stack to replicate native behaviour
-						navigation.dispatch({
-							...StackActions.popToTop(),
-							target: stateKey,
-						});
-					}
-				});
-			}),
-		[navigation, stateIndex, stateKey],
-	);
-}

package/src/shared/hooks/reanimated/use-shared-value-ref.ts

@@ -1,43 +0,0 @@
-import { useCallback, useRef } from "react";
-import {
-	executeOnUIRuntimeSync,
-	runOnJS,
-	type SharedValue,
-	useAnimatedReaction,
-} from "react-native-reanimated";
-import { IS_WEB } from "../../constants";
-
-export function readInitialValue<T>(sharedValue: SharedValue<T>): T {
-	if (IS_WEB) {
-		return sharedValue.get();
-	}
-	const readOnUI = executeOnUIRuntimeSync((sv: SharedValue<T>) => {
-		"worklet";
-		return sv.get();
-	});
-	return readOnUI(sharedValue);
-}
-
-/**
- * Mirrors a Reanimated SharedValue into a React ref.
- * Same bridging as useSharedValueState but without triggering rerenders.
- */
-export function useSharedValueRef<T>(
-	sharedValue: SharedValue<T>,
-): React.RefObject<T> {
-	const ref = useRef<T>(readInitialValue(sharedValue));
-
-	const updateRef = useCallback((value: T) => {
-		ref.current = value;
-	}, []);
-
-	useAnimatedReaction(
-		() => sharedValue.get(),
-		(value, previousValue) => {
-			if (Object.is(value, previousValue)) return;
-			runOnJS(updateRef)(value);
-		},
-	);
-
-	return ref;
-}

package/src/shared/hooks/reanimated/use-shared-value-state.ts

@@ -1,25 +0,0 @@
-import { useState } from "react";
-import {
-	runOnJS,
-	type SharedValue,
-	useAnimatedReaction,
-} from "react-native-reanimated";
-import { readInitialValue } from "./use-shared-value-ref";
-
-/**
- * Derives React state from a Reanimated SharedValue.
- * Updates the state whenever the shared value changes.
- */
-export function useSharedValueState<T>(sharedValue: SharedValue<T>): T {
-	const [state, setState] = useState<T>(() => readInitialValue(sharedValue));
-
-	useAnimatedReaction(
-		() => sharedValue.get(),
-		(value, previousValue) => {
-			if (Object.is(value, previousValue)) return;
-			runOnJS(setState)(value);
-		},
-	);
-
-	return state;
-}

package/src/shared/hooks/use-stable-callback-value.ts

@@ -1,76 +0,0 @@
-/**
- * Credit:
- * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/integrations/reanimated/hooks/useStableCallbackValue.ts
- */
-import { useCallback, useEffect, useState } from "react";
-import {
-	cancelAnimation,
-	isWorkletFunction,
-	makeMutable,
-	runOnJS,
-} from "react-native-reanimated";
-
-type AnyFunction = (...args: Array<any>) => any;
-
-function useMutableValue<T>(initialValue: T) {
-	const [mutable] = useState(() => makeMutable(initialValue));
-
-	useEffect(() => {
-		return () => {
-			cancelAnimation(mutable);
-		};
-	}, [mutable]);
-
-	return mutable;
-}
-
-// We cannot store a function as a SharedValue because reanimated will treat
-// it as an animation and will try to execute the animation when assigned
-// to the SharedValue. Since we want the function to be treated as a value,
-// we wrap it in an object and store the object in the SharedValue.
-type WrappedCallback<C extends AnyFunction> = {
-	call: C;
-};
-
-const wrap = <C extends AnyFunction>(callback: C): WrappedCallback<C> => {
-	if (isWorkletFunction(callback)) {
-		return { call: callback };
-	}
-	return {
-		call: ((...args: Parameters<C>) => {
-			"worklet";
-			runOnJS(callback)(...args);
-		}) as C,
-	};
-};
-
-/** Creates a stable worklet callback that can be called from the UI runtime
- * @param callback The JavaScript or worklet function to be called
- * @returns A worklet function that can be safely called from the UI thread
- * @default Behavior:
- * - If passed a regular JS function, calls it on the JS thread using runOnJS
- * - If passed a worklet function, calls it directly on the UI thread
- * @important The returned function maintains a stable reference and properly handles
- * thread execution based on the input callback type
- */
-export default function useStableCallbackValue<C extends AnyFunction>(
-	callback?: C,
-) {
-	const stableCallback = useMutableValue<null | WrappedCallback<C>>(null);
-
-	useEffect(() => {
-		if (callback) {
-			stableCallback.set(wrap(callback));
-		} else {
-			stableCallback.set(null);
-		}
-	}, [callback, stableCallback]);
-
-	return useCallback(
-		(...args: Parameters<C>) => {
-			"worklet";
-			stableCallback.get()?.call(...args);
-		},
-		[stableCallback],
-	);
-}