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

package/src/shared/providers/screen/gestures/shared/physics.ts

@@ -18,6 +18,8 @@ type GestureAxisCandidate = {
 	velocityContribution: number;
 };
 
+const FULL_GESTURE_VELOCITY_PROGRESS_PER_SECOND = 4;
+
 /**
  * Converts a pan velocity from pixels/second into progress/second.
  */
@@ -29,6 +31,29 @@ export const toProgressVelocity = (
 	return velocityPixelsPerSecond / Math.max(1, screenSize);
 };
 
+/**
+ * Converts normalized pan velocity into a 0-1 scalar for interpolators.
+ *
+ * `1` means the velocity reached or exceeded the library's full-velocity
+ * threshold, not a physical maximum for the device.
+ */
+export const resolveGestureVelocity = (
+	velocityNormX: number,
+	velocityNormY: number,
+) => {
+	"worklet";
+
+	const dominantVelocity = Math.max(
+		Math.abs(velocityNormX),
+		Math.abs(velocityNormY),
+	);
+
+	return Math.min(
+		1,
+		dominantVelocity / FULL_GESTURE_VELOCITY_PROGRESS_PER_SECOND,
+	);
+};
+
 /**
  * Converts pan release velocity into a spring handoff in progress units/second.
  */

package/src/shared/providers/screen/gestures/shared/policy.ts

@@ -62,9 +62,7 @@ const resolveGestureDirection = (options: GesturePolicyOptions) => {
 	return options.gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
 };
 
-export function resolveGestureProgressModePolicy(
-	options: GesturePolicyOptions,
-) {
+function resolveGestureProgressModePolicy(options: GesturePolicyOptions) {
 	"worklet";
 	return resolveGestureProgressMode({
 		gestureProgressMode: options.gestureProgressMode,
@@ -131,7 +129,7 @@ const resolvePinchDirections = (
 	};
 };
 
-export const resolveGestureCanDismiss = ({
+const resolveGestureCanDismiss = ({
 	isFirstKey,
 	gestureEnabled,
 }: {
@@ -215,7 +213,7 @@ export const resolvePinchPolicy = (
 	};
 };
 
-export const resolveGestureParticipation = ({
+const resolveGestureParticipation = ({
 	options,
 	isFirstKey,
 	gestureContext,

package/src/shared/providers/screen/gestures/types.ts

@@ -160,6 +160,7 @@ export interface PanTrackState {
 	y: number;
 	normX: number;
 	normY: number;
+	velocity: number;
 }
 
 export interface PinchTrackState {
@@ -185,6 +186,7 @@ export interface PanReleasePlan {
 	resetVelocityY: number;
 	resetVelocityNormX: number;
 	resetVelocityNormY: number;
+	releaseVelocity: number;
 	resetNormalizedValues: boolean;
 	resetNormalizedValuesImmediately: boolean;
 	preserveRawValues: boolean;

package/src/shared/providers/screen/options/helpers.ts

@@ -206,6 +206,7 @@ const areScreenOptionsEqual = (
 ) => {
 	"worklet";
 	return (
+		left.navigationMaskEnabled === right.navigationMaskEnabled &&
 		left.gestureEnabled === right.gestureEnabled &&
 		left.experimental_allowDisabledGestureTracking ===
 			right.experimental_allowDisabledGestureTracking &&
@@ -238,6 +239,10 @@ export const resolveBaseScreenOptions = (
 	);
 
 	return {
+		navigationMaskEnabled: resolveBooleanOption(
+			options.navigationMaskEnabled,
+			undefined,
+		),
 		gestureEnabled: resolveBooleanOption(options.gestureEnabled, undefined),
 		experimental_allowDisabledGestureTracking: resolveBooleanOption(
 			options.experimental_allowDisabledGestureTracking,
@@ -322,6 +327,10 @@ export const syncScreenOptionsOverrides = (
 	);
 
 	const next: ScreenOptionsState = {
+		navigationMaskEnabled: resolveBooleanOption(
+			options?.navigationMaskEnabled,
+			base.navigationMaskEnabled,
+		),
 		gestureEnabled: resolveBooleanOption(
 			options?.gestureEnabled,
 			base.gestureEnabled,

package/src/shared/providers/screen/options/types.ts

@@ -9,6 +9,7 @@ export type OptionalScreenOption<K extends keyof ScreenTransitionOptions> =
 	ScreenTransitionOptions[K];
 
 export type ScreenOptionsSnapshot = {
+	navigationMaskEnabled: OptionalScreenOption<"navigationMaskEnabled">;
 	gestureEnabled: OptionalScreenOption<"gestureEnabled">;
 	experimental_allowDisabledGestureTracking: RequiredScreenOption<"experimental_allowDisabledGestureTracking">;
 	gestureDirection: RequiredScreenOption<"gestureDirection">;

package/src/shared/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -8,7 +8,6 @@ import type {
 import { logger } from "../../../../utils/logger";
 import { useScreenAnimationContext } from "../../animation";
 import { useBuildBoundsAccessor } from "../../animation/helpers/accessors/use-build-bounds-accessor";
-import { useBuildTransitionAccessor } from "../../animation/helpers/accessors/use-build-transition-accessor";
 import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selected-interpolator-options";
 import { useDescriptorDerivations } from "../../descriptors";
 import {
@@ -55,7 +54,6 @@ export const useInterpolatedStylesMap = () => {
 		currentInterpolator,
 	} = useScreenAnimationContext();
 	const boundsAccessor = useBuildBoundsAccessor();
-	const transition = useBuildTransitionAccessor();
 	const pendingLifecycleStartBlockCount = SystemStore.getValue(
 		currentScreenKey,
 		"pendingLifecycleStartBlockCount",
@@ -126,7 +124,6 @@ export const useInterpolatedStylesMap = () => {
 				progress: effectiveProgress,
 				next: effectiveNext,
 				bounds: boundsAccessor,
-				transition,
 			});
 
 			const rawStyleMap: TransitionInterpolatedStyle | undefined =

package/src/shared/providers/stack/direct.provider.tsx

@@ -142,5 +142,5 @@ function withDirectStack<TProps extends DirectStackProps>(
 	};
 }
 
-export { withDirectStack };
 export type { DirectStackContextValue, DirectStackProps, DirectStackScene };
+export { withDirectStack };

package/src/shared/providers/stack/managed.provider.tsx

@@ -138,9 +138,9 @@ function withManagedStack<
 	};
 }
 
-export { useManagedStackContext, withManagedStack };
 export type {
 	ManagedStackContextValue,
 	ManagedStackProps,
 	ManagedStackRenderProps,
 };
+export { useManagedStackContext, withManagedStack };

package/src/shared/stores/bounds/helpers/link-pairs.helpers.ts

@@ -0,0 +1,161 @@
+import type {
+	GroupKey,
+	LinkGroupState,
+	LinkKey,
+	LinkPairState,
+	LinkPairsState,
+	ScreenIdentifier,
+	ScreenPairKey,
+	TagLink,
+} from "../types";
+
+const PAIR_SEPARATOR = "<>";
+
+export const createScreenPairKey = (
+	sourceScreenKey: ScreenIdentifier["screenKey"],
+	destinationScreenKey: ScreenIdentifier["screenKey"] | "",
+): ScreenPairKey => {
+	"worklet";
+	return `${sourceScreenKey}${PAIR_SEPARATOR}${destinationScreenKey}`;
+};
+
+export const createPendingPairKey = (
+	sourceScreenKey: ScreenIdentifier["screenKey"],
+): ScreenPairKey => {
+	"worklet";
+	return createScreenPairKey(sourceScreenKey, "");
+};
+
+export const getSourceScreenKeyFromPairKey = (
+	pairKey: ScreenPairKey,
+): ScreenIdentifier["screenKey"] => {
+	"worklet";
+	const separatorIndex = pairKey.indexOf(PAIR_SEPARATOR);
+	if (separatorIndex === -1) return pairKey;
+	return pairKey.slice(0, separatorIndex);
+};
+
+export const getDestinationScreenKeyFromPairKey = (
+	pairKey: ScreenPairKey,
+): ScreenIdentifier["screenKey"] | "" => {
+	"worklet";
+	const separatorIndex = pairKey.indexOf(PAIR_SEPARATOR);
+	if (separatorIndex === -1) return "";
+	return pairKey.slice(separatorIndex + PAIR_SEPARATOR.length);
+};
+
+export const isScreenPairKeyForScreen = (
+	pairKey: ScreenPairKey,
+	screenKey: ScreenIdentifier["screenKey"],
+): boolean => {
+	"worklet";
+	return (
+		pairKey === createPendingPairKey(screenKey) ||
+		pairKey.startsWith(`${screenKey}${PAIR_SEPARATOR}`) ||
+		pairKey.endsWith(`${PAIR_SEPARATOR}${screenKey}`)
+	);
+};
+
+export const getLinkKeyFromTag = (tag: string): LinkKey => {
+	"worklet";
+	const separatorIndex = tag.indexOf(":");
+	if (separatorIndex === -1) return tag;
+	return tag.slice(separatorIndex + 1);
+};
+
+export const getGroupKeyFromTag = (tag: string): GroupKey | null => {
+	"worklet";
+	const separatorIndex = tag.indexOf(":");
+	if (separatorIndex === -1) return null;
+	return tag.slice(0, separatorIndex);
+};
+
+export const createGroupTag = (group: GroupKey, linkKey: LinkKey): string => {
+	"worklet";
+	return `${group}:${linkKey}`;
+};
+
+export const ensurePairState = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): LinkPairState => {
+	"worklet";
+	if (!state[pairKey]) {
+		state[pairKey] = {
+			links: {},
+			groups: {},
+		};
+	}
+	state[pairKey].groups ??= {};
+	return state[pairKey];
+};
+
+export const ensurePairLinks = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<LinkKey, TagLink> => {
+	"worklet";
+	return ensurePairState(state, pairKey).links;
+};
+
+export const ensurePairGroups = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<GroupKey, LinkGroupState> => {
+	"worklet";
+	return ensurePairState(state, pairKey).groups;
+};
+
+export const removePairLink = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+) => {
+	"worklet";
+	const pair = state[pairKey];
+	if (!pair) return;
+
+	delete pair.links[linkKey];
+
+	for (const key in pair.links) {
+		if (pair.links[key]) return;
+	}
+
+	delete state[pairKey];
+};
+
+export const getLink = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink | null => {
+	"worklet";
+	return state[pairKey]?.links[linkKey] ?? null;
+};
+
+export const getSource = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink["source"] | null => {
+	"worklet";
+	return getLink(state, pairKey, linkKey)?.source ?? null;
+};
+
+export const getDestination = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	linkKey: LinkKey,
+): TagLink["destination"] | null => {
+	"worklet";
+	return getLink(state, pairKey, linkKey)?.destination ?? null;
+};
+
+export const getActiveGroupId = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+	group: GroupKey,
+): LinkKey | null => {
+	"worklet";
+	return state[pairKey]?.groups?.[group]?.activeId ?? null;
+};

package/src/shared/stores/bounds/index.ts

@@ -1,16 +1,11 @@
 import { clear } from "./internals/clear";
 import { getEntry, removeEntry, setEntry } from "./internals/entries";
 import {
-	getGroupActiveId,
-	getGroupInitialId,
-	setGroupActiveId,
-	setGroupInitialId,
-} from "./internals/groups";
-import {
-	getMatchedLink,
-	getPendingLink,
-	hasDestinationLink,
-	hasSourceLink,
+	getActiveGroupId,
+	getDestination,
+	getLink,
+	getSource,
+	setActiveGroupId,
 	setDestination,
 	setSource,
 } from "./internals/links";
@@ -37,17 +32,12 @@ export const BoundStore = {
 	link: {
 		setSource,
 		setDestination,
-		getMatched: getMatchedLink,
+		setActiveGroupId,
+		getLink,
+		getSource,
+		getDestination,
+		getActiveGroupId,
 		getPair: resolveTransitionPair,
-		getPending: getPendingLink,
-		hasSource: hasSourceLink,
-		hasDestination: hasDestinationLink,
-	},
-	group: {
-		setActiveId: setGroupActiveId,
-		setInitialId: setGroupInitialId,
-		getActiveId: getGroupActiveId,
-		getInitialId: getGroupInitialId,
 	},
 	cleanup: {
 		byScreen: clear,

package/src/shared/stores/bounds/internals/clear.ts

@@ -1,59 +1,35 @@
 import { hasAnyKeys } from "../helpers/keys";
-import { matchesScreenKey } from "../helpers/matching";
-import type { ScreenEntry, ScreenKey, TagLink } from "../types";
-import { type RegistryState, registry } from "./state";
+import { isScreenPairKeyForScreen } from "../helpers/link-pairs.helpers";
+import type { LinkPairsState, ScreenKey } from "../types";
+import { type BoundaryEntriesState, boundaryRegistry, pairs } from "./state";
 
-type LinkPredicate = (link: TagLink) => boolean;
-
-type ScreenPredicate = (
-	screenKey: ScreenKey,
-	screenEntry: ScreenEntry,
-) => boolean;
-
-const clearRegistry = (
-	shouldClearScreen: ScreenPredicate,
-	shouldClearLink: LinkPredicate,
-) => {
+function clear(screenKey: ScreenKey) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+
+	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
 		"worklet";
 		for (const tag in state) {
 			const tagState = state[tag];
+			delete tagState.screens[screenKey];
 
-			for (const entryScreenKey in tagState.screens) {
-				const screenEntry = tagState.screens[entryScreenKey];
-				if (shouldClearScreen(entryScreenKey, screenEntry)) {
-					delete tagState.screens[entryScreenKey];
-				}
+			if (!hasAnyKeys(tagState.screens)) {
+				delete state[tag];
 			}
+		}
 
-			for (let i = tagState.linkStack.length - 1; i >= 0; i--) {
-				const link = tagState.linkStack[i];
-				if (shouldClearLink(link)) {
-					tagState.linkStack.splice(i, 1);
-				}
-			}
+		return state;
+	});
 
-			if (!hasAnyKeys(tagState.screens) && tagState.linkStack.length === 0) {
-				delete state[tag];
+	pairs.modify(<T extends LinkPairsState>(state: T): T => {
+		"worklet";
+		for (const pairKey in state) {
+			if (isScreenPairKeyForScreen(pairKey, screenKey)) {
+				delete state[pairKey];
 			}
 		}
 
 		return state;
 	});
-};
-
-function clear(screenKey: ScreenKey) {
-	"worklet";
-	clearRegistry(
-		(entryScreenKey) => entryScreenKey === screenKey,
-		(link) => {
-			return (
-				matchesScreenKey(link.source, screenKey) ||
-				matchesScreenKey(link.destination, screenKey)
-			);
-		},
-	);
 }
 
 export { clear };

package/src/shared/stores/bounds/internals/entries.ts

@@ -1,23 +1,64 @@
-import {
-	applyEntryPatch,
-	ensureScreenEntry,
-	findMatchingScreenEntry,
-} from "../helpers/entries.helpers";
-import { ensureTagState, pruneTagState } from "../helpers/tag-state.helpers";
+import { hasAnyKeys } from "../helpers/keys";
 import type { EntryPatch, ScreenEntry, ScreenKey, TagID } from "../types";
-import { type RegistryState, registry } from "./state";
+import { type BoundaryEntriesState, boundaryRegistry } from "./state";
+
+const ensureBoundaryState = (state: BoundaryEntriesState, tag: TagID) => {
+	"worklet";
+	if (!state[tag]) {
+		state[tag] = {
+			screens: {},
+		};
+	}
+	return state[tag];
+};
+
+const ensureScreenEntry = (
+	state: BoundaryEntriesState,
+	tag: TagID,
+	screenKey: ScreenKey,
+): ScreenEntry => {
+	"worklet";
+	const tagState = ensureBoundaryState(state, tag);
+	if (!tagState.screens[screenKey]) {
+		tagState.screens[screenKey] = {
+			bounds: null,
+			styles: {},
+		};
+	}
+	return tagState.screens[screenKey];
+};
+
+const applyEntryPatch = (entry: ScreenEntry, patch: EntryPatch) => {
+	"worklet";
+	if (patch.bounds !== undefined) {
+		entry.bounds = patch.bounds;
+	}
+
+	if (patch.styles !== undefined) {
+		entry.styles = patch.styles ?? {};
+	}
+
+	if (patch.boundaryConfig === undefined) {
+		return;
+	}
+
+	if (patch.boundaryConfig === null) {
+		delete entry.boundaryConfig;
+	} else {
+		entry.boundaryConfig = patch.boundaryConfig;
+	}
+};
 
 function getEntry(tag: TagID, key: ScreenKey): ScreenEntry | null {
 	"worklet";
-	return findMatchingScreenEntry(registry.get()[tag], key);
+	return boundaryRegistry.get()[tag]?.screens[key] ?? null;
 }
 
 function setEntry(tag: TagID, screenKey: ScreenKey, patch: EntryPatch) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
 		"worklet";
-		const tagState = ensureTagState(state, tag);
-		const entry = ensureScreenEntry(tagState, screenKey);
+		const entry = ensureScreenEntry(state, tag, screenKey);
 		applyEntryPatch(entry, patch);
 		return state;
 	});
@@ -25,7 +66,7 @@ function setEntry(tag: TagID, screenKey: ScreenKey, patch: EntryPatch) {
 
 function removeEntry(tag: TagID, screenKey: ScreenKey) {
 	"worklet";
-	registry.modify(<T extends RegistryState>(state: T): T => {
+	boundaryRegistry.modify(<T extends BoundaryEntriesState>(state: T): T => {
 		"worklet";
 		const tagState = state[tag];
 		if (!tagState?.screens[screenKey]) {
@@ -33,7 +74,9 @@ function removeEntry(tag: TagID, screenKey: ScreenKey) {
 		}
 
 		delete tagState.screens[screenKey];
-		pruneTagState(state, tag);
+		if (!hasAnyKeys(tagState.screens)) {
+			delete state[tag];
+		}
 
 		return state;
 	});