react-native-screen-transitions 3.5.2 → 3.6.0-alpha.1

package/src/shared/components/screen-container/hooks/use-content-layout.ts

@@ -35,25 +35,25 @@ export function useContentLayout() {
 
 			runOnUI((nextWidth: number, nextHeight: number, nextFraction: number) => {
 				"worklet";
-				measuredContentLayout.value = {
+				measuredContentLayout.set({
 					width: nextWidth,
 					height: nextHeight,
-				};
+				});
 
-				const isFirstMeasurement = resolvedAutoSnapPoint.value <= 0;
-				resolvedAutoSnapPoint.value = nextFraction;
+				const isFirstMeasurement = resolvedAutoSnapPoint.get() <= 0;
+				resolvedAutoSnapPoint.set(nextFraction);
 
 				if (
 					!isFirstMeasurement ||
-					animations.progress.value !== 0 ||
-					animations.animating.value !== 0
+					animations.progress.get() !== 0 ||
+					animations.progressAnimating.get() !== 0
 				) {
 					return;
 				}
 
 				if (isFirstKey && !experimental_animateOnInitialMount) {
-					targetProgress.value = nextFraction;
-					animations.progress.value = nextFraction;
+					targetProgress.set(nextFraction);
+					animations.progress.set(nextFraction);
 					return;
 				}
 

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

@@ -15,7 +15,7 @@ import { GestureStore } from "../../../stores/gesture.store";
 import { SystemStore } from "../../../stores/system.store";
 import type { BackdropBehavior } from "../../../types/screen.types";
 import { animateToProgress } from "../../../utils/animation/animate-to-progress";
-import { findCollapseTarget } from "../../../utils/gesture/find-collapse-target";
+import { findCollapseTarget } from "../helpers/find-collapse-target";
 
 export const BackdropLayer = memo(function BackdropLayer({
 	backdropBehavior,
@@ -63,22 +63,28 @@ export const BackdropLayer = memo(function BackdropLayer({
 
 			runOnUI(() => {
 				"worklet";
-				const resolvedSnaps = rawSnapPoints
-					.map((point) =>
-						point === "auto" ? resolvedAutoSnapPoint.value : point,
-					)
-					.filter((point): point is number => typeof point === "number");
+				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.progress.value,
+					animations.progress.get(),
 					resolvedSnaps,
 					canDismiss,
 				);
 
 				// If already dismissing, skip
-				if (gestures.dismissing.value) return;
+				if (gestures.dismissing.get()) return;
 
-				gestures.dismissing.value = shouldDismiss ? 1 : 0;
+				gestures.dismissing.set(shouldDismiss ? 1 : 0);
 
 				const spec = shouldDismiss
 					? transitionSpec

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

@@ -7,8 +7,8 @@ import Animated, {
 	useAnimatedStyle,
 } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../constants";
-import { useGestureContext } from "../../../providers/gestures";
 import { useDescriptors } from "../../../providers/screen/descriptors";
+import { useGestureContext } from "../../../providers/screen/gestures";
 import { useScreenStyles } from "../../../providers/screen/styles";
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
@@ -45,7 +45,7 @@ export const ContentLayer = memo(
 		});
 
 		return (
-			<GestureDetector gesture={gestureContext!.panGesture}>
+			<GestureDetector gesture={gestureContext!.detectorGesture}>
 				<Animated.View
 					style={[styles.content, animatedContentStyle]}
 					animatedProps={animatedContentProps}

package/src/shared/components/screen-container/layers/maybe-masked-navigation-container.tsx

@@ -27,8 +27,38 @@ let hasWarnedMissingMaskedView = false;
 
 export const MaybeMaskedNavigationContainer = memo(
 	({ enabled, children, pointerEvents }: Props) => {
+		if (!enabled || LazyMaskedView === View) {
+			return children;
+		}
+
+		return (
+			<MaskedNavigationContainer pointerEvents={pointerEvents}>
+				{children}
+			</MaskedNavigationContainer>
+		);
+	},
+);
+
+const MaskedNavigationContainer = memo(
+	({
+		children,
+		pointerEvents,
+	}: {
+		children: React.ReactNode;
+		pointerEvents: ViewProps["pointerEvents"];
+	}) => {
 		const { stylesMap } = useScreenStyles();
 
+		const maybeLogWarning = useCallback(() => {
+			if (LazyMaskedView !== View) return;
+			if (hasWarnedMissingMaskedView) return;
+
+			hasWarnedMissingMaskedView = true;
+			logger.warn(
+				"navigationMaskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
+			);
+		}, []);
+
 		const animatedNavigationMaskStyle = useAnimatedStyle(() => {
 			"worklet";
 			return (
@@ -43,21 +73,6 @@ export const MaybeMaskedNavigationContainer = memo(
 			);
 		});
 
-		const maybeLogWarning = useCallback(() => {
-			if (!enabled) return;
-			if (LazyMaskedView !== View) return;
-			if (hasWarnedMissingMaskedView) return;
-
-			hasWarnedMissingMaskedView = true;
-			logger.warn(
-				"navigationMaskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
-			);
-		}, [enabled]);
-
-		if (!enabled || LazyMaskedView === View) {
-			return children;
-		}
-
 		return (
 			<LazyMaskedView
 				style={styles.navigationMaskedRoot}
@@ -76,7 +91,6 @@ export const MaybeMaskedNavigationContainer = memo(
 						styles.navigationContainer,
 						animatedNavigationMaskContainerStyle,
 					]}
-					pointerEvents={pointerEvents}
 					collapsable={false}
 				>
 					{children}

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

@@ -14,7 +14,6 @@ type Props = {
 };
 
 export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
-	const { stylesMap } = useScreenStyles();
 	const { current } = useDescriptors();
 
 	const SurfaceComponent = current.options.surfaceComponent;
@@ -25,29 +24,50 @@ export const SurfaceContainer = memo(({ children, pointerEvents }: Props) => {
 			: null;
 	}, [SurfaceComponent]);
 
-	const animatedSurfaceStyle = useAnimatedStyle(() => {
-		"worklet";
-		return stylesMap.get().surface?.style ?? NO_STYLES;
-	});
-
-	const animatedSurfaceProps = useAnimatedProps(() => {
-		"worklet";
-		return stylesMap.get().surface?.props ?? NO_PROPS;
-	});
-
 	if (!AnimatedSurfaceComponent) return children;
 
 	return (
-		<AnimatedSurfaceComponent
-			style={[styles.surface, animatedSurfaceStyle]}
-			animatedProps={animatedSurfaceProps}
+		<AnimatedSurface
+			SurfaceComponent={AnimatedSurfaceComponent}
 			pointerEvents={pointerEvents}
 		>
 			{children}
-		</AnimatedSurfaceComponent>
+		</AnimatedSurface>
 	);
 });
 
+type AnimatedSurfaceProps = {
+	children: React.ReactNode;
+	pointerEvents: ViewProps["pointerEvents"];
+	SurfaceComponent: ComponentType<any>;
+};
+
+const AnimatedSurface = memo(
+	({ children, pointerEvents, SurfaceComponent }: AnimatedSurfaceProps) => {
+		const { stylesMap } = useScreenStyles();
+
+		const animatedSurfaceStyle = useAnimatedStyle(() => {
+			"worklet";
+			return stylesMap.get().surface?.style ?? NO_STYLES;
+		});
+
+		const animatedSurfaceProps = useAnimatedProps(() => {
+			"worklet";
+			return stylesMap.get().surface?.props ?? NO_PROPS;
+		});
+
+		return (
+			<SurfaceComponent
+				style={[styles.surface, animatedSurfaceStyle]}
+				animatedProps={animatedSurfaceProps}
+				pointerEvents={pointerEvents}
+			>
+				{children}
+			</SurfaceComponent>
+		);
+	},
+);
+
 const styles = StyleSheet.create({
 	surface: {
 		flex: 1,

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

@@ -1,33 +1,15 @@
 import { runOnUI } from "react-native-reanimated";
 import { AnimationStore } from "../../../../stores/animation.store";
-import {
-	clear,
-	clearByAncestor,
-	clearByBranch,
-} from "../../../../stores/bounds/internals/clear";
+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,
-	isBranchScreen: boolean,
-	branchNavigatorKey?: string,
-) {
+export function resetStoresForScreen(routeKey: string) {
 	AnimationStore.clearBag(routeKey);
 	GestureStore.clearBag(routeKey);
+	ScrollStore.clearBag(routeKey);
 	SystemStore.clearBag(routeKey);
 
-	runOnUI(() => {
-		"worklet";
-		if (!isBranchScreen) return;
-
-		clear(routeKey);
-
-		if (branchNavigatorKey) {
-			clearByBranch(branchNavigatorKey);
-			return;
-		}
-
-		clearByAncestor(routeKey);
-	})();
+	runOnUI(clear)(routeKey);
 }

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

@@ -47,7 +47,7 @@ const useManagedClose = ({
 
 	useAnimatedReaction(
 		() => {
-			const keys = closingRouteKeysShared.value;
+			const keys = closingRouteKeysShared.get();
 			return keys?.includes(routeKey) ?? false;
 		},
 		(isClosing, wasClosing) => {
@@ -68,7 +68,6 @@ const useManagedClose = ({
  */
 const useNativeStackClose = ({
 	current,
-	animations,
 	requestLifecycleTransition,
 	resetStores,
 }: CloseHookParams) => {
@@ -106,7 +105,6 @@ const useNativeStackClose = ({
 		const isFirstScreen = routeIndex <= 0;
 
 		if (!isEnabled || nearestAncestorDismissing?.get() || isFirstScreen) {
-			animations.closing.set(1);
 			resetStores();
 			return;
 		}
@@ -137,12 +135,11 @@ export function useCloseTransitionIntent(
 } {
 	const routeKey = current.route.key;
 	const { flags } = useStackCoreContext();
-	const { isBranchScreen, branchNavigatorKey } = useDescriptorDerivations();
 	const isNativeStack = flags.STACK_TYPE === StackType.NATIVE;
 	const { requestLifecycleTransition } = system.actions;
 
 	const resetStores = useStableCallback(() => {
-		resetStoresForScreen(routeKey, isBranchScreen, branchNavigatorKey);
+		resetStoresForScreen(routeKey);
 	});
 
 	const closeParams: CloseHookParams = {

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

@@ -66,7 +66,7 @@ export function useOpenTransitionIntent(
 				system.targetProgress.set(target);
 				animations.progress.set(target);
 			}
-			animations.animating.set(0);
+			animations.progressAnimating.set(0);
 			animations.closing.set(0);
 			animations.entering.set(0);
 			return;

package/src/shared/configs/presets.ts

@@ -246,7 +246,7 @@ export const SharedIGImage = ({
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "horizontal"],
 		enableTransitions: true,
-		gestureDrivesProgress: false,
+		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			current,
 			layouts: {
@@ -394,7 +394,7 @@ export const SharedAppleMusic = ({
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "horizontal"],
-		gestureDrivesProgress: false,
+		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			bounds,
 			focused,
@@ -407,18 +407,18 @@ export const SharedAppleMusic = ({
 
 			const normX = active.gesture.normX;
 			const normY = active.gesture.normY;
-			const initialDirection = active.gesture.direction;
+			const initialGesture = active.gesture.active ?? active.gesture.direction;
 
 			/**
 			 * ===============================
 			 * Animations for both bounds
 			 * ===============================
 			 */
-			const xResistance = initialDirection === "horizontal" ? 0.7 : 0.4;
-			const yResistance = initialDirection === "vertical" ? 0.7 : 0.4;
+			const xResistance = initialGesture === "horizontal" ? 0.7 : 0.4;
+			const yResistance = initialGesture === "vertical" ? 0.7 : 0.4;
 
-			const xScaleOuput = initialDirection === "horizontal" ? [1, 0.5] : [1, 1];
-			const yScaleOuput = initialDirection === "vertical" ? [1, 0.5] : [1, 1];
+			const xScaleOuput = initialGesture === "horizontal" ? [1, 0.5] : [1, 1];
+			const yScaleOuput = initialGesture === "vertical" ? [1, 0.5] : [1, 1];
 
 			const dragX = interpolate(
 				normX,
@@ -608,7 +608,7 @@ export const SharedXImage = ({
 		enableTransitions: true,
 		gestureEnabled: true,
 		gestureDirection: ["vertical", "vertical-inverted"],
-		gestureDrivesProgress: false,
+		gestureProgressMode: "freeform",
 		screenStyleInterpolator: ({
 			focused,
 			bounds,

package/src/shared/configs/specs.ts

@@ -4,8 +4,8 @@ export const DefaultSpec: WithSpringConfig = {
 	stiffness: 1000,
 	damping: 500,
 	mass: 3,
-	overshootClamping: true,
-	// @ts-expect-error
+	overshootClamping: false,
+	// @ts-expect-error Reanimated v3 spring config support.
 	restSpeedThreshold: 0.02,
 };
 

package/src/shared/constants.ts

@@ -1,9 +1,15 @@
 import type { ParamListBase, RouteProp } from "@react-navigation/native";
 import { Platform } from "react-native";
 import type { MeasuredDimensions } from "react-native-reanimated";
-import type { ScreenTransitionState } from "./types/animation.types";
-import type { ActivationArea } from "./types/gesture.types";
-import type { Layout } from "./types/screen.types";
+import type {
+	ScreenTransitionOptions,
+	ScreenTransitionState,
+} from "./types/animation.types";
+import type {
+	ActivationArea,
+	GestureProgressMode,
+} from "./types/gesture.types";
+import type { Layout, SheetScrollGestureBehavior } from "./types/screen.types";
 import type { BaseStackRoute } from "./types/stack.types";
 
 /**
@@ -31,13 +37,24 @@ export const NO_PROPS = Object.freeze({});
 /**
  * Default gesture values
  */
-const DEFAULT_GESTURE_VALUES = {
+const DEFAULT_RAW_GESTURE_VALUES = {
 	x: 0,
 	y: 0,
 	normX: 0,
 	normY: 0,
+	scale: 1,
+	normScale: 0,
+} as const;
+
+const DEFAULT_GESTURE_VALUES = {
+	...DEFAULT_RAW_GESTURE_VALUES,
+	focalX: 0,
+	focalY: 0,
+	raw: DEFAULT_RAW_GESTURE_VALUES,
 	dismissing: 0,
 	dragging: 0,
+	settling: 0,
+	active: null,
 	direction: null,
 
 	// Deprecated aliases
@@ -47,6 +64,14 @@ const DEFAULT_GESTURE_VALUES = {
 	isDragging: 0,
 } as const;
 
+const createDefaultGestureValues = () => ({
+	...DEFAULT_GESTURE_VALUES,
+	raw: { ...DEFAULT_RAW_GESTURE_VALUES },
+});
+
+export const DEFAULT_SCREEN_TRANSITION_OPTIONS: ScreenTransitionOptions =
+	Object.freeze({});
+
 /**
  * Creates a new screen transition state object
  */
@@ -54,6 +79,7 @@ export const createScreenTransitionState = (
 	route: BaseStackRoute,
 	meta?: Record<string, unknown>,
 	navigationMaskEnabled = false,
+	options: ScreenTransitionOptions = DEFAULT_SCREEN_TRANSITION_OPTIONS,
 ): ScreenTransitionState => ({
 	progress: 0,
 	closing: 0,
@@ -62,9 +88,10 @@ export const createScreenTransitionState = (
 	settled: 1,
 	logicallySettled: 1,
 	entering: 0,
-	gesture: { ...DEFAULT_GESTURE_VALUES },
+	gesture: createDefaultGestureValues(),
 	route,
 	meta,
+	options,
 	layouts: {
 		screen: {
 			width: 0,
@@ -72,6 +99,7 @@ export const createScreenTransitionState = (
 		},
 		navigationMaskEnabled,
 	},
+	animatedSnapIndex: -1,
 	snapIndex: -1,
 });
 
@@ -87,8 +115,9 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 		settled: 1,
 		logicallySettled: 1,
 		entering: 0,
-		gesture: DEFAULT_GESTURE_VALUES,
+		gesture: createDefaultGestureValues(),
 		route: {} as RouteProp<ParamListBase>,
+		options: DEFAULT_SCREEN_TRANSITION_OPTIONS,
 		layouts: {
 			screen: {
 				width: 0,
@@ -96,6 +125,7 @@ export const DEFAULT_SCREEN_TRANSITION_STATE: ScreenTransitionState =
 			},
 			navigationMaskEnabled: false,
 		},
+		animatedSnapIndex: -1,
 		snapIndex: -1,
 	});
 
@@ -130,12 +160,15 @@ export const FULLSCREEN_DIMENSIONS = (
 
 export const DEFAULT_GESTURE_VELOCITY_IMPACT = 0.3;
 export const DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT = 0.1;
-export const DEFAULT_GESTURE_RELEASE_VELOCITY_MAX = 3.2;
+export const DEFAULT_GESTURE_SENSITIVITY = 1;
 export const DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE = 1;
 export const DEFAULT_GESTURE_DIRECTION = "horizontal";
-export const DEFAULT_GESTURE_DRIVES_PROGRESS = true;
+export const DEFAULT_GESTURE_PROGRESS_MODE: GestureProgressMode =
+	"progress-driven";
 export const DEFAULT_GESTURE_SNAP_LOCKED = false;
 export const DEFAULT_GESTURE_ACTIVATION_AREA: ActivationArea = "screen";
+export const DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR: SheetScrollGestureBehavior =
+	"expand-and-collapse";
 
 export const IS_WEB = Platform.OS === "web";
 
@@ -152,3 +185,14 @@ export const EPSILON = 1e-5;
  * Prevents micro-jitter/oscillation near animation endpoints.
  */
 export const ANIMATION_SNAP_THRESHOLD = 0.01;
+
+/**
+ * Number of consecutive frames progress must remain near its target before it
+ * is treated as logically settled.
+ */
+export const LOGICAL_SETTLE_REQUIRED_FRAMES = 5;
+
+/**
+ * Progress distance from target required for logical settle.
+ */
+export const LOGICAL_SETTLE_PROGRESS_THRESHOLD = 0.001;

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

@@ -9,11 +9,11 @@ import { IS_WEB } from "../../constants";
 
 export function readInitialValue<T>(sharedValue: SharedValue<T>): T {
 	if (IS_WEB) {
-		return sharedValue.value;
+		return sharedValue.get();
 	}
 	const readOnUI = executeOnUIRuntimeSync((sv: SharedValue<T>) => {
 		"worklet";
-		return sv.value;
+		return sv.get();
 	});
 	return readOnUI(sharedValue);
 }
@@ -32,7 +32,7 @@ export function useSharedValueRef<T>(
 	}, []);
 
 	useAnimatedReaction(
-		() => sharedValue.value,
+		() => sharedValue.get(),
 		(value, previousValue) => {
 			if (Object.is(value, previousValue)) return;
 			runOnJS(updateRef)(value);

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

@@ -14,7 +14,7 @@ export function useSharedValueState<T>(sharedValue: SharedValue<T>): T {
 	const [state, setState] = useState<T>(() => readInitialValue(sharedValue));
 
 	useAnimatedReaction(
-		() => sharedValue.value,
+		() => sharedValue.get(),
 		(value, previousValue) => {
 			if (Object.is(value, previousValue)) return;
 			runOnJS(setState)(value);

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

@@ -60,16 +60,16 @@ export default function useStableCallbackValue<C extends AnyFunction>(
 
 	useEffect(() => {
 		if (callback) {
-			stableCallback.value = wrap(callback);
+			stableCallback.set(wrap(callback));
 		} else {
-			stableCallback.value = null;
+			stableCallback.set(null);
 		}
 	}, [callback, stableCallback]);
 
 	return useCallback(
 		(...args: Parameters<C>) => {
 			"worklet";
-			stableCallback.value?.call(...args);
+			stableCallback.get()?.call(...args);
 		},
 		[stableCallback],
 	);

package/src/shared/index.ts

@@ -30,10 +30,6 @@ export {
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 	TRANSFORM_RESET,
 } from "./constants";
-export {
-	type ScreenGestureTarget,
-	useScreenGesture,
-} from "./hooks/gestures/use-screen-gesture";
 export { useHistory } from "./hooks/navigation/use-history";
 export {
 	type ScreenState,
@@ -43,11 +39,16 @@ export {
 	type ScreenAnimationTarget,
 	useScreenAnimation,
 } from "./providers/screen/animation";
+export {
+	type ScreenGestureTarget,
+	useScreenGesture,
+} from "./providers/screen/gestures/hooks/use-screen-gesture";
 
 export type {
 	AnimatedViewStyle,
 	AnimationConfig,
 	BoundsNavigationAccessor,
+	BoundsNavigationRevealStyle,
 	BoundsNavigationZoomOpacityRange,
 	BoundsNavigationZoomOpacityRanges,
 	BoundsNavigationZoomOptions,
@@ -55,7 +56,10 @@ export type {
 	OverlayProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
+	ScreenTransitionAccessor,
 	ScreenTransitionConfig,
+	ScreenTransitionDepthTarget,
+	ScreenTransitionTarget,
 	TransitionInterpolatedStyle,
 	TransitionSlotStyle,
 	TransitionSpec,