react-native-screen-transitions 2.0.6 → 2.1.0

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

@@ -0,0 +1,145 @@
+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 useStableCallback from "../use-stable-callback";
+
+interface ScrollProgressHookProps {
+	onScroll?: (event: ReanimatedScrollEvent) => void;
+	onContentSizeChange?: (width: number, height: number) => void;
+	onLayout?: (event: LayoutChangeEvent) => void;
+}
+
+export const useScrollRegistry = (props: ScrollProgressHookProps) => {
+	const { scrollConfig, parentContext } = useGestureContext();
+
+	const scrollHandler = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			props.onScroll?.(event);
+
+			scrollConfig.modify((v: Any) => {
+				"worklet";
+				if (v === null) {
+					return {
+						x: event.contentOffset.x,
+						y: event.contentOffset.y,
+						contentHeight: 0,
+						contentWidth: 0,
+						layoutHeight: 0,
+						layoutWidth: 0,
+					};
+				}
+				v.x = event.contentOffset.x;
+				v.y = event.contentOffset.y;
+				return v;
+			});
+
+			if (parentContext?.scrollConfig) {
+				parentContext.scrollConfig.modify((v: Any) => {
+					"worklet";
+					if (v === null) {
+						return {
+							x: event.contentOffset.x,
+							y: event.contentOffset.y,
+							contentHeight: 0,
+							contentWidth: 0,
+							layoutHeight: 0,
+							layoutWidth: 0,
+						};
+					}
+					v.x = event.contentOffset.x;
+					v.y = event.contentOffset.y;
+					return v;
+				});
+			}
+		},
+	});
+
+	const onContentSizeChange = useStableCallback(
+		(width: number, height: number) => {
+			props.onContentSizeChange?.(width, height);
+
+			scrollConfig.modify((v: Any) => {
+				"worklet";
+				if (v === null) {
+					return {
+						x: 0,
+						y: 0,
+						layoutHeight: 0,
+						layoutWidth: 0,
+						contentWidth: width,
+						contentHeight: height,
+					};
+				}
+				v.contentWidth = width;
+				v.contentHeight = height;
+				return v;
+			});
+			if (parentContext?.scrollConfig) {
+				parentContext.scrollConfig.modify((v: Any) => {
+					"worklet";
+					if (v === null) {
+						return {
+							x: 0,
+							y: 0,
+							layoutHeight: 0,
+							layoutWidth: 0,
+							contentWidth: width,
+							contentHeight: height,
+						};
+					}
+					v.contentWidth = width;
+					v.contentHeight = height;
+					return v;
+				});
+			}
+		},
+	);
+
+	const onLayout = useStableCallback((event: LayoutChangeEvent) => {
+		props.onLayout?.(event);
+		const { width, height } = event.nativeEvent.layout;
+
+		scrollConfig.modify((v: Any) => {
+			"worklet";
+			if (v === null) {
+				return {
+					x: 0,
+					y: 0,
+					contentHeight: 0,
+					contentWidth: 0,
+					layoutHeight: height,
+					layoutWidth: width,
+				};
+			}
+			v.layoutHeight = height;
+			v.layoutWidth = width;
+			return v;
+		});
+		if (parentContext?.scrollConfig) {
+			parentContext.scrollConfig.modify((v: Any) => {
+				"worklet";
+				if (v === null) {
+					return {
+						x: 0,
+						y: 0,
+						contentHeight: 0,
+						contentWidth: 0,
+						layoutHeight: height,
+						layoutWidth: width,
+					};
+				}
+				v.layoutHeight = height;
+				v.layoutWidth = width;
+				return v;
+			});
+		}
+	});
+
+	return {
+		scrollHandler,
+		onContentSizeChange,
+		onLayout,
+	};
+};

package/src/index.ts

@@ -1,5 +1,6 @@
 import { FlatList, Pressable, ScrollView, View } from "react-native";
 import { createTransitionAwareComponent } from "./components/create-transition-aware-component";
+import MaskedView from "./components/integrations/masked-view";
 import { presets, specs } from "./configs";
 
 export default {
@@ -11,6 +12,7 @@ export default {
 	FlatList: createTransitionAwareComponent(FlatList, {
 		isScrollable: true,
 	}),
+	MaskedView: MaskedView,
 	presets,
 	specs,
 	createTransitionAwareComponent,

package/src/integrations/native-stack/views/NativeStackView.native.tsx

@@ -36,6 +36,7 @@ import { ScreenLifecycleController } from "../../../components/controllers/scree
 import { RootTransitionAware } from "../../../components/root-transition-aware";
 import { ScreenGestureProvider } from "../../../providers/gestures";
 import { KeysProvider } from "../../../providers/keys";
+import { TransitionStylesProvider } from "../../../providers/transition-styles";
 import type {
 	NativeStackDescriptor,
 	NativeStackDescriptorMap,
@@ -473,11 +474,13 @@ const SceneView = ({
 										current={descriptor}
 										next={nextDescriptor}
 									>
-										<ScreenLifecycleController>
-											<ScreenGestureProvider>
-												<RootTransitionAware>{render()}</RootTransitionAware>
-											</ScreenGestureProvider>
-										</ScreenLifecycleController>
+										<ScreenGestureProvider>
+											<ScreenLifecycleController>
+												<TransitionStylesProvider>
+													<RootTransitionAware>{render()}</RootTransitionAware>
+												</TransitionStylesProvider>
+											</ScreenLifecycleController>
+										</ScreenGestureProvider>
 									</KeysProvider>
 								</HeaderBackContext.Provider>
 							</HeaderShownContext.Provider>

package/src/providers/gestures.tsx

@@ -1,15 +1,12 @@
 import { createContext, useContext, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import type { GestureType } from "react-native-gesture-handler";
-import {
-	GestureDetector,
-	GestureHandlerRootView,
-} from "react-native-gesture-handler";
+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";
 
-export type ScrollProgress = {
+export type ScrollConfig = {
 	x: number;
 	y: number;
 	contentHeight: number;
@@ -21,14 +18,15 @@ export type ScrollProgress = {
 export interface GestureContextType {
 	panGesture: GestureType;
 	nativeGesture: GestureType;
-	scrollProgress: SharedValue<ScrollProgress>;
+	scrollConfig: SharedValue<ScrollConfig | null>;
+	parentContext: GestureContextType | null;
 }
 
 type ScreenGestureProviderProps = {
 	children: React.ReactNode;
 };
 
-const DEFAULT_SCROLL_PROGRESS: ScrollProgress = {
+export const DEFAULT_SCROLL_CONFIG: ScrollConfig = {
 	x: 0,
 	y: 0,
 	contentHeight: 0,
@@ -42,31 +40,30 @@ const GestureContext = createContext<GestureContextType | undefined>(undefined);
 export const ScreenGestureProvider = ({
 	children,
 }: ScreenGestureProviderProps) => {
-	const scrollProgress = useSharedValue<ScrollProgress>(
-		DEFAULT_SCROLL_PROGRESS,
-	);
+	const parentContext = useContext(GestureContext);
+
+	const scrollConfig = useSharedValue<ScrollConfig | null>(null);
 
 	const { panGesture, nativeGesture } = useBuildGestures({
-		scrollProgress,
+		scrollConfig,
 	});
 
-	const value = useMemo(
+	const value: GestureContextType = useMemo(
 		() => ({
 			panGesture,
-			scrollProgress,
+			scrollConfig,
 			nativeGesture,
+			parentContext: parentContext || null,
 		}),
-		[panGesture, scrollProgress, nativeGesture],
-	) satisfies GestureContextType;
+		[panGesture, scrollConfig, nativeGesture, parentContext],
+	);
 
 	return (
-		<GestureHandlerRootView>
-			<GestureContext.Provider value={value}>
-				<GestureDetector gesture={panGesture}>
-					<View style={styles.container}>{children}</View>
-				</GestureDetector>
-			</GestureContext.Provider>
-		</GestureHandlerRootView>
+		<GestureContext.Provider value={value}>
+			<GestureDetector gesture={panGesture}>
+				<View style={styles.container}>{children}</View>
+			</GestureDetector>
+		</GestureContext.Provider>
 	);
 };
 

package/src/providers/transition-styles.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext, useMemo } from "react";
+import { isWorkletFunction, useDerivedValue } from "react-native-reanimated";
+import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
+import type { TransitionInterpolatedStyle } from "../types/animation";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+const EMPTY_MAP = Object.freeze({});
+
+const TransitionStylesContext = createContext<ReturnType<
+	typeof useDerivedValue<TransitionInterpolatedStyle>
+> | null>(null);
+
+export function TransitionStylesProvider({ children }: Props) {
+	const { screenInterpolatorProps, screenStyleInterpolator } =
+		_useScreenAnimation();
+
+	const isFunctionWorklet = isWorkletFunction(screenStyleInterpolator);
+
+	const stylesMap = useDerivedValue<TransitionInterpolatedStyle>(() => {
+		"worklet";
+
+		if (screenStyleInterpolator && !isFunctionWorklet && __DEV__) {
+			console.warn("screenStyleInterpolator is not a worklet function");
+			return EMPTY_MAP;
+		}
+
+		return screenStyleInterpolator
+			? screenStyleInterpolator(screenInterpolatorProps.value)
+			: EMPTY_MAP;
+	});
+
+	const value = useMemo(() => stylesMap, [stylesMap]);
+
+	return (
+		<TransitionStylesContext.Provider value={value}>
+			{children}
+		</TransitionStylesContext.Provider>
+	);
+}
+
+export function useTransitionStyles() {
+	const ctx = useContext(TransitionStylesContext);
+	if (!ctx) {
+		throw new Error(
+			"useTransitionStyles must be used within a TransitionStylesProvider",
+		);
+	}
+	return ctx;
+}

package/src/stores/bounds.ts

@@ -3,6 +3,7 @@ import {
 	makeMutable,
 	type StyleProps,
 } from "react-native-reanimated";
+import type { ScreenTransitionState } from "../types/animation";
 import type { ScreenKey } from "../types/navigator";
 import type { Any } from "../types/utils";
 
@@ -13,6 +14,13 @@ type BoundsDict = Record<
 
 const registry = makeMutable<BoundsDict>({});
 const activeBoundId = makeMutable<string | null>(null);
+const lastActiveByRoute = makeMutable<Record<string, string>>({});
+const pairHints = makeMutable<Record<string, string>>({});
+
+function pairKey(fromKey?: string, toKey?: string) {
+	"worklet";
+	return fromKey && toKey ? `${fromKey}|${toKey}` : "";
+}
 
 function setBounds(
 	screenId: string,
@@ -47,6 +55,38 @@ function getActiveBoundId() {
 	return activeBoundId.value;
 }
 
+function setRouteActive(routeKey: string, boundId: string) {
+	"worklet";
+	lastActiveByRoute.modify((state: Any) => {
+		"worklet";
+		state[routeKey] = boundId;
+		return state;
+	});
+}
+
+function getRouteActive(routeKey: string) {
+	"worklet";
+	return lastActiveByRoute.value[routeKey] ?? null;
+}
+
+function setTransitionHint(fromKey: string, toKey: string, boundId: string) {
+	"worklet";
+	const key = pairKey(fromKey, toKey);
+	if (!key) return;
+	pairHints.modify((state: Any) => {
+		"worklet";
+		state[key] = boundId;
+		return state;
+	});
+}
+
+function getTransitionHint(fromKey: string, toKey: string) {
+	"worklet";
+	const key = pairKey(fromKey, toKey);
+	if (!key) return null;
+	return pairHints.value[key] ?? null;
+}
+
 function clear(routeKey: ScreenKey) {
 	"worklet";
 	registry.modify((state: Any) => {
@@ -61,11 +101,127 @@ function clearActive() {
 	activeBoundId.value = null;
 }
 
+// Helpers for readability
+function hasBound(s: ScreenTransitionState | undefined, id?: string | null) {
+	"worklet";
+	return !!id && !!s && !!s.bounds && !!s.bounds[id];
+}
+
+function keysOf(s: ScreenTransitionState | undefined) {
+	"worklet";
+	return Object.keys(s?.bounds || {});
+}
+
+function getRoutePair(
+	current: ScreenTransitionState,
+	next: ScreenTransitionState | undefined,
+	previous: ScreenTransitionState | undefined,
+) {
+	"worklet";
+	const isClosing = !!next;
+	const fromKey = isClosing ? current.route.key : previous?.route.key;
+	const toKey = isClosing ? next?.route.key : current.route.key;
+	const other = next ?? previous;
+	return { fromKey, toKey, other } as const;
+}
+
+function resolveFromHints(
+	fromKey: string | undefined,
+	toKey: string | undefined,
+	other: ScreenTransitionState | undefined,
+) {
+	"worklet";
+	if (fromKey && toKey) {
+		const hinted = getTransitionHint(fromKey, toKey);
+		if (hasBound(other, hinted)) return hinted as string;
+	}
+	return "";
+}
+
+function resolveFromRequested(
+	reqId: string | null,
+	current: ScreenTransitionState,
+	other: ScreenTransitionState | undefined,
+) {
+	"worklet";
+	const otherHasAny = !!other && keysOf(other).length > 0;
+	if (hasBound(other, reqId)) return reqId as string;
+	if (!otherHasAny && hasBound(current, reqId)) return reqId as string;
+	return "";
+}
+
+function resolveFromSets(
+	current: ScreenTransitionState,
+	other: ScreenTransitionState | undefined,
+	fromKey: string | undefined,
+) {
+	"worklet";
+	if (!other) return "";
+	const a = keysOf(current);
+	const b = keysOf(other);
+	const inter = a.filter((k) => b.includes(k));
+	const otherHasAny = b.length > 0;
+	const routeActive = fromKey ? getRouteActive(fromKey) : null;
+
+	if (inter.length > 0) {
+		if (routeActive && inter.includes(routeActive)) return routeActive;
+		return inter[0];
+	}
+
+	if (routeActive && hasBound(other, routeActive)) return routeActive;
+	if (b.length === 1) return b[0];
+
+	if (!otherHasAny) {
+		if (routeActive && hasBound(current, routeActive)) return routeActive;
+		if (a.length === 1) return a[0];
+	}
+
+	return "";
+}
+
+function getActiveBound(
+	current: ScreenTransitionState,
+	next: ScreenTransitionState | undefined,
+	previous: ScreenTransitionState | undefined,
+) {
+	"worklet";
+	const requestedId = activeBoundId.value;
+	const { fromKey, toKey, other } = getRoutePair(current, next, previous);
+
+	// check last remembered hint
+	const byHint = resolveFromHints(fromKey, toKey, other);
+	if (byHint) {
+		if (fromKey && toKey) setTransitionHint(fromKey, toKey, byHint);
+		return byHint;
+	}
+
+	// check the active id
+	const byRequested = resolveFromRequested(requestedId, current, other);
+	if (byRequested) {
+		if (fromKey && toKey) setTransitionHint(fromKey, toKey, byRequested);
+		return byRequested;
+	}
+
+	// check the sets (intersection/MRU/fallbacks)
+	const bySets = resolveFromSets(current, other, fromKey);
+	if (bySets) {
+		if (fromKey && toKey) setTransitionHint(fromKey, toKey, bySets);
+		return bySets;
+	}
+
+	return "";
+}
+
 export const Bounds = {
 	setBounds,
 	getBounds,
 	setActiveBoundId,
 	getActiveBoundId,
+	setRouteActive,
+	getRouteActive,
+	setTransitionHint,
+	getTransitionHint,
 	clear,
 	clearActive,
+	getActiveBound,
 };

package/src/stores/utils/reset-stores-for-screen.ts

@@ -6,9 +6,14 @@ import { Gestures } from "../gestures";
 /**
  * Reset all stores for a given screen
  */
-export const resetStoresForScreen = (current: NativeStackDescriptor) => {
+export const resetStoresForScreen = (
+	current: NativeStackDescriptor,
+	options: { clearActive?: boolean } = {},
+) => {
 	Animations.clear(current.route.key);
 	Gestures.clear(current.route.key);
 	Bounds.clear(current.route.key);
-	Bounds.clearActive();
+	if (options.clearActive) {
+		Bounds.clearActive();
+	}
 };

package/src/types/bounds.ts

@@ -1,4 +1,8 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import type {
+	BoundsBuilderOptions,
+	BoundsReturnType,
+} from "../utils/bounds/_types/builder";
 import type { ScreenPhase } from "./core";
 
 /**
@@ -77,6 +81,9 @@ export type BoundEntry = {
 	styles: StyleProps;
 };
 
-export type BoundsAccessor = ((id?: string) => BoundsBuilder) & {
+export type BoundsAccessor = {
+	(id: string): BoundsBuilder;
+	(): BoundsBuilder;
+	<T extends BoundsBuilderOptions>(options: T): BoundsReturnType<T>;
 	get: (id?: string, phase?: ScreenPhase) => BoundEntry;
 };

package/src/types/gesture.ts

@@ -5,6 +5,25 @@ export type GestureDirection =
 	| "vertical-inverted"
 	| "bidirectional";
 
+export type ActivationArea = "edge" | "screen";
+
+export type SideActivation = {
+	left?: ActivationArea;
+	right?: ActivationArea;
+	top?: ActivationArea;
+	bottom?: ActivationArea;
+};
+
+export enum GestureOffsetState {
+	PENDING,
+	PASSED,
+	FAILED,
+}
+
+export type AxisActivation = ActivationArea | SideActivation;
+
+export type GestureActivationArea = ActivationArea | SideActivation;
+
 export type GestureValues = {
 	/**
 	 * A `SharedValue` indicating if the user's finger is on the screen (0 or 1).

package/src/types/navigator.ts

@@ -23,7 +23,7 @@ import type {
 	SearchBarProps,
 } from "react-native-screens";
 import type { ScreenStyleInterpolator, TransitionSpec } from "./animation";
-import type { GestureDirection } from "./gesture";
+import type { GestureActivationArea, GestureDirection } from "./gesture";
 
 export type NativeStackNavigationEventMap = {
 	/**
@@ -168,6 +168,10 @@ export type ScreenTransitionConfig = {
 	 * Whether the gesture drives the progress.
 	 */
 	gestureDrivesProgress?: boolean;
+	/**
+	 * The area of the screen where the gesture is activated.
+	 */
+	gestureActivationArea?: GestureActivationArea;
 	/**
 	 * Whether to enable transitions. It sets the presentation to containedTransparentModal, animation none, and headerShown to false.
 	 */

package/src/utils/animation/derivations.ts

@@ -0,0 +1,38 @@
+import type { ScaledSize } from "react-native";
+import { Bounds } from "../../stores/bounds";
+import type { ScreenTransitionState } from "../../types/animation";
+import { createBounds } from "../bounds";
+
+interface DerivationsParams {
+	current: ScreenTransitionState;
+	next?: ScreenTransitionState;
+	previous?: ScreenTransitionState;
+	dimensions: ScaledSize;
+}
+
+/**
+ * Additional values to help make defining animations easier.
+ */
+export const derivations = ({
+	current,
+	next,
+	previous,
+	dimensions,
+}: DerivationsParams) => {
+	"worklet";
+	const progress = current.progress + (next?.progress ?? 0);
+	const focused = !next;
+
+	const activeBoundId = Bounds.getActiveBound(current, next, previous);
+
+	const bounds = createBounds({
+		activeBoundId,
+		current,
+		previous,
+		next,
+		progress,
+		dimensions,
+	});
+
+	return { progress, focused, activeBoundId, bounds };
+};

package/src/utils/animation/run-transition.ts

@@ -8,6 +8,7 @@ interface RunTransitionProps {
 	spec?: TransitionSpec;
 	onFinish?: (finished: boolean) => void;
 	animations: AnimationMap;
+	velocity?: number;
 }
 
 export const runTransition = ({
@@ -15,6 +16,7 @@ export const runTransition = ({
 	spec,
 	onFinish,
 	animations,
+	velocity,
 }: RunTransitionProps) => {
 	"worklet";
 	const value = target === "open" ? 1 : 0;
@@ -37,7 +39,8 @@ export const runTransition = ({
 	}
 
 	animating.value = 1;
-	progress.value = animate(value, config, (finished) => {
+
+	progress.value = animate(value, { ...config, velocity }, (finished) => {
 		"worklet";
 		if (finished) {
 			animating.value = 0;