react-native-screen-transitions 3.5.1 → 3.6.0-alpha.0

package/src/shared/providers/screen/styles/constants.ts

@@ -3,20 +3,66 @@ import {
 	NAVIGATION_MASK_ELEMENT_STYLE_ID,
 } from "../../../constants";
 
-export const IDENTITY_TRANSFORM = [
+const IDENTITY_TRANSFORM = [
 	{ translateX: 0 },
 	{ translateY: 0 },
+	{ scale: 1 },
 	{ scaleX: 1 },
 	{ scaleY: 1 },
 ] as const;
 
-export const ALWAYS_RESET_STYLE_VALUES = {
+/**
+ * Safe identity resets for transition-owned style props.
+ *
+ * This list should stay limited to props with a predictable neutral value after
+ * an animation finishes. Avoid layout-owning props such as width, height, top,
+ * left, margin, padding, flex, or aspectRatio; resetting those to zero can clip
+ * or collapse user layout. If another visual-only transition prop needs cleanup,
+ * please add its identity value here in a PR.
+ */
+export const STYLE_RESET_VALUES: Record<string, unknown> = {
+	transform: IDENTITY_TRANSFORM,
+	translateX: 0,
+	translateY: 0,
+	scale: 1,
+	scaleX: 1,
+	scaleY: 1,
 	opacity: 1,
 	zIndex: 0,
 	elevation: 0,
-} as const;
+	overflow: "visible",
+	backgroundColor: "transparent",
+	borderColor: "transparent",
+	borderTopColor: "transparent",
+	borderRightColor: "transparent",
+	borderBottomColor: "transparent",
+	borderLeftColor: "transparent",
+	borderStartColor: "transparent",
+	borderEndColor: "transparent",
+	borderRadius: 0,
+	borderTopLeftRadius: 0,
+	borderTopRightRadius: 0,
+	borderBottomRightRadius: 0,
+	borderBottomLeftRadius: 0,
+	borderTopStartRadius: 0,
+	borderTopEndRadius: 0,
+	borderBottomStartRadius: 0,
+	borderBottomEndRadius: 0,
+	borderStartStartRadius: 0,
+	borderStartEndRadius: 0,
+	borderEndStartRadius: 0,
+	borderEndEndRadius: 0,
+	shadowColor: "transparent",
+	shadowOffset: { width: 0, height: 0 },
+	shadowOpacity: 0,
+	shadowRadius: 0,
+};
+
+export const PROP_RESET_VALUES: Record<string, unknown> = {
+	pointerEvents: "auto",
+};
 
-export const LOCAL_ONLY_STYLE_SLOT_IDS = {
+const LOCAL_ONLY_STYLE_SLOT_IDS = {
 	content: true,
 	backdrop: true,
 	surface: true,

package/src/shared/providers/screen/styles/helpers/normalize-slots.ts

@@ -30,11 +30,21 @@ const isAlreadyNormalizedStyleMap = (raw: Record<string, any>) => {
 	return true;
 };
 
+/**
+ * Normalizes an interpolator result into the canonical `{ style, props }` slot format.
+ *
+ * Handles three cases per key:
+ * 1. Proper `TransitionSlotStyle` values (has `style` or `props` key) — pass through
+ * 2. Style shorthand (plain StyleProps without wrapping) — auto-wrapped as `{ style: value }`
+ */
 export function normalizeSlots(
 	raw: Record<string, any>,
 ): NormalizedTransitionInterpolatedStyle {
 	"worklet";
 
+	// Most modern interpolators already return the canonical `{ style, props }`
+	// slot shape. In that common case, we can forward the raw object directly and
+	// avoid building a second map just to copy the same slot references over.
 	if (isAlreadyNormalizedStyleMap(raw)) {
 		return raw as NormalizedTransitionInterpolatedStyle;
 	}
@@ -45,14 +55,17 @@ export function normalizeSlots(
 	for (const key in raw) {
 		const value = raw[key];
 
+		// ── All other keys ──
 		if (value === undefined) {
 			normalized[key] = undefined;
 			continue;
 		}
 
 		if (isExplicitTransitionSlot(value)) {
+			// Proper TransitionSlotStyle — pass through
 			normalized[key] = value as NormalizedTransitionSlotStyle;
 		} else {
+			// Shorthand: plain StyleProps — wrap it
 			normalized[key] = { style: value };
 		}
 	}

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -0,0 +1,260 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../../types/animation.types";
+import { shouldSlotInherit } from "../../constants";
+import { materializeResolvedSlot } from "./materialize-slot";
+import { getResolvedSlotState, hasDisappearedKeys } from "./slot-state";
+import type {
+	ResettableStyleState,
+	ResettableStyleStatesBySlot,
+} from "./types";
+
+export type { ResettableStyleStatesBySlot } from "./types";
+
+type ResolveSlotStylesContext = {
+	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	ancestorStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousStyleStatesBySlot: ResettableStyleStatesBySlot;
+	deferLocalSlotResets: boolean;
+	resolvedStylesMap: NormalizedTransitionInterpolatedStyle;
+	nextPreviousStyleStatesBySlot: ResettableStyleStatesBySlot;
+};
+
+const getForwardedSlot = (
+	slot: NormalizedTransitionSlotStyle | undefined,
+	hasAnyKeys: boolean,
+) => {
+	"worklet";
+
+	if (!hasAnyKeys) {
+		return undefined;
+	}
+
+	return slot;
+};
+
+const hasEitherResetPatch = (
+	hasStyleResetPatch: boolean,
+	hasPropResetPatch: boolean,
+) => {
+	"worklet";
+	return hasStyleResetPatch || hasPropResetPatch;
+};
+
+const getResolvedSlotOutput = ({
+	slot,
+	previousState,
+	resetDroppedKeys,
+	carryPreviousState,
+}: {
+	slot: NormalizedTransitionSlotStyle | undefined;
+	previousState: ResettableStyleState | undefined;
+	resetDroppedKeys: boolean;
+	carryPreviousState: boolean;
+}) => {
+	"worklet";
+	const state = getResolvedSlotState(slot);
+
+	const hasStyleResetPatch =
+		resetDroppedKeys &&
+		hasDisappearedKeys(previousState?.styleKeys, state.styleKeys);
+	const hasPropResetPatch =
+		resetDroppedKeys &&
+		hasDisappearedKeys(previousState?.propKeys, state.propKeys);
+	const hasResetPatch = hasEitherResetPatch(
+		hasStyleResetPatch,
+		hasPropResetPatch,
+	);
+	const nextState =
+		state.nextState ?? (carryPreviousState ? previousState : undefined);
+
+	if (!hasResetPatch) {
+		return {
+			resolvedSlot: getForwardedSlot(slot, state.hasAnyKeys),
+			nextState,
+		};
+	}
+
+	return {
+		resolvedSlot: materializeResolvedSlot({
+			baseStyle: state.baseStyle,
+			baseProps: state.baseProps,
+			previousState,
+			styleKeys: state.styleKeys,
+			propKeys: state.propKeys,
+			hasAnyStyleKeys: state.hasAnyStyleKeys,
+			hasAnyPropKeys: state.hasAnyPropKeys,
+			hasStyleResetPatch,
+			hasPropResetPatch,
+		}),
+		nextState,
+	};
+};
+
+const shouldDeferMissingLocalSlotReset = (
+	context: ResolveSlotStylesContext,
+	slotId: string,
+) => {
+	"worklet";
+	const canInherit = shouldSlotInherit(slotId);
+	const hasCurrentSlot = context.currentStylesMap[slotId] !== undefined;
+	const hasInheritedSlot =
+		canInherit && context.ancestorStylesMap[slotId] !== undefined;
+
+	return (
+		context.deferLocalSlotResets &&
+		!canInherit &&
+		!hasCurrentSlot &&
+		!hasInheritedSlot
+	);
+};
+
+const getSlotForId = (context: ResolveSlotStylesContext, slotId: string) => {
+	"worklet";
+	const currentSlot = context.currentStylesMap[slotId];
+
+	if (currentSlot !== undefined) {
+		return currentSlot;
+	}
+
+	if (shouldSlotInherit(slotId)) {
+		return context.ancestorStylesMap[slotId];
+	}
+
+	return undefined;
+};
+
+const writeResolvedSlotOutput = ({
+	context,
+	slotId,
+	resolvedSlot,
+	nextState,
+}: {
+	context: ResolveSlotStylesContext;
+	slotId: string;
+	resolvedSlot: NormalizedTransitionSlotStyle | undefined;
+	nextState: ResettableStyleState | undefined;
+}) => {
+	"worklet";
+
+	if (nextState) {
+		context.nextPreviousStyleStatesBySlot[slotId] = nextState;
+	}
+
+	if (!resolvedSlot) {
+		return;
+	}
+
+	context.resolvedStylesMap[slotId] = resolvedSlot;
+};
+
+const appendResolvedSlot = (
+	context: ResolveSlotStylesContext,
+	slotId: string,
+) => {
+	"worklet";
+	const shouldDeferReset = shouldDeferMissingLocalSlotReset(context, slotId);
+	const { resolvedSlot, nextState } = getResolvedSlotOutput({
+		slot: getSlotForId(context, slotId),
+		previousState: context.previousStyleStatesBySlot[slotId],
+		resetDroppedKeys: !shouldDeferReset,
+		carryPreviousState: shouldDeferReset,
+	});
+
+	writeResolvedSlotOutput({
+		context,
+		slotId,
+		resolvedSlot,
+		nextState,
+	});
+};
+
+const appendCurrentSlots = (context: ResolveSlotStylesContext) => {
+	"worklet";
+
+	for (const slotId in context.currentStylesMap) {
+		appendResolvedSlot(context, slotId);
+	}
+};
+
+const shouldAppendInheritedSlot = (
+	context: ResolveSlotStylesContext,
+	slotId: string,
+) => {
+	"worklet";
+	return (
+		shouldSlotInherit(slotId) && context.currentStylesMap[slotId] === undefined
+	);
+};
+
+const appendInheritedSlots = (context: ResolveSlotStylesContext) => {
+	"worklet";
+
+	for (const slotId in context.ancestorStylesMap) {
+		if (shouldAppendInheritedSlot(context, slotId)) {
+			appendResolvedSlot(context, slotId);
+		}
+	}
+};
+
+const shouldAppendPreviousSlot = (
+	context: ResolveSlotStylesContext,
+	slotId: string,
+) => {
+	"worklet";
+	const inheritedSlotExists =
+		shouldSlotInherit(slotId) &&
+		context.ancestorStylesMap[slotId] !== undefined;
+
+	return context.currentStylesMap[slotId] === undefined && !inheritedSlotExists;
+};
+
+const appendPreviousSlots = (context: ResolveSlotStylesContext) => {
+	"worklet";
+
+	for (const slotId in context.previousStyleStatesBySlot) {
+		if (shouldAppendPreviousSlot(context, slotId)) {
+			appendResolvedSlot(context, slotId);
+		}
+	}
+};
+
+/**
+ * Resolves slot styles for the current screen pass and resets keys a slot
+ * emitted previously but no longer returns. Reanimated does not reliably clear
+ * animated values with undefined, so known keys and numeric values are reset to
+ * concrete identity values.
+ */
+export const resolveSlotStyles = ({
+	currentStylesMap,
+	ancestorStylesMap,
+	previousStyleStatesBySlot,
+	deferLocalSlotResets = false,
+}: {
+	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	ancestorStylesMap: NormalizedTransitionInterpolatedStyle;
+	previousStyleStatesBySlot: ResettableStyleStatesBySlot;
+	deferLocalSlotResets?: boolean;
+}) => {
+	"worklet";
+	const resolvedStylesMap: NormalizedTransitionInterpolatedStyle = {};
+	const nextPreviousStyleStatesBySlot: ResettableStyleStatesBySlot = {};
+	const context = {
+		currentStylesMap,
+		ancestorStylesMap,
+		previousStyleStatesBySlot,
+		deferLocalSlotResets,
+		resolvedStylesMap,
+		nextPreviousStyleStatesBySlot,
+	};
+
+	appendCurrentSlots(context);
+	appendInheritedSlots(context);
+	appendPreviousSlots(context);
+
+	return {
+		resolvedStylesMap,
+		nextPreviousStyleStatesBySlot,
+	};
+};

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/materialize-slot.ts

@@ -0,0 +1,155 @@
+import type { NormalizedTransitionSlotStyle } from "../../../../../types/animation.types";
+import { PROP_RESET_VALUES, STYLE_RESET_VALUES } from "../../constants";
+import type { ResettableStyleState } from "./types";
+
+// fallow-ignore-next-line complexity
+const materializeResolvedBucket = ({
+	source,
+	previousKeys,
+	previousResetValues,
+	currentKeys,
+	hasAnyKeys,
+	hasResetPatch,
+	resetValues,
+}: {
+	source: Record<string, unknown> | undefined;
+	previousKeys: Record<string, true> | undefined;
+	previousResetValues: Record<string, unknown> | undefined;
+	currentKeys: Record<string, true> | undefined;
+	hasAnyKeys: boolean;
+	hasResetPatch: boolean;
+	resetValues: Record<string, unknown> | undefined;
+}) => {
+	"worklet";
+
+	if (!hasAnyKeys && !hasResetPatch) {
+		return undefined;
+	}
+
+	const resolvedBucket: Record<string, unknown> = {};
+	const keysToReset = previousKeys ?? {};
+
+	for (const key in keysToReset) {
+		if (currentKeys !== undefined && currentKeys[key] === true) {
+			continue;
+		}
+
+		const previousResetValue = previousResetValues?.[key];
+		resolvedBucket[key] =
+			previousResetValue !== undefined
+				? previousResetValue
+				: resetValues?.[key];
+	}
+
+	if (source) {
+		for (const key in source) {
+			const value = source[key];
+
+			if (value !== undefined && value !== null) {
+				resolvedBucket[key] = value;
+			}
+		}
+	}
+
+	return resolvedBucket;
+};
+
+const materializeResolvedStyle = ({
+	baseStyle,
+	previousState,
+	styleKeys,
+	hasAnyStyleKeys,
+	hasStyleResetPatch,
+}: {
+	baseStyle: Record<string, unknown> | undefined;
+	previousState: ResettableStyleState | undefined;
+	styleKeys: Record<string, true> | undefined;
+	hasAnyStyleKeys: boolean;
+	hasStyleResetPatch: boolean;
+}) => {
+	"worklet";
+	return materializeResolvedBucket({
+		source: baseStyle,
+		previousKeys: previousState?.styleKeys,
+		previousResetValues: previousState?.styleResetValues,
+		currentKeys: styleKeys,
+		hasAnyKeys: hasAnyStyleKeys,
+		hasResetPatch: hasStyleResetPatch,
+		resetValues: STYLE_RESET_VALUES,
+	});
+};
+
+const materializeResolvedProps = ({
+	baseProps,
+	previousState,
+	propKeys,
+	hasAnyPropKeys,
+	hasPropResetPatch,
+}: {
+	baseProps: Record<string, unknown> | undefined;
+	previousState: ResettableStyleState | undefined;
+	propKeys: Record<string, true> | undefined;
+	hasAnyPropKeys: boolean;
+	hasPropResetPatch: boolean;
+}) => {
+	"worklet";
+	return materializeResolvedBucket({
+		source: baseProps,
+		previousKeys: previousState?.propKeys,
+		previousResetValues: previousState?.propResetValues,
+		currentKeys: propKeys,
+		hasAnyKeys: hasAnyPropKeys,
+		hasResetPatch: hasPropResetPatch,
+		resetValues: PROP_RESET_VALUES,
+	});
+};
+
+export const materializeResolvedSlot = ({
+	baseStyle,
+	baseProps,
+	previousState,
+	styleKeys,
+	propKeys,
+	hasAnyStyleKeys,
+	hasAnyPropKeys,
+	hasStyleResetPatch,
+	hasPropResetPatch,
+}: {
+	baseStyle: Record<string, unknown> | undefined;
+	baseProps: Record<string, unknown> | undefined;
+	previousState: ResettableStyleState | undefined;
+	styleKeys: Record<string, true> | undefined;
+	propKeys: Record<string, true> | undefined;
+	hasAnyStyleKeys: boolean;
+	hasAnyPropKeys: boolean;
+	hasStyleResetPatch: boolean;
+	hasPropResetPatch: boolean;
+}) => {
+	"worklet";
+	const resolvedSlot = {} as NormalizedTransitionSlotStyle;
+
+	const resolvedStyle = materializeResolvedStyle({
+		baseStyle,
+		previousState,
+		styleKeys,
+		hasAnyStyleKeys,
+		hasStyleResetPatch,
+	});
+
+	const resolvedProps = materializeResolvedProps({
+		baseProps,
+		previousState,
+		propKeys,
+		hasAnyPropKeys,
+		hasPropResetPatch,
+	});
+
+	resolvedSlot.style = resolvedStyle;
+	resolvedSlot.props = resolvedProps;
+
+	if (!resolvedSlot.style && !resolvedSlot.props) {
+		return undefined;
+	}
+
+	return resolvedSlot;
+};

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/reset-values.ts

@@ -0,0 +1,23 @@
+import { PROP_RESET_VALUES, STYLE_RESET_VALUES } from "../../constants";
+
+export const getStyleResetValue = (key: string, _value: unknown) => {
+	"worklet";
+	const explicitResetValue = STYLE_RESET_VALUES[key];
+
+	if (explicitResetValue !== undefined) {
+		return explicitResetValue;
+	}
+
+	return undefined;
+};
+
+export const getPropResetValue = (key: string, _value: unknown) => {
+	"worklet";
+	const explicitResetValue = PROP_RESET_VALUES[key];
+
+	if (explicitResetValue !== undefined) {
+		return explicitResetValue;
+	}
+
+	return undefined;
+};

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/slot-state.ts

@@ -0,0 +1,146 @@
+import type { NormalizedTransitionSlotStyle } from "../../../../../types/animation.types";
+import { getPropResetValue, getStyleResetValue } from "./reset-values";
+import type { ResettableStyleState } from "./types";
+
+const hasTrackedKey = (keys: Record<string, true> | undefined, key: string) => {
+	"worklet";
+	return keys !== undefined && keys[key] === true;
+};
+
+const isDefinedStyleValue = (value: unknown) => {
+	"worklet";
+	return value !== undefined && value !== null;
+};
+
+// fallow-ignore-next-line complexity
+const collectDefinedKeys = ({
+	source,
+	getResetValue,
+}: {
+	source: Record<string, unknown> | undefined;
+	getResetValue: (key: string, value: unknown) => unknown;
+}) => {
+	"worklet";
+	const sourceValues = source ?? {};
+	const keys: Record<string, true> = {};
+	const resetValues: Record<string, unknown> = {};
+	let hasKeys = false;
+	let hasResetValues = false;
+
+	for (const key in sourceValues) {
+		const value = sourceValues[key];
+
+		if (!isDefinedStyleValue(value)) {
+			continue;
+		}
+
+		keys[key] = true;
+		hasKeys = true;
+
+		const resetValue = getResetValue(key, value);
+
+		if (resetValue !== undefined) {
+			resetValues[key] = resetValue;
+			hasResetValues = true;
+		}
+	}
+
+	return {
+		keys: hasKeys ? keys : undefined,
+		resetValues: hasResetValues ? resetValues : undefined,
+		hasKeys,
+	};
+};
+
+export const hasDisappearedKeys = (
+	previousKeys: Record<string, true> | undefined,
+	currentKeys: Record<string, true> | undefined,
+) => {
+	"worklet";
+
+	if (!previousKeys) {
+		return false;
+	}
+
+	for (const key in previousKeys) {
+		if (!hasTrackedKey(currentKeys, key)) {
+			return true;
+		}
+	}
+
+	return false;
+};
+
+const hasEitherKeySet = (
+	styleKeys: Record<string, true> | undefined,
+	propKeys: Record<string, true> | undefined,
+) => {
+	"worklet";
+	return styleKeys !== undefined || propKeys !== undefined;
+};
+
+const getNextStyleState = ({
+	styleKeys,
+	styleResetValues,
+	propKeys,
+	propResetValues,
+}: {
+	styleKeys: Record<string, true> | undefined;
+	styleResetValues: Record<string, unknown> | undefined;
+	propKeys: Record<string, true> | undefined;
+	propResetValues: Record<string, unknown> | undefined;
+}): ResettableStyleState | undefined => {
+	"worklet";
+
+	if (!hasEitherKeySet(styleKeys, propKeys)) {
+		return undefined;
+	}
+
+	return {
+		styleKeys,
+		styleResetValues,
+		propKeys,
+		propResetValues,
+	};
+};
+
+export const getResolvedSlotState = (
+	slot: NormalizedTransitionSlotStyle | undefined,
+) => {
+	"worklet";
+	const baseStyle = slot?.style as Record<string, unknown> | undefined;
+	const baseProps = slot?.props as Record<string, unknown> | undefined;
+
+	const {
+		keys: styleKeys,
+		resetValues: styleResetValues,
+		hasKeys: hasAnyStyleKeys,
+	} = collectDefinedKeys({
+		source: baseStyle,
+		getResetValue: getStyleResetValue,
+	});
+	const {
+		keys: propKeys,
+		resetValues: propResetValues,
+		hasKeys: hasAnyPropKeys,
+	} = collectDefinedKeys({
+		source: baseProps,
+		getResetValue: getPropResetValue,
+	});
+
+	return {
+		baseStyle,
+		baseProps,
+		styleKeys,
+		propKeys,
+		hasAnyStyleKeys,
+		hasAnyPropKeys,
+		hasAnyKeys: hasAnyStyleKeys || hasAnyPropKeys,
+		nextState: getNextStyleState({
+			styleKeys,
+			styleResetValues,
+			propKeys,
+			propResetValues,
+		}),
+	};
+};

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/types.ts

@@ -0,0 +1,8 @@
+export type ResettableStyleState = {
+	styleKeys?: Record<string, true>;
+	styleResetValues?: Record<string, unknown>;
+	propKeys?: Record<string, true>;
+	propResetValues?: Record<string, unknown>;
+};
+
+export type ResettableStyleStatesBySlot = Record<string, ResettableStyleState>;