perf/render shape

apps/e2e/app/[stackType]/bounds/_layout.tsx

@@ -19,6 +19,10 @@ export default function BoundsLayout() {
 				name="matched-screen"
 				options={{ ...IOSSlide() }}
 			/>
+			<StackNavigator.Screen
+				name="handoff-multiflow"
+				options={{ ...IOSSlide() }}
+			/>
 		</StackNavigator>
 	);
 }

apps/e2e/app/[stackType]/bounds/handoff-multiflow/_layout.tsx

@@ -0,0 +1,39 @@
+import Transition from "react-native-screen-transitions";
+import type { BlankStackNavigationOptions } from "react-native-screen-transitions/blank-stack";
+import { BlankStack } from "@/layouts/blank-stack";
+
+const BOUNDARY_ID = "video-nested";
+
+const handoffMultiflowInterpolator: BlankStackNavigationOptions["screenStyleInterpolator"] =
+	({ bounds }) => {
+		"worklet";
+		const boundaryStyle = bounds(BOUNDARY_ID).styles() as Record<string, any>;
+
+		return {
+			[BOUNDARY_ID]: boundaryStyle,
+		};
+	};
+
+const singleInstanceOptions = {
+	gestureEnabled: true,
+	gestureDirection: ["vertical", "vertical-inverted"],
+	inactiveBehavior: "keep",
+	screenStyleInterpolator: handoffMultiflowInterpolator,
+	transitionSpec: {
+		open: Transition.Specs.DefaultSpec,
+		close: Transition.Specs.DefaultSpec,
+	},
+} satisfies BlankStackNavigationOptions;
+
+export default function HandoffMultiflowLayout() {
+	return (
+		<BlankStack>
+			<BlankStack.Screen name="index" options={singleInstanceOptions} />
+			<BlankStack.Screen name="a" options={singleInstanceOptions} />
+			<BlankStack.Screen name="b" options={singleInstanceOptions} />
+			<BlankStack.Screen name="c" options={singleInstanceOptions} />
+			<BlankStack.Screen name="d" options={singleInstanceOptions} />
+			<BlankStack.Screen name="e" options={singleInstanceOptions} />
+		</BlankStack>
+	);
+}

apps/e2e/app/[stackType]/bounds/handoff-multiflow/a.tsx

@@ -0,0 +1,13 @@
+import { HandoffMultiflowScreen } from "./handoff-multiflow-screen";
+
+export default function MatchedScreenDebugA() {
+	return (
+		<HandoffMultiflowScreen
+			letter="a"
+			next="b"
+			backgroundColor="#F4F1E8"
+			placementStyle={{ left: 36, top: 132 }}
+			showVideo
+		/>
+	);
+}

apps/e2e/app/[stackType]/bounds/handoff-multiflow/b.tsx

@@ -0,0 +1,12 @@
+import { HandoffMultiflowScreen } from "./handoff-multiflow-screen";
+
+export default function MatchedScreenDebugB() {
+	return (
+		<HandoffMultiflowScreen
+			letter="b"
+			next="c"
+			backgroundColor="#038C22"
+			placementStyle={{ left: 116, top: 368 }}
+		/>
+	);
+}

apps/e2e/app/[stackType]/bounds/handoff-multiflow/c.tsx

@@ -0,0 +1,12 @@
+import { HandoffMultiflowScreen } from "./handoff-multiflow-screen";
+
+export default function MatchedScreenDebugC() {
+	return (
+		<HandoffMultiflowScreen
+			letter="c"
+			next="d"
+			backgroundColor="#101DFF"
+			placementStyle={{ right: 48, top: 258 }}
+		/>
+	);
+}

apps/e2e/app/[stackType]/bounds/handoff-multiflow/d.tsx

@@ -0,0 +1,12 @@
+import { HandoffMultiflowScreen } from "./handoff-multiflow-screen";
+
+export default function MatchedScreenDebugD() {
+	return (
+		<HandoffMultiflowScreen
+			letter="d"
+			next="e"
+			backgroundColor="#7A1FE0"
+			placementStyle={{ left: 52, bottom: 282 }}
+		/>
+	);
+}

apps/e2e/app/[stackType]/bounds/handoff-multiflow/e.tsx

@@ -0,0 +1,11 @@
+import { HandoffMultiflowScreen } from "./handoff-multiflow-screen";
+
+export default function MatchedScreenDebugE() {
+	return (
+		<HandoffMultiflowScreen
+			letter="e"
+			backgroundColor="#E27A16"
+			placementStyle={{ right: 34, bottom: 178 }}
+		/>
+	);
+}