react-native-screen-transitions 3.0.0-beta.4 → 3.0.0-beta.5

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,11 +18,14 @@ import {
 	DEFAULT_GESTURE_ENABLED,
 	GESTURE_VELOCITY_IMPACT,
 } from "../../constants";
-import type { ScrollConfig } from "../../providers/gestures";
+import type {
+	GestureContextType,
+	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 { GestureStore, type GestureStoreMap } from "../../stores/gesture-store";
+
 import { type GestureDirection, GestureOffsetState } from "../../types/gesture";
 import { startScreenTransition } from "../../utils/animation/start-screen-transition";
 import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
@@ -33,18 +33,20 @@ 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/use-derived-value-state.ts

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import {
+	executeOnUIRuntimeSync,
+	runOnJS,
+	type SharedValue,
+	useAnimatedReaction,
+	useDerivedValue,
+} from "react-native-reanimated";
+
+/**
+ * Derives React state from a Reanimated worklet.
+ *
+ * @param processor - The worklet function that calculates the value
+ * @param dependencies - Array of dependencies for the worklet
+ * @returns The derived value as React State
+ */
+export function useDerivedValueState<T>(
+	processor: () => T,
+	dependencies: any[] = [],
+): T {
+	const derivedValue = useDerivedValue(processor, dependencies);
+
+	const [state, setState] = useState<T>(() => {
+		const readOnUI = executeOnUIRuntimeSync((sv: SharedValue<T>) => {
+			"worklet";
+			return sv.value;
+		});
+		return readOnUI(derivedValue);
+	});
+
+	useAnimatedReaction(
+		() => derivedValue.value,
+		(curr, prev) => {
+			if (curr !== prev) {
+				runOnJS(setState)(curr);
+			}
+		},
+	);
+
+	return state;
+}

package/src/shared/providers/gestures.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/utils/create-provider.tsx

@@ -0,0 +1,77 @@
+/**
+ * THANK YOU @MatiPl01
+ * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/providers/utils/createProvider.tsx
+ * SUPER COOL AMAZING UTILITY
+ */
+import {
+	createContext,
+	type PropsWithChildren,
+	type ReactNode,
+	useContext,
+	useMemo,
+} from "react";
+
+export default function createProvider<
+	ProviderName extends string,
+	Guarded extends boolean = true,
+>(name: ProviderName, options?: { guarded?: Guarded }) {
+	return <ProviderProps extends PropsWithChildren<object>, ContextValue>(
+		factory: (props: ProviderProps) => {
+			value?: ContextValue;
+			enabled?: boolean;
+			children?: ReactNode;
+		},
+	) => {
+		const { guarded = true } = options ?? {};
+
+		const Context = createContext<ContextValue | null>(null);
+		Context.displayName = name;
+
+		const Provider: React.FC<ProviderProps> = (props) => {
+			const {
+				children = props.children,
+				enabled = true,
+				value,
+			} = factory(props);
+
+			if (!value) {
+				throw new Error(
+					`${name}Context value must be provided. You likely forgot to return it from the factory function.`,
+				);
+			}
+
+			const memoValue = useMemo(
+				() => (enabled ? value : null),
+				[enabled, value],
+			);
+
+			return <Context.Provider value={memoValue}>{children}</Context.Provider>;
+		};
+
+		const useEnhancedContext = (): ContextValue | null => {
+			const context = useContext(Context);
+
+			if (guarded && context === null) {
+				throw new Error(
+					`${name} context must be used within a ${name}Provider`,
+				);
+			}
+
+			return context;
+		};
+
+		return {
+			[`${name}Context`]: Context,
+			[`${name}Provider`]: Provider,
+			[`use${name}Context`]: useEnhancedContext,
+		} as {
+			[P in ProviderName as `${P}Context`]: React.Context<ContextValue>;
+		} & {
+			[P in ProviderName as `${P}Provider`]: React.FC<ProviderProps>;
+		} & {
+			[P in ProviderName as `use${P}Context`]: () => Guarded extends true
+				? ContextValue
+				: ContextValue | null;
+		};
+	};
+}

package/lib/commonjs/shared/stores/navigator-dismiss-state.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NavigatorDismissState = void 0;
-const map = new Map();
-const NavigatorDismissState = exports.NavigatorDismissState = {
-  get(id) {
-    if (!id) return false;
-    return map.get(id) === true;
-  },
-  set(id, val) {
-    map.set(id, !!val);
-  },
-  remove(id) {
-    map.delete(id);
-  },
-  clear() {
-    map.clear();
-  }
-};
-//# sourceMappingURL=navigator-dismiss-state.js.map

package/lib/commonjs/shared/stores/navigator-dismiss-state.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["map","Map","NavigatorDismissState","exports","get","id","set","val","remove","delete","clear"],"sourceRoot":"../../../../src","sources":["shared/stores/navigator-dismiss-state.ts"],"mappings":";;;;;;AAAA,MAAMA,GAAG,GAAG,IAAIC,GAAG,CAAkB,CAAC;AAE/B,MAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG;EACpCE,GAAGA,CAACC,EAAsB,EAAW;IACpC,IAAI,CAACA,EAAE,EAAE,OAAO,KAAK;IACrB,OAAOL,GAAG,CAACI,GAAG,CAACC,EAAE,CAAC,KAAK,IAAI;EAC5B,CAAC;EACDC,GAAGA,CAACD,EAAU,EAAEE,GAAY,EAAE;IAC7BP,GAAG,CAACM,GAAG,CAACD,EAAE,EAAE,CAAC,CAACE,GAAG,CAAC;EACnB,CAAC;EACDC,MAAMA,CAACH,EAAU,EAAE;IAClBL,GAAG,CAACS,MAAM,CAACJ,EAAE,CAAC;EACf,CAAC;EACDK,KAAKA,CAAA,EAAG;IACPV,GAAG,CAACU,KAAK,CAAC,CAAC;EACZ;AACD,CAAC","ignoreList":[]}

package/lib/module/shared/stores/navigator-dismiss-state.js

@@ -1,19 +0,0 @@
-"use strict";
-
-const map = new Map();
-export const NavigatorDismissState = {
-  get(id) {
-    if (!id) return false;
-    return map.get(id) === true;
-  },
-  set(id, val) {
-    map.set(id, !!val);
-  },
-  remove(id) {
-    map.delete(id);
-  },
-  clear() {
-    map.clear();
-  }
-};
-//# sourceMappingURL=navigator-dismiss-state.js.map

package/lib/module/shared/stores/navigator-dismiss-state.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["map","Map","NavigatorDismissState","get","id","set","val","remove","delete","clear"],"sourceRoot":"../../../../src","sources":["shared/stores/navigator-dismiss-state.ts"],"mappings":";;AAAA,MAAMA,GAAG,GAAG,IAAIC,GAAG,CAAkB,CAAC;AAEtC,OAAO,MAAMC,qBAAqB,GAAG;EACpCC,GAAGA,CAACC,EAAsB,EAAW;IACpC,IAAI,CAACA,EAAE,EAAE,OAAO,KAAK;IACrB,OAAOJ,GAAG,CAACG,GAAG,CAACC,EAAE,CAAC,KAAK,IAAI;EAC5B,CAAC;EACDC,GAAGA,CAACD,EAAU,EAAEE,GAAY,EAAE;IAC7BN,GAAG,CAACK,GAAG,CAACD,EAAE,EAAE,CAAC,CAACE,GAAG,CAAC;EACnB,CAAC;EACDC,MAAMA,CAACH,EAAU,EAAE;IAClBJ,GAAG,CAACQ,MAAM,CAACJ,EAAE,CAAC;EACf,CAAC;EACDK,KAAKA,CAAA,EAAG;IACPT,GAAG,CAACS,KAAK,CAAC,CAAC;EACZ;AACD,CAAC","ignoreList":[]}

package/lib/typescript/shared/stores/navigator-dismiss-state.d.ts

@@ -1,7 +0,0 @@
-export declare const NavigatorDismissState: {
-    get(id: string | undefined): boolean;
-    set(id: string, val: boolean): void;
-    remove(id: string): void;
-    clear(): void;
-};
-//# sourceMappingURL=navigator-dismiss-state.d.ts.map

package/lib/typescript/shared/stores/navigator-dismiss-state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigator-dismiss-state.d.ts","sourceRoot":"","sources":["../../../../src/shared/stores/navigator-dismiss-state.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;YACzB,MAAM,GAAG,SAAS,GAAG,OAAO;YAI5B,MAAM,OAAO,OAAO;eAGjB,MAAM;;CAMjB,CAAC"}

package/src/shared/providers/utils/create-provider.ts

@@ -1,64 +0,0 @@
-/**
- * Credits to
- * https://github.com/heroui-inc/heroui-native/blob/beta/src/helpers/utils/create-context.ts
- */
-import * as React from "react";
-
-export interface CreateContextOptions {
-	/**
-	 * If `true`, React will throw if context is `null` or `undefined`
-	 * In some cases, you might want to support nested context, so you can set it to `false`
-	 */
-	strict?: boolean;
-	/**
-	 * Error message to throw if the context is `undefined`
-	 */
-	errorMessage?: string;
-	/**
-	 * The display name of the context
-	 */
-	name?: string;
-}
-
-export type CreateContextReturn<T> = [
-	React.Provider<T>,
-	() => T,
-	React.Context<T>,
-];
-
-/**
- * Creates a named context, provider, and hook.
- *
- * @param options create context options
- */
-export function createContext<ContextType>(options: CreateContextOptions = {}) {
-	const {
-		strict = true,
-		errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
-		name,
-	} = options;
-
-	const Context = React.createContext<ContextType | undefined>(undefined);
-
-	Context.displayName = name;
-
-	function useContext() {
-		const context = React.useContext(Context);
-
-		if (!context && strict) {
-			const error = new Error(errorMessage);
-
-			error.name = "ContextError";
-			Error.captureStackTrace?.(error, useContext);
-			throw error;
-		}
-
-		return context;
-	}
-
-	return [
-		Context.Provider,
-		useContext,
-		Context,
-	] as CreateContextReturn<ContextType>;
-}

package/src/shared/stores/navigator-dismiss-state.ts

@@ -1,17 +0,0 @@
-const map = new Map<string, boolean>();
-
-export const NavigatorDismissState = {
-	get(id: string | undefined): boolean {
-		if (!id) return false;
-		return map.get(id) === true;
-	},
-	set(id: string, val: boolean) {
-		map.set(id, !!val);
-	},
-	remove(id: string) {
-		map.delete(id);
-	},
-	clear() {
-		map.clear();
-	},
-};