react-native-screen-transitions 3.0.0-beta.1 → 3.0.0-beta.11

package/src/shared/hooks/animation/use-associated-style.tsx

@@ -5,7 +5,7 @@ import {
 	useSharedValue,
 } from "react-native-reanimated";
 import { NO_STYLES } from "../../constants";
-import { useTransitionStyles } from "../../providers/transition-styles";
+import { useTransitionStyles } from "../../providers/transition-styles.provider";
 
 type Props = {
 	id?: string;
@@ -16,14 +16,12 @@ type Props = {
  * This hook is used to get the associated styles for a given styleId / boundTag.
  */
 export const useAssociatedStyles = ({ id }: Props = {}) => {
-	const { stylesMap } = useTransitionStyles();
+	const { stylesMap, parentStylesMap } = useTransitionStyles();
 	const showAfterFirstFrame = useSharedValue(false);
 
 	useDerivedValue(() => {
 		"worklet";
 
-		// If the associated styles have already been shown, return.
-
 		if (!id) {
 			showAfterFirstFrame.value = true;
 			return;
@@ -39,10 +37,14 @@ export const useAssociatedStyles = ({ id }: Props = {}) => {
 	const associatedStyles = useAnimatedStyle(() => {
 		"worklet";
 
-		if (!id || !stylesMap) {
+		if (!id) {
 			return NO_STYLES;
 		}
-		const base = stylesMap.value[id] || NO_STYLES;
+
+		// Check local styles first, then fall back to parent
+		const localStyles = stylesMap?.value[id];
+		const parentStyles = parentStylesMap?.value[id];
+		const base = localStyles || parentStyles || NO_STYLES;
 
 		let opacity = 1;
 
@@ -50,13 +52,10 @@ export const useAssociatedStyles = ({ id }: Props = {}) => {
 			opacity = base.opacity as number;
 		}
 
-		// Only force opacity to 0 during the initial frame; once ready,
-		// return base unchanged so we never override user-provided opacity.
 		if (!showAfterFirstFrame.value) {
 			return { ...base, opacity: 0 };
 		}
 
-		// Since opacity exists on the base style, we don't need to override it.
 		if ("opacity" in base) {
 			return base;
 		}

package/src/shared/hooks/animation/use-screen-animation.tsx

@@ -4,18 +4,15 @@ import { useWindowDimensions } from "react-native";
 import { type SharedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import {
-	DEFAULT_SCREEN_TRANSITION_STATE,
-	NO_BOUNDS_MAP,
-} from "../../constants";
-import { type TransitionDescriptor, useKeys } from "../../providers/keys";
-import { AnimationStore } from "../../stores/animation-store";
-import { BoundStore } from "../../stores/bound-store";
-import { GestureStore, type GestureStoreMap } from "../../stores/gesture-store";
+import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../constants";
+import { type TransitionDescriptor, useKeys } from "../../providers/keys.provider";
+
+import { AnimationStore } from "../../stores/animation.store";
+import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
 import type {
 	ScreenInterpolationProps,
 	ScreenTransitionState,
-} from "../../types/animation";
+} from "../../types/animation.types";
 import { derivations } from "../../utils/animation/derivations";
 import { createBounds } from "../../utils/bounds";
 
@@ -47,7 +44,6 @@ const unwrap = (
 			isDragging: s.gesture.isDragging.value,
 			direction: s.gesture.direction.value,
 		},
-		bounds: BoundStore.getBounds(key) || NO_BOUNDS_MAP,
 		route: s.route,
 	};
 };
@@ -99,17 +95,9 @@ export function _useScreenAnimation() {
 			unwrap(currentAnimation, currentDescriptor?.route.key) ??
 			DEFAULT_SCREEN_TRANSITION_STATE;
 
-		const {
-			progress,
-			focused,
-			activeBoundId,
-			active,
-			isActiveTransitioning,
-			isDismissing,
-		} = derivations({
+		const helpers = derivations({
 			current,
 			next,
-			previous,
 		});
 
 		return {
@@ -118,13 +106,7 @@ export function _useScreenAnimation() {
 			previous,
 			current,
 			next,
-			focused,
-			activeBoundId,
-			progress,
-
-			active,
-			isActiveTransitioning,
-			isDismissing,
+			...helpers,
 		};
 	});
 

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -1,4 +1,5 @@
-import { useMemo } from "react";
+import { StackActions } from "@react-navigation/native";
+import { useCallback, useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import {
 	Gesture,
@@ -9,11 +10,7 @@ import {
 	type PanGestureHandlerEventPayload,
 } from "react-native-gesture-handler";
 import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
-import {
-	runOnJS,
-	type SharedValue,
-	useSharedValue,
-} from "react-native-reanimated";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import {
 	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
@@ -21,30 +18,35 @@ import {
 	DEFAULT_GESTURE_ENABLED,
 	GESTURE_VELOCITY_IMPACT,
 } from "../../constants";
-import type { ScrollConfig } from "../../providers/gestures";
-import { useKeys } from "../../providers/keys";
-import { AnimationStore } from "../../stores/animation-store";
-import { GestureStore } from "../../stores/gesture-store";
-import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
-import { type GestureDirection, GestureOffsetState } from "../../types/gesture";
+import type {
+	GestureContextType,
+	ScrollConfig,
+} from "../../providers/gestures.provider";
+import { useKeys } from "../../providers/keys.provider";
+import { AnimationStore } from "../../stores/animation.store";
+import { GestureStore, type GestureStoreMap } from "../../stores/gesture.store";
+
+import { type GestureDirection, GestureOffsetState } from "../../types/gesture.types";
 import { startScreenTransition } from "../../utils/animation/start-screen-transition";
 import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
 import { determineDismissal } from "../../utils/gesture/determine-dismissal";
 import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
 import { resetGestureValues } from "../../utils/gesture/reset-gesture-values";
 import { velocity } from "../../utils/gesture/velocity";
-import useStableCallback from "../use-stable-callback";
 import useStableCallbackValue from "../use-stable-callback-value";
 
 interface BuildGesturesHookProps {
 	scrollConfig: SharedValue<ScrollConfig | null>;
+	parentContext?: GestureContextType | null;
 }
 
 export const useBuildGestures = ({
 	scrollConfig,
+	parentContext,
 }: BuildGesturesHookProps): {
 	panGesture: GestureType;
 	nativeGesture: GestureType;
+	gestureAnimationValues: GestureStoreMap;
 } => {
 	const dimensions = useWindowDimensions();
 	const { current } = useKeys();
@@ -58,7 +60,9 @@ export const useBuildGestures = ({
 		GestureOffsetState.PENDING,
 	);
 
-	const gestures = GestureStore.getRouteGestures(current.route.key);
+	const gestureAnimationValues = GestureStore.getRouteGestures(
+		current.route.key,
+	);
 	const animations = AnimationStore.getAll(current.route.key);
 
 	const {
@@ -87,17 +91,29 @@ export const useBuildGestures = ({
 		};
 	}, [gestureDirection]);
 
-	const setNavigatorDismissal = useStableCallback(() => {
-		const key = current.navigation.getState().key;
+	const handleDismiss = useCallback(() => {
+		// If an ancestor navigator is already dismissing, skip this dismiss to
+		// avoid racing with the parent
+		if (parentContext?.gestureAnimationValues.isDismissing?.value) {
+			return;
+		}
 
-		NavigatorDismissState.set(key, true);
-	});
+		const state = current.navigation.getState();
 
-	const handleDismiss = useStableCallback(() => {
-		const key = current.navigation.getState().key;
-		current.navigation.goBack();
-		NavigatorDismissState.remove(key);
-	});
+		const routeStillPresent = state.routes.some(
+			(route) => route.key === current.route.key,
+		);
+
+		if (!routeStillPresent) {
+			return;
+		}
+
+		current.navigation.dispatch({
+			...StackActions.pop(),
+			source: current.route.key,
+			target: state.key,
+		});
+	}, [current, parentContext]);
 
 	const onTouchesDown = useStableCallbackValue((e: GestureTouchEvent) => {
 		"worklet";
@@ -110,6 +126,13 @@ export const useBuildGestures = ({
 		(e: GestureTouchEvent, manager: GestureStateManagerType) => {
 			"worklet";
 
+			// If an ancestor navigator is already dismissing via gesture, block new gestures here.
+			if (parentContext?.gestureAnimationValues.isDismissing?.value) {
+				gestureOffsetState.value = GestureOffsetState.FAILED;
+				manager.fail();
+				return;
+			}
+
 			const touch = e.changedTouches[0];
 
 			const { isSwipingDown, isSwipingUp, isSwipingRight, isSwipingLeft } =
@@ -130,7 +153,7 @@ export const useBuildGestures = ({
 			}
 
 			// Keep pending until thresholds are met; no eager activation.
-			if (gestures.isDragging?.value) {
+			if (gestureAnimationValues.isDragging?.value) {
 				manager.activate();
 				return;
 			}
@@ -178,9 +201,9 @@ export const useBuildGestures = ({
 			if (
 				shouldActivate &&
 				gestureOffsetState.value === GestureOffsetState.PASSED &&
-				!gestures.isDismissing?.value
+				!gestureAnimationValues.isDismissing?.value
 			) {
-				gestures.direction.value = activatedDirection;
+				gestureAnimationValues.direction.value = activatedDirection;
 				manager.activate();
 				return;
 			}
@@ -189,8 +212,8 @@ export const useBuildGestures = ({
 
 	const onStart = useStableCallbackValue(() => {
 		"worklet";
-		gestures.isDragging.value = 1;
-		gestures.isDismissing.value = 0;
+		gestureAnimationValues.isDragging.value = 1;
+		gestureAnimationValues.isDismissing.value = 0;
 	});
 
 	const onUpdate = useStableCallbackValue(
@@ -202,13 +225,13 @@ export const useBuildGestures = ({
 			const { translationX, translationY } = event;
 			const { width, height } = dimensions;
 
-			gestures.x.value = translationX;
-			gestures.y.value = translationY;
-			gestures.normalizedX.value = Math.max(
+			gestureAnimationValues.x.value = translationX;
+			gestureAnimationValues.y.value = translationY;
+			gestureAnimationValues.normalizedX.value = Math.max(
 				-1,
 				Math.min(1, translationX / width),
 			);
-			gestures.normalizedY.value = Math.max(
+			gestureAnimationValues.normalizedY.value = Math.max(
 				-1,
 				Math.min(1, translationY / height),
 			);
@@ -275,16 +298,12 @@ export const useBuildGestures = ({
 
 			resetGestureValues({
 				spec,
-				gestures,
+				gestures: gestureAnimationValues,
 				shouldDismiss,
 				event,
 				dimensions,
 			});
 
-			if (shouldDismiss) {
-				runOnJS(setNavigatorDismissal)();
-			}
-
 			const initialVelocity = velocity.calculateProgressVelocity({
 				animations,
 				shouldDismiss,
@@ -319,6 +338,15 @@ export const useBuildGestures = ({
 		return {
 			panGesture,
 			nativeGesture,
+			gestureAnimationValues,
 		};
-	}, [gestureEnabled, onTouchesDown, onTouchesMove, onStart, onUpdate, onEnd]);
+	}, [
+		gestureEnabled,
+		onTouchesDown,
+		onTouchesMove,
+		onStart,
+		onUpdate,
+		onEnd,
+		gestureAnimationValues,
+	]);
 };

package/src/shared/hooks/gestures/use-parent-gesture-registry.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useGestureContext } from "../../providers/gestures";
+import { useGestureContext } from "../../providers/gestures.provider";
 import useStableCallback from "../use-stable-callback";
 
 /**

package/src/shared/hooks/gestures/use-scroll-registry.tsx

@@ -1,8 +1,8 @@
 import type { LayoutChangeEvent } from "react-native";
 import { useAnimatedScrollHandler } from "react-native-reanimated";
 import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes";
-import { useGestureContext } from "../../providers/gestures";
-import type { Any } from "../../types/utils";
+import { useGestureContext } from "../../providers/gestures.provider";
+import type { Any } from "../../types/utils.types";
 import useStableCallback from "../use-stable-callback";
 
 interface ScrollProgressHookProps {

package/src/shared/hooks/{use-stable-callback-value.tsx → use-stable-callback-value.ts}

@@ -4,6 +4,7 @@
  */
 import { useCallback, useEffect, useState } from "react";
 import {
+	cancelAnimation,
 	isWorkletFunction,
 	makeMutable,
 	runOnJS,
@@ -13,7 +14,15 @@ import {
 type AnyFunction = (...args: Array<any>) => any;
 
 function useMutableValue<T>(initialValue: T) {
-	return useState(() => makeMutable(initialValue))[0];
+	const [mutable] = useState(() => makeMutable(initialValue));
+
+	useEffect(() => {
+		return () => {
+			cancelAnimation(mutable);
+		};
+	}, [mutable]);
+
+	return mutable;
 }
 
 // We cannot store a function as a SharedValue because reanimated will treat

package/src/shared/index.ts

@@ -21,6 +21,9 @@ export default {
 export { useScreenAnimation } from "./hooks/animation/use-screen-animation";
 
 export type {
+	AnimationConfig,
 	OverlayInterpolationProps,
 	ScreenInterpolationProps,
-} from "./types/animation";
+	ScreenStyleInterpolator,
+} from "./types/animation.types";
+export type { ScreenTransitionConfig } from "./types/core.types";

package/src/shared/providers/{gestures.tsx → gestures.provider.tsx}

@@ -5,6 +5,7 @@ import { GestureDetector } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import { useSharedValue } from "react-native-reanimated";
 import { useBuildGestures } from "../hooks/gestures/use-build-gestures";
+import type { GestureStoreMap } from "../stores/gesture.store";
 
 export type ScrollConfig = {
 	x: number;
@@ -19,34 +20,42 @@ export interface GestureContextType {
 	panGesture: GestureType;
 	nativeGesture: GestureType;
 	scrollConfig: SharedValue<ScrollConfig | null>;
+	gestureAnimationValues: GestureStoreMap;
 	parentContext: GestureContextType | null;
 }
 
-type ScreenGestureProviderProps = {
+type GestureProviderProps = {
 	children: React.ReactNode;
 };
 
 const GestureContext = createContext<GestureContextType | undefined>(undefined);
 
-export const ScreenGestureProvider = ({
-	children,
-}: ScreenGestureProviderProps) => {
+export const ScreenGestureProvider = ({ children }: GestureProviderProps) => {
 	const parentContext = useContext(GestureContext);
 
 	const scrollConfig = useSharedValue<ScrollConfig | null>(null);
 
-	const { panGesture, nativeGesture } = useBuildGestures({
-		scrollConfig,
-	});
+	const { panGesture, nativeGesture, gestureAnimationValues } =
+		useBuildGestures({
+			scrollConfig,
+			parentContext,
+		});
 
 	const value: GestureContextType = useMemo(
 		() => ({
 			panGesture,
 			scrollConfig,
 			nativeGesture,
+			gestureAnimationValues,
 			parentContext: parentContext || null,
 		}),
-		[panGesture, scrollConfig, nativeGesture, parentContext],
+		[
+			panGesture,
+			scrollConfig,
+			nativeGesture,
+			gestureAnimationValues,
+			parentContext,
+		],
 	);
 
 	return (

package/src/shared/providers/{keys.tsx → keys.provider.tsx}

@@ -5,7 +5,7 @@ import type {
 	RouteProp,
 } from "@react-navigation/native";
 import { createContext, useContext, useMemo } from "react";
-import type { ScreenTransitionConfig } from "../types/core";
+import type { ScreenTransitionConfig } from "../types/core.types";
 
 export type TransitionDescriptor = Descriptor<
 	ScreenTransitionConfig,