react-native-screen-transitions 3.10.0 → 3.11.1

package/src/shared/providers/screen/gestures/ownership/shadowing-claims.ts

@@ -1,16 +1,15 @@
 import type { ClaimedDirections } from "../../../../types/ownership.types";
-import type { StackSceneActivity } from "../../../../types/stack.types";
 
 export const resolveShadowingClaimDirections = ({
-	currentActivity,
+	isCurrentScreenClosing,
 	currentClaimedDirections,
 	previousClaimedDirections,
 }: {
-	currentActivity: StackSceneActivity | undefined;
+	isCurrentScreenClosing: boolean;
 	currentClaimedDirections: ClaimedDirections;
 	previousClaimedDirections: ClaimedDirections;
 }): ClaimedDirections => {
-	if (currentActivity === "closing") {
+	if (isCurrentScreenClosing) {
 		return previousClaimedDirections;
 	}
 

package/src/shared/providers/screen/gestures/ownership/use-walk-up-and-register-shadowing-claims.ts

@@ -8,10 +8,10 @@ import {
 } from "../../../../types/ownership.types";
 import {
 	type BaseDescriptor,
-	useDescriptorDerivations,
-	useDescriptors,
+	useDescriptorsStore,
 } from "../../../screen/descriptors";
-import { useGestureContext } from "../gestures.provider";
+import { useBlankStackStore } from "../../../stack/blank-stack.provider";
+import { useGestureStore } from "../gestures.provider";
 import { walkGestureAncestors } from "../shared/ancestors";
 import { resolveScreenGestureConfig } from "../shared/policy";
 import type { GestureContextType } from "../types";
@@ -135,9 +135,17 @@ const getDescriptorClaimedDirections = (
 export function useWalkUpAndRegisterShadowingClaims(
 	claimedDirections: ClaimedDirections,
 ): void {
-	const parentContext = useGestureContext();
-	const { current, previous } = useDescriptors();
-	const { isTopMostScreen, currentScreenKey } = useDescriptorDerivations();
+	const parentContext = useGestureStore();
+	const previous = useDescriptorsStore((store) => store.previous);
+	const isTopMostScreen = useDescriptorsStore(
+		(store) => store.derivations.isTopMostScreen,
+	);
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const isCurrentScreenClosing = useBlankStackStore(
+		(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
+	);
 
 	/*
 	 * We want to calculate effective claimed directions as claimedDirections is not enough for us.
@@ -161,14 +169,14 @@ export function useWalkUpAndRegisterShadowingClaims(
 	const effectiveClaimedDirections = useMemo(
 		() =>
 			resolveShadowingClaimDirections({
-				currentActivity: current.activity,
+				isCurrentScreenClosing,
 				currentClaimedDirections: claimedDirections,
 				previousClaimedDirections: getDescriptorClaimedDirections(
 					previous,
 					parentContext,
 				),
 			}),
-		[current.activity, claimedDirections, previous, parentContext],
+		[isCurrentScreenClosing, claimedDirections, previous, parentContext],
 	);
 
 	const shadowedAncestors = useMemo(

package/src/shared/providers/screen/gestures/pan/activation/use-pan-activation.ts

@@ -7,7 +7,7 @@ import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { GestureStore } from "../../../../../stores/gesture.store";
 import { GestureActivationState } from "../../../../../types/gesture.types";
 import type { Direction } from "../../../../../types/ownership.types";
-import { useDescriptorDerivations } from "../../../descriptors";
+import { useDescriptorsStore } from "../../../descriptors";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePanRuntime } from "../../shared/runtime";
 import type {
@@ -36,7 +36,12 @@ export const usePanActivation = ({
 	dimensions,
 	gestureCompositionOwner,
 }: UsePanActivationProps) => {
-	const { currentScreenKey, parentScreenKey } = useDescriptorDerivations();
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const parentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.parentScreenKey,
+	);
 
 	const ancestorDismissing = useMemo(() => {
 		if (!parentScreenKey) return null;

package/src/shared/providers/screen/gestures/pan/behavior/pan-lifecycle.ts

@@ -1,7 +1,7 @@
 import { clamp, runOnJS, type SharedValue } from "react-native-reanimated";
-import { EPSILON, FALSE, TRUE } from "../../../../../constants";
+import { EPSILON, TRUE } from "../../../../../constants";
+import { emitMotionStart } from "../../../../../stores/animation.store";
 import { animateToProgress } from "../../../../../utils/animation/animate-to-progress";
-import { emit } from "../../../../../utils/animation/emit";
 import {
 	normalizeGestureTranslation,
 	resolveGestureVelocity,
@@ -29,16 +29,7 @@ export const startPanBase = (runtime: PanGestureRuntime) => {
 		stores: { gestures, animations },
 	} = runtime;
 
-	const wasSettling = gestures.settling.get();
-	const hasResidualGesture =
-		Math.abs(gestures.normX.get()) > EPSILON ||
-		Math.abs(gestures.normY.get()) > EPSILON ||
-		Math.abs(gestures.normScale.get()) > EPSILON ||
-		Math.abs(gestures.rotation.get()) > EPSILON;
-
-	if (!wasSettling || !hasResidualGesture) {
-		emit(animations.willAnimate, TRUE, FALSE);
-	}
+	emitMotionStart(animations);
 
 	gestures.dragging.set(TRUE);
 	gestures.dismissing.set(0);
@@ -133,6 +124,9 @@ export const finalizePanRelease = (
 		system.targetProgress.set(plan.commitProgress);
 	}
 
+	const progressAlreadyAtTarget =
+		Math.abs(animations.transitionProgress.get() - plan.target) <= EPSILON;
+
 	if (canDriveRelease && plan.shouldDismiss) {
 		snapshotGestureHandoff(gestures, {
 			velocity: plan.handoffVelocity,
@@ -142,6 +136,8 @@ export const finalizePanRelease = (
 	resetPanGestureValues({
 		plan,
 		gestures,
+		animations,
+		completeMotion: !plan.shouldDismiss && progressAlreadyAtTarget,
 		updateLifecycle: canDriveRelease,
 	});
 
@@ -149,12 +145,8 @@ export const finalizePanRelease = (
 		return;
 	}
 
-	const progressAlreadyAtTarget =
-		Math.abs(animations.transitionProgress.get() - plan.target) <= EPSILON;
-
 	if (!plan.shouldDismiss && progressAlreadyAtTarget) {
 		system.targetProgress.set(plan.target);
-		animations.progressAnimating.set(FALSE);
 		return;
 	}
 

package/src/shared/providers/screen/gestures/pan/behavior/pan-reset.ts

@@ -1,4 +1,5 @@
 import { FALSE, TRUE } from "../../../../../constants";
+import type { AnimationStoreMap } from "../../../../../stores/animation.store";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import { animateMany } from "../../shared/reset";
 import {
@@ -10,12 +11,16 @@ import type { PanReleasePlan } from "../../types";
 interface ResetPanGestureValuesProps {
 	plan: PanReleasePlan;
 	gestures: GestureStoreMap;
+	animations?: AnimationStoreMap;
+	completeMotion?: boolean;
 	updateLifecycle?: boolean;
 }
 
 export const resetPanGestureValues = ({
 	plan,
 	gestures,
+	animations,
+	completeMotion = false,
 	updateLifecycle = true,
 }: ResetPanGestureValuesProps) => {
 	"worklet";
@@ -28,8 +33,17 @@ export const resetPanGestureValues = ({
 		gestures.active.set(null);
 		gestures.direction.set(null);
 		gestures.settling.set(FALSE);
+		if (completeMotion) {
+			animations?.progressAnimating.set(FALSE);
+			animations?.progressSettled.set(TRUE);
+		}
 	};
 
+	if (animations && updateLifecycle && !plan.shouldDismiss) {
+		animations.progressAnimating.set(TRUE);
+		animations.progressSettled.set(FALSE);
+	}
+
 	clearRawPanValues(gestures);
 
 	if (updateLifecycle) {

package/src/shared/providers/screen/gestures/pan/use-build-pan-gesture.ts

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import { useScreenOptionsContext } from "../../options";
+import { useScreenOptionsStore } from "../../options";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
 import type {
 	DirectionClaimMap,
@@ -29,7 +29,7 @@ export const useBuildPanGesture = ({
 }: UseBuildPanGestureProps): PanGesture => {
 	const dimensions = useWindowDimensions();
 	const { participation, pan: policy } = gestureConfig;
-	const screenOptions = useScreenOptionsContext();
+	const screenOptions = useScreenOptionsStore();
 
 	const runtime = useStableRuntimeConfig({
 		participation,

package/src/shared/providers/screen/gestures/pinch/behavior/pinch-lifecycle.ts

@@ -1,7 +1,7 @@
 import { clamp, runOnJS } from "react-native-reanimated";
-import { EPSILON, FALSE, TRUE } from "../../../../../constants";
+import { EPSILON, TRUE } from "../../../../../constants";
+import { emitMotionStart } from "../../../../../stores/animation.store";
 import { animateToProgress } from "../../../../../utils/animation/animate-to-progress";
-import { emit } from "../../../../../utils/animation/emit";
 import { normalizePinchScale } from "../../shared/physics";
 import { snapshotGestureHandoff } from "../../shared/snapshot";
 import { clearTransformTrackingValues } from "../../shared/values";
@@ -19,15 +19,7 @@ export const startPinchBase = (runtime: PinchGestureRuntime) => {
 		stores: { gestures, animations },
 	} = runtime;
 
-	const wasSettling = gestures.settling.get();
-	const hasResidualGesture =
-		Math.abs(gestures.normScale.get()) > EPSILON ||
-		Math.abs(gestures.rotation.get()) > EPSILON;
-
-	if (!wasSettling || !hasResidualGesture) {
-		emit(animations.willAnimate, TRUE, FALSE);
-	}
-
+	emitMotionStart(animations);
 	gestures.dragging.set(TRUE);
 	gestures.dismissing.set(0);
 	gestures.settling.set(0);
@@ -82,6 +74,9 @@ export const finalizePinchRelease = (
 		system.targetProgress.set(release.commitProgress);
 	}
 
+	const progressAlreadyAtTarget =
+		Math.abs(animations.transitionProgress.get() - release.target) <= EPSILON;
+
 	if (release.shouldDismiss) {
 		snapshotGestureHandoff(gestures, {
 			velocity: release.handoffVelocity,
@@ -91,6 +86,7 @@ export const finalizePinchRelease = (
 	resetPinchGestureValues({
 		spec: release.resetSpec,
 		gestures,
+		animations,
 		shouldDismiss: release.shouldDismiss,
 		resetValuesImmediately: release.resetValuesImmediately,
 	});
@@ -99,6 +95,11 @@ export const finalizePinchRelease = (
 		runOnJS(requestDismiss)();
 	}
 
+	if (!release.shouldDismiss && progressAlreadyAtTarget) {
+		system.targetProgress.set(release.target);
+		return;
+	}
+
 	animateToProgress({
 		target: release.target,
 		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,

package/src/shared/providers/screen/gestures/pinch/behavior/pinch-reset.ts

@@ -1,4 +1,5 @@
 import { FALSE, TRUE } from "../../../../../constants";
+import type { AnimationStoreMap } from "../../../../../stores/animation.store";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { AnimationConfig } from "../../../../../types/animation.types";
 import { animateMany } from "../../shared/reset";
@@ -11,6 +12,7 @@ import {
 interface ResetPinchGestureValuesProps {
 	spec?: AnimationConfig;
 	gestures: GestureStoreMap;
+	animations?: AnimationStoreMap;
 	shouldDismiss: boolean;
 	resetValuesImmediately?: boolean;
 }
@@ -18,6 +20,7 @@ interface ResetPinchGestureValuesProps {
 export const resetPinchGestureValues = ({
 	spec,
 	gestures,
+	animations,
 	shouldDismiss,
 	resetValuesImmediately = false,
 }: ResetPinchGestureValuesProps) => {
@@ -32,8 +35,15 @@ export const resetPinchGestureValues = ({
 		gestures.active.set(null);
 		gestures.direction.set(null);
 		gestures.settling.set(FALSE);
+		animations?.progressAnimating.set(FALSE);
+		animations?.progressSettled.set(TRUE);
 	};
 
+	if (animations && !shouldDismiss) {
+		animations.progressAnimating.set(TRUE);
+		animations.progressSettled.set(FALSE);
+	}
+
 	clearRawTransformValues(gestures);
 
 	gestures.dragging.set(FALSE);

package/src/shared/providers/screen/gestures/pinch/use-build-pinch-gesture.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import { useScreenOptionsContext } from "../../options";
+import { useScreenOptionsStore } from "../../options";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
 import type {
 	GestureCompositionOwner,
@@ -21,7 +21,7 @@ export const useBuildPinchGesture = ({
 	gestureCompositionOwner,
 }: UseBuildPinchGestureProps): PinchGesture => {
 	const { participation, pinch: policy } = gestureConfig;
-	const screenOptions = useScreenOptionsContext();
+	const screenOptions = useScreenOptionsStore();
 
 	const runtime = useStableRuntimeConfig({
 		participation,

package/src/shared/providers/screen/gestures/scroll-coordination/scroll-metadata-owner.tsx

@@ -16,19 +16,19 @@ const DEFAULT_SCROLL_METADATA_OWNER_CONTEXT: ScrollMetadataOwnerContextValue = {
 
 const {
 	ScrollMetadataOwnerProvider,
-	useScrollMetadataOwnerContext: useMaybeScrollMetadataOwnerContext,
+	useScrollMetadataOwnerStore: useMaybeScrollMetadataOwnerStore,
 } = createProvider("ScrollMetadataOwner", { guarded: false })<
 	ScrollMetadataOwnerProviderProps,
 	ScrollMetadataOwnerContextValue
 >(({ children, value }) => ({ children, value }));
 
-export const useScrollMetadataOwnerContext = () =>
-	useMaybeScrollMetadataOwnerContext() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
+export const useScrollMetadataOwnerStore = () =>
+	useMaybeScrollMetadataOwnerStore() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
 
 export const useScrollMetadataOwnerProviderValue = (
 	axis: ScrollGestureAxis,
 ) => {
-	const parent = useScrollMetadataOwnerContext();
+	const parent = useScrollMetadataOwnerStore();
 
 	return useMemo(() => {
 		if (parent[axis]) return parent;

package/src/shared/providers/screen/gestures/scroll-coordination/use-scroll-gesture-coordination.ts

@@ -10,7 +10,7 @@ import { useSharedValueState } from "../../../../hooks/reanimated/use-shared-val
 import useStableCallback from "../../../../hooks/use-stable-callback";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { ScrollStore } from "../../../../stores/scroll.store";
-import { useGestureContext } from "../gestures.provider";
+import { useGestureStore } from "../gestures.provider";
 import type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
@@ -18,8 +18,8 @@ import type {
 	ScrollMetadataState,
 } from "../types";
 import {
-	useScrollMetadataOwnerContext,
 	useScrollMetadataOwnerProviderValue,
+	useScrollMetadataOwnerStore,
 } from "./scroll-metadata-owner";
 import {
 	clearScrollMetadataAxisState,
@@ -88,10 +88,10 @@ const clearScrollMetadataAxis = (
 export const useScrollGestureCoordination = (
 	props: ScrollGestureCoordinationProps,
 ) => {
-	const context = useGestureContext();
+	const context = useGestureStore();
 	const scrollDirection = props.direction ?? "vertical";
 
-	const metadataOwnerContext = useScrollMetadataOwnerContext();
+	const metadataOwnerContext = useScrollMetadataOwnerStore();
 	const metadataOwnerProviderValue =
 		useScrollMetadataOwnerProviderValue(scrollDirection);
 	const isFirstMetadataWriterInTree = !metadataOwnerContext[scrollDirection];

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

@@ -1,6 +1,6 @@
 export { syncScreenOptionsOverrides } from "./helpers";
 export {
 	ScreenOptionsProvider,
-	useScreenOptionsContext,
+	useScreenOptionsStore,
 } from "./options.provider";
 export type { ScreenOptionsContextValue, ScreenOptionsSnapshot } from "./types";

package/src/shared/providers/screen/options/options.provider.tsx

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useMemo } from "react";
 import { useSharedValue } from "react-native-reanimated";
 import createProvider from "../../../utils/create-provider";
-import { useDescriptors } from "../descriptors";
+import { useDescriptorsStore } from "../descriptors";
 import { resolveBaseScreenOptions, syncScreenOptionsBase } from "./helpers";
 import type {
 	ScreenOptionsContextValue,
@@ -9,35 +9,31 @@ import type {
 	ScreenOptionsState,
 } from "./types";
 
-export const { ScreenOptionsProvider, useScreenOptionsContext } =
-	createProvider("ScreenOptions")<
-		ScreenOptionsProviderProps,
-		ScreenOptionsContextValue
-	>(() => {
-		const {
-			current: { options },
-		} = useDescriptors();
+export const { ScreenOptionsProvider, useScreenOptionsStore } = createProvider(
+	"ScreenOptions",
+)<ScreenOptionsProviderProps, ScreenOptionsContextValue>(() => {
+	const options = useDescriptorsStore((store) => store.options);
 
-		const baseScreenOptions = useMemo(
-			() => resolveBaseScreenOptions(options),
-			[options],
-		);
+	const baseScreenOptions = useMemo(
+		() => resolveBaseScreenOptions(options),
+		[options],
+	);
 
-		const initialScreenOptions = useMemo<ScreenOptionsState>(
-			() => ({
-				...baseScreenOptions,
-				baseOptions: baseScreenOptions,
-			}),
-			[baseScreenOptions],
-		);
+	const initialScreenOptions = useMemo<ScreenOptionsState>(
+		() => ({
+			...baseScreenOptions,
+			baseOptions: baseScreenOptions,
+		}),
+		[baseScreenOptions],
+	);
 
-		const value = useSharedValue(initialScreenOptions);
+	const value = useSharedValue(initialScreenOptions);
 
-		useLayoutEffect(() => {
-			syncScreenOptionsBase(value, baseScreenOptions);
-		}, [value, baseScreenOptions]);
+	useLayoutEffect(() => {
+		syncScreenOptionsBase(value, baseScreenOptions);
+	}, [value, baseScreenOptions]);
 
-		return {
-			value,
-		};
-	});
+	return {
+		value,
+	};
+});

package/src/shared/providers/screen/screen-composer.tsx

@@ -9,8 +9,9 @@ import { ScreenSlotProvider } from "./styles";
 
 type Props<TDescriptor extends BaseDescriptor> = {
 	previous?: TDescriptor;
-	current: TDescriptor;
+	current?: TDescriptor;
 	next?: TDescriptor;
+	routeKey?: string;
 	children: React.ReactNode;
 };
 
@@ -18,10 +19,16 @@ export function ScreenComposer<TDescriptor extends BaseDescriptor>({
 	previous,
 	current,
 	next,
+	routeKey,
 	children,
 }: Props<TDescriptor>) {
 	return (
-		<DescriptorsProvider previous={previous} current={current} next={next}>
+		<DescriptorsProvider
+			previous={previous}
+			current={current}
+			next={next}
+			routeKey={routeKey}
+		>
 			<ScreenLifecycle>
 				<ScreenOptionsProvider>
 					<ScreenGestureProvider>

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

@@ -64,7 +64,7 @@ export const PROP_RESET_VALUES: Record<string, unknown> = {
 	pointerEvents: "auto",
 };
 
-const LOCAL_ONLY_STYLE_SLOT_IDS = {
+const RESERVED_STYLE_SLOT_IDS = {
 	content: true,
 	backdrop: true,
 	surface: true,
@@ -72,11 +72,13 @@ const LOCAL_ONLY_STYLE_SLOT_IDS = {
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
 } as const;
 
-export const shouldSlotInherit = (slotId: string) => {
+export const isReservedStyleSlot = (slotId: string) => {
 	"worklet";
 	// biome-ignore lint/suspicious/noPrototypeBuiltins: <proj issue>
-	return !Object.prototype.hasOwnProperty.call(
-		LOCAL_ONLY_STYLE_SLOT_IDS,
-		slotId,
-	);
+	return Object.prototype.hasOwnProperty.call(RESERVED_STYLE_SLOT_IDS, slotId);
+};
+
+export const shouldSlotInherit = (slotId: string) => {
+	"worklet";
+	return !isReservedStyleSlot(slotId);
 };

package/src/shared/providers/screen/styles/helpers/resolve-interpolator-style-handoff.ts

@@ -0,0 +1,138 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+import type { LocalStyleLayers } from "./resolve-slot-styles";
+
+const mergeBuckets = (
+	frozen: Record<string, unknown> | undefined,
+	live: Record<string, unknown> | undefined,
+	composeTransforms: boolean,
+) => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	if (!live) {
+		return frozen;
+	}
+
+	const merged: Record<string, unknown> = { ...frozen };
+
+	for (const key in live) {
+		const liveValue = live[key];
+
+		if (liveValue === undefined || liveValue === null) {
+			continue;
+		}
+
+		const frozenValue = frozen[key];
+
+		if (
+			composeTransforms &&
+			key === "transform" &&
+			Array.isArray(frozenValue) &&
+			Array.isArray(liveValue)
+		) {
+			merged[key] = [...frozenValue, ...liveValue];
+			continue;
+		}
+
+		merged[key] = liveValue;
+	}
+
+	return merged;
+};
+
+const mergeSlots = (
+	frozen: NormalizedTransitionSlotStyle | undefined,
+	live: NormalizedTransitionSlotStyle,
+): NormalizedTransitionSlotStyle => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	const merged: NormalizedTransitionSlotStyle = {};
+	const style = mergeBuckets(
+		frozen.style as Record<string, unknown> | undefined,
+		live.style as Record<string, unknown> | undefined,
+		true,
+	);
+
+	if (style) {
+		merged.style = style;
+	}
+
+	if (frozen.props || live.props) {
+		merged.props = mergeBuckets(frozen.props, live.props, false);
+	}
+
+	const boundsLocalTransform =
+		live.boundsLocalTransform ?? frozen.boundsLocalTransform;
+
+	if (boundsLocalTransform) {
+		merged.boundsLocalTransform = boundsLocalTransform;
+	}
+
+	return merged;
+};
+
+const composeCurrentAndNextStyles = (
+	current: NormalizedTransitionInterpolatedStyle,
+	next: NormalizedTransitionInterpolatedStyle,
+) => {
+	"worklet";
+	const composed: NormalizedTransitionInterpolatedStyle = { ...current };
+
+	for (const slotId in next) {
+		const nextSlot = next[slotId];
+
+		if (nextSlot) {
+			composed[slotId] = mergeSlots(current[slotId], nextSlot);
+		}
+	}
+
+	return composed;
+};
+
+export const resolveInterpolatorStyleHandoff = ({
+	currentOwnsInterpolator,
+	currentStylesMap,
+	nextStylesMap,
+}: {
+	currentOwnsInterpolator: boolean;
+	currentStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	nextStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+}): {
+	localStylesMaps: LocalStyleLayers;
+} => {
+	"worklet";
+
+	if (currentOwnsInterpolator) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+		};
+	}
+
+	if (!nextStylesMap) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+		};
+	}
+
+	if (!currentStylesMap) {
+		return {
+			localStylesMaps: [nextStylesMap],
+		};
+	}
+
+	return {
+		localStylesMaps: [
+			composeCurrentAndNextStyles(currentStylesMap, nextStylesMap),
+		],
+	};
+};