react-native-screen-transitions 4.0.0-alpha.9 → 4.0.0

package/src/components/boundary/portal/components/boundary-content-portal/hooks/use-boundary-content-portal-attachment.ts

@@ -9,14 +9,23 @@ import { useBlankStackStore } from "../../../../../../providers/stack/blank-stac
 import { AnimationStore } from "../../../../../../stores/animation.store";
 import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { getEntry } from "../../../../../../stores/bounds/internals/entries";
+import {
+	getPairKeyForDestination,
+	getPairKeyForSource,
+} from "../../../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../../../stores/bounds/internals/state";
+import type {
+	LinkPairState,
+	TagLink,
+} from "../../../../../../stores/bounds/types";
 import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import { isTeleportEnabled } from "../../../utils/teleport-control";
 import {
 	resolveActiveHandoffReceiver,
 	resolveHandoffAttachmentCandidate,
 	resolvePreviousHandoffReceiver,
+	resolveRequestedHandoffPairKey,
+	resolveRequestedHandoffReceiver,
 } from "../helpers/active-handoff-receiver";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
@@ -24,6 +33,19 @@ interface UseBoundaryContentPortalAttachmentParams {
 	boundaryId: string;
 }
 
+const isCompleteActiveLink = (
+	pair: LinkPairState | null | undefined,
+	link: TagLink | undefined,
+	boundaryLinkKey: string,
+) => {
+	"worklet";
+
+	return (
+		link?.status === "complete" &&
+		(!link.group || pair?.groups[link.group]?.activeId === boundaryLinkKey)
+	);
+};
+
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryContentPortalAttachmentParams) => {
@@ -34,6 +56,9 @@ export const useBoundaryContentPortalAttachment = ({
 	);
 	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
 	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
+	const destinationPairKey = useDescriptorsStore(
+		(s) => s.derivations.destinationPairKey,
+	);
 	const destinationSlots = useOptionalScreenSlotStore(
 		nextScreenKey ?? currentScreenKey,
 	);
@@ -67,11 +92,9 @@ export const useBoundaryContentPortalAttachment = ({
 		const slot = slotsMap.get()[boundaryId];
 		const {
 			pointerEvents: _pointerEvents,
-			teleport,
+			handoffTarget,
 			...slotProps
 		} = slot?.props ?? {};
-
-		const shouldTeleport = isTeleportEnabled(teleport);
 		const closing = activeReceiverClosing.get();
 		const animationProgress = activeReceiverAnimationProgress.get();
 
@@ -89,20 +112,65 @@ export const useBoundaryContentPortalAttachment = ({
 			animationProgress,
 		});
 
-		const pair = sourcePairKey ? pairs.get()[sourcePairKey] : null;
-		const link = pair?.links[getLinkKeyFromTag(boundaryId)];
+		const automaticPair = sourcePairKey ? pairs.get()[sourcePairKey] : null;
+		const boundaryLinkKey = getLinkKeyFromTag(boundaryId);
+		const automaticLink = automaticPair?.links[boundaryLinkKey];
+		const requestedSourcePairKey =
+			getPairKeyForSource(boundaryId, currentScreenKey) ?? sourcePairKey;
+		const requestedSourcePair = requestedSourcePairKey
+			? pairs.get()[requestedSourcePairKey]
+			: null;
+		const requestedSourceLink = requestedSourcePair?.links[boundaryLinkKey];
 
 		const pairDestination =
-			link?.status === "complete" &&
-			(!link.group ||
-				pair?.groups[link.group]?.activeId === getLinkKeyFromTag(boundaryId))
-				? link.destination.screenKey
+			automaticLink?.status === "complete" &&
+			(!automaticLink.group ||
+				automaticPair?.groups[automaticLink.group]?.activeId ===
+					boundaryLinkKey)
+				? automaticLink.destination.screenKey
 				: null;
+		const requestedDestinationPairKey =
+			getPairKeyForDestination(boundaryId, currentScreenKey) ??
+			destinationPairKey;
+		const destinationPair = requestedDestinationPairKey
+			? pairs.get()[requestedDestinationPairKey]
+			: null;
+		const destinationLink = destinationPair?.links[boundaryLinkKey];
+		const retainedSourcePairKey = sourcePairBeforeClose.get() ?? undefined;
+		const retainedSourcePair = retainedSourcePairKey
+			? pairs.get()[retainedSourcePairKey]
+			: null;
+		const retainedSourceLink = retainedSourcePair?.links[boundaryLinkKey];
+		const requestedPairKey = resolveRequestedHandoffPairKey({
+			destinationPairHasCompleteLink: isCompleteActiveLink(
+				destinationPair,
+				destinationLink,
+				boundaryLinkKey,
+			),
+			destinationPairKey: requestedDestinationPairKey,
+			handoffTarget,
+			retainedSourcePairHasCompleteLink: isCompleteActiveLink(
+				retainedSourcePair,
+				retainedSourceLink,
+				boundaryLinkKey,
+			),
+			retainedSourcePairKey,
+			sourcePairHasCompleteLink: isCompleteActiveLink(
+				requestedSourcePair,
+				requestedSourceLink,
+				boundaryLinkKey,
+			),
+			sourcePairKey: requestedSourcePairKey,
+		});
+		const requestedPair = requestedPairKey
+			? pairs.get()[requestedPairKey]
+			: null;
+		const requestedLink = requestedPair?.links[boundaryLinkKey];
 
 		const isInterpolatorReady = interpolatorReady.get();
 		const attachedScreenKey = attachedReceiverScreenKey.get();
 
-		const nextReceiverScreenKey = resolveHandoffAttachmentCandidate({
+		const automaticReceiverScreenKey = resolveHandoffAttachmentCandidate({
 			activeReceiverClosing: !!closing,
 			activeReceiverScreenKey,
 			attachedReceiverScreenKey: attachedScreenKey,
@@ -110,8 +178,25 @@ export const useBoundaryContentPortalAttachment = ({
 			interpolatorReady: !!isInterpolatorReady,
 			pairChangedDuringClose,
 			pairDestinationScreenKey: pairDestination,
+			pairHasBoundaryLink: automaticLink !== undefined,
 			previousReceiverScreenKey,
 		});
+		const requestedDestinationScreenKey =
+			requestedLink?.status === "complete"
+				? requestedLink.destination.screenKey
+				: null;
+		const nextReceiverScreenKey = resolveRequestedHandoffReceiver({
+			automaticScreenKey: automaticReceiverScreenKey,
+			destinationReady:
+				requestedDestinationScreenKey === activeReceiverScreenKey ||
+				!!isInterpolatorReady,
+			destinationScreenKey: requestedDestinationScreenKey,
+			handoffTarget,
+			sourceScreenKey:
+				requestedLink?.status === "complete"
+					? requestedLink.source.screenKey
+					: null,
+		});
 
 		const receiverEntry = nextReceiverScreenKey
 			? getEntry(boundaryId, nextReceiverScreenKey)
@@ -136,9 +221,7 @@ export const useBoundaryContentPortalAttachment = ({
 			attachedReceiverScreenKey.set(nextReceiverScreenKey);
 		}
 
-		const targetScreenKey = shouldTeleport
-			? attachedReceiverScreenKey.get()
-			: null;
+		const targetScreenKey = attachedReceiverScreenKey.get();
 
 		const targetHostName = targetScreenKey
 			? createBoundaryContentPortalHostName(targetScreenKey, boundaryId)

package/src/components/boundary/portal/components/boundary-portal/hooks/use-boundary-portal-attachment.ts

@@ -3,7 +3,6 @@ import { useDescriptorsStore } from "../../../../../../providers/screen/descript
 import { useScreenSlotStore } from "../../../../../../providers/screen/styles";
 import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
-import { isTeleportEnabled } from "../../../utils/teleport-control";
 import { useActiveHostKey } from "../stores/host-registry.store";
 import { useActivePortalBoundaryHost } from "./use-active-portal-boundary-host";
 
@@ -45,14 +44,11 @@ export const useBoundaryPortalAttachment = ({
 		const slot = slotsMap.get()[boundaryId];
 		const {
 			pointerEvents: _pointerEvents,
-			teleport,
+			handoffTarget: _handoffTarget,
 			...slotProps
 		} = slot?.props ?? {};
 
-		const shouldAttach =
-			slot !== undefined &&
-			isTeleportEnabled(teleport) &&
-			portalHostReady.get();
+		const shouldAttach = slot !== undefined && portalHostReady.get();
 
 		const hostName = shouldAttach
 			? portalHostName.get()

package/src/components/boundary/utils/source-signals.ts

@@ -1,3 +1,4 @@
+import { getLinkKeyFromTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type {
 	LinkPairsState,
 	ScreenPairKey,
@@ -25,8 +26,9 @@ export const getInitialSourceCaptureSignal = (params: {
 	}
 
 	const pair = linkState?.[sourcePairKey];
-	const link = pair?.links?.[linkId];
-	const hasSourceRequest = pair?.sourceRequests?.[linkId];
+	const linkKey = getLinkKeyFromTag(linkId);
+	const link = pair?.links?.[linkKey];
+	const hasSourceRequest = pair?.sourceRequests?.[linkKey];
 
 	if ((!link?.destination && !hasSourceRequest) || link?.source) {
 		return null;
@@ -37,12 +39,12 @@ export const getInitialSourceCaptureSignal = (params: {
 
 		// Passive grouped sources should not measure every mounted item. Once a
 		// group has an active id, only that concrete member can auto-capture.
-		if (activeId && activeId !== linkId) {
+		if (activeId && activeId !== linkKey) {
 			return null;
 		}
 	}
 
-	const signalParts = group ? [group, linkId] : [linkId];
+	const signalParts = group ? [group, linkKey] : [linkKey];
 
 	return {
 		pairKey: sourcePairKey,

package/src/components/overlay/helpers/get-active-overlay.ts

@@ -4,52 +4,24 @@ type StackScene = BaseStackScene;
 
 import { isOverlayVisible } from "../../../utils/overlay/visibility";
 
-export type FloatOverlayActivity = "active" | "inert" | "inactive" | "closing";
-
 export type FloatOverlayEntry = {
 	scene: StackScene;
 	overlayIndex: number;
-	activity: FloatOverlayActivity;
 };
 
 export type FloatOverlayTransitionEntry = FloatOverlayEntry & {
 	driverScene: StackScene;
 };
 
-type OverlayCandidate = Omit<FloatOverlayEntry, "activity">;
-
-const resolveOverlayActivity = (
-	scene: StackScene,
-	distanceFromTop: number,
-): FloatOverlayActivity => {
-	if (distanceFromTop === 0 && scene.activity === "closing") {
-		return "closing";
-	}
-
-	if (distanceFromTop === 0) {
-		return "active";
-	}
-
-	if (distanceFromTop === 1) {
-		return "inert";
-	}
-
-	return "inactive";
-};
-
 /**
- * Finds every visible floating-overlay checkpoint in stack order.
- *
- * The newest checkpoint owns the active overlay. Its immediate predecessor
- * remains visible and inert; all older checkpoints are retained but inactive.
- * This mirrors the screen activity window without making plain screens create
- * a new overlay checkpoint.
+ * Overlay ordering and transition coordination are library-owned. Visibility,
+ * interaction, and presentation are user-owned.
  */
 export function getFloatOverlayStack(
 	scenes: StackScene[],
 	transitionsAlwaysOn: boolean,
 ): FloatOverlayEntry[] {
-	const candidates: OverlayCandidate[] = [];
+	const candidates: FloatOverlayEntry[] = [];
 
 	for (let index = 0; index < scenes.length; index += 1) {
 		const scene = scenes[index];
@@ -64,11 +36,7 @@ export function getFloatOverlayStack(
 		}
 	}
 
-	const topIndex = candidates.length - 1;
-	return candidates.map((candidate, index) => ({
-		...candidate,
-		activity: resolveOverlayActivity(candidate.scene, topIndex - index),
-	}));
+	return candidates;
 }
 
 export function getFloatOverlayTransitions(

package/src/components/overlay/helpers/retain-ready-overlay-resources.ts

@@ -4,6 +4,7 @@ import type { FloatOverlayEntry } from "./get-active-overlay";
 
 export type ReadyOverlayResources = {
 	overlayAnimationStore: ScreenAnimationContextValue;
+	overlaySlots: ScreenSlotContextValue;
 	driverScene: FloatOverlayEntry["scene"];
 	driverAnimationStore: ScreenAnimationContextValue;
 	driverSlots: ScreenSlotContextValue;
@@ -12,16 +13,23 @@ export type ReadyOverlayResources = {
 export function retainReadyOverlayResources(
 	previous: ReadyOverlayResources | null,
 	overlayAnimationStore: ScreenAnimationContextValue | null,
+	overlaySlots: ScreenSlotContextValue | null,
 	driverScene: FloatOverlayEntry["scene"],
 	driverAnimationStore: ScreenAnimationContextValue | null,
 	driverSlots: ScreenSlotContextValue | null,
 ): ReadyOverlayResources | null {
-	if (!overlayAnimationStore || !driverAnimationStore || !driverSlots) {
+	if (
+		!overlayAnimationStore ||
+		!overlaySlots ||
+		!driverAnimationStore ||
+		!driverSlots
+	) {
 		return previous;
 	}
 
 	if (
 		previous?.overlayAnimationStore === overlayAnimationStore &&
+		previous.overlaySlots === overlaySlots &&
 		previous.driverScene === driverScene &&
 		previous.driverAnimationStore === driverAnimationStore &&
 		previous.driverSlots === driverSlots
@@ -31,6 +39,7 @@ export function retainReadyOverlayResources(
 
 	return {
 		overlayAnimationStore,
+		overlaySlots,
 		driverScene,
 		driverAnimationStore,
 		driverSlots,

package/src/components/overlay/hooks/use-overlay-slot.ts

@@ -108,11 +108,7 @@ export const useOverlaySlot = ({
 			return NO_PROPS;
 		}
 
-		const {
-			pointerEvents: _pointerEvents,
-			teleport: _teleport,
-			...props
-		} = slotProps;
+		const { handoffTarget: _handoffTarget, ...props } = slotProps;
 
 		return props;
 	});

package/src/components/overlay/variations/float-overlay.tsx

@@ -24,16 +24,13 @@ export function FloatOverlay() {
 
 	const overlayTransitions = getFloatOverlayTransitions(overlayStack, scenes);
 
-	return overlayTransitions.map(
-		({ scene, activity, driverScene }, layerIndex) => (
-			<OverlayHost
-				key={scene.route.key}
-				scene={scene}
-				driverScene={driverScene}
-				previousOverlayScene={overlayTransitions[layerIndex - 1]?.scene}
-				activity={activity}
-				layerIndex={layerIndex}
-			/>
-		),
-	);
+	return overlayTransitions.map(({ scene, driverScene }, layerIndex) => (
+		<OverlayHost
+			key={scene.route.key}
+			scene={scene}
+			driverScene={driverScene}
+			previousOverlayScene={overlayTransitions[layerIndex - 1]?.scene}
+			layerIndex={layerIndex}
+		/>
+	));
 }

package/src/components/overlay/variations/overlay-host.tsx

@@ -2,19 +2,19 @@ import { memo, useMemo, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import Animated, { useDerivedValue } from "react-native-reanimated";
 import { snapDescriptorToIndex } from "../../../animation/snap-to";
-import { NavigationScreenProvider } from "../../../providers/navigation/navigation-host.provider";
 import { useOptionalScreenAnimationStore } from "../../../providers/screen/animation";
-import type { ScreenAnimationContextValue } from "../../../providers/screen/animation/animation.provider";
+import {
+	type ScreenAnimationContextValue,
+	ScreenAnimationStoreProvider,
+} from "../../../providers/screen/animation/animation.provider";
 import {
 	type ScreenSlotContextValue,
+	ScreenSlotStoreProvider,
 	useOptionalScreenSlotStore,
 } from "../../../providers/screen/styles/slot.provider";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import type { OverlayProps } from "../../../types/overlay.types";
-import type {
-	FloatOverlayActivity,
-	FloatOverlayEntry,
-} from "../helpers/get-active-overlay";
+import type { FloatOverlayEntry } from "../helpers/get-active-overlay";
 import {
 	type ReadyOverlayResources,
 	retainReadyOverlayResources,
@@ -25,7 +25,6 @@ type OverlayHostProps = {
 	scene: FloatOverlayEntry["scene"];
 	driverScene: FloatOverlayEntry["scene"];
 	previousOverlayScene?: FloatOverlayEntry["scene"];
-	activity: FloatOverlayActivity;
 	layerIndex: number;
 };
 
@@ -33,7 +32,6 @@ export const OverlayHost = memo(function OverlayHost({
 	scene,
 	driverScene,
 	previousOverlayScene,
-	activity,
 	layerIndex,
 }: OverlayHostProps) {
 	const overlayAnimationStore = useOptionalScreenAnimationStore(
@@ -45,6 +43,7 @@ export const OverlayHost = memo(function OverlayHost({
 	const previousOverlayAnimationStore = useOptionalScreenAnimationStore(
 		previousOverlayScene?.route.key ?? scene.route.key,
 	);
+	const overlaySlots = useOptionalScreenSlotStore(scene.route.key);
 	const driverSlots = useOptionalScreenSlotStore(driverScene.route.key);
 	const overlayComponentRef = useRef(scene.descriptor.options.overlay);
 	const OverlayComponent = overlayComponentRef.current;
@@ -52,6 +51,7 @@ export const OverlayHost = memo(function OverlayHost({
 	readyResourcesRef.current = retainReadyOverlayResources(
 		readyResourcesRef.current,
 		overlayAnimationStore,
+		overlaySlots,
 		driverScene,
 		driverAnimationStore,
 		driverSlots,
@@ -66,9 +66,9 @@ export const OverlayHost = memo(function OverlayHost({
 		<ReadyOverlayHost
 			scene={scene}
 			driverScene={readyResources.driverScene}
-			activity={activity}
 			layerIndex={layerIndex}
 			overlayAnimationStore={readyResources.overlayAnimationStore}
+			overlaySlots={readyResources.overlaySlots}
 			driverAnimationStore={readyResources.driverAnimationStore}
 			previousOverlayAnimationStore={
 				previousOverlayScene ? previousOverlayAnimationStore : undefined
@@ -81,6 +81,7 @@ export const OverlayHost = memo(function OverlayHost({
 
 type ReadyOverlayHostProps = OverlayHostProps & {
 	overlayAnimationStore: ScreenAnimationContextValue;
+	overlaySlots: ScreenSlotContextValue;
 	driverAnimationStore: ScreenAnimationContextValue;
 	previousOverlayAnimationStore?: ScreenAnimationContextValue | null;
 	driverSlots: ScreenSlotContextValue;
@@ -92,16 +93,15 @@ type ReadyOverlayHostProps = OverlayHostProps & {
 function ReadyOverlayHost({
 	scene,
 	driverScene,
-	activity,
 	layerIndex,
 	overlayAnimationStore,
+	overlaySlots,
 	driverAnimationStore,
 	previousOverlayAnimationStore,
 	driverSlots,
 	OverlayComponent,
 }: ReadyOverlayHostProps) {
 	const { scenes, focusedIndex, routeKeys, routes } = useBlankStackStore();
-	const descriptor = scene.descriptor;
 	const focusedScene = scenes[focusedIndex] ?? scenes[scenes.length - 1];
 	const focusedDescriptor = focusedScene?.descriptor;
 	const { animatedProps, animatedStyle } = useOverlaySlot({
@@ -147,7 +147,7 @@ function ReadyOverlayHost({
 	return (
 		<Animated.View
 			animatedProps={animatedProps}
-			pointerEvents={activity === "active" ? "box-none" : "none"}
+			pointerEvents="box-none"
 			style={[
 				styles.container,
 				styles.floating,
@@ -156,17 +156,19 @@ function ReadyOverlayHost({
 				animatedStyle,
 			]}
 		>
-			<NavigationScreenProvider
-				navigation={descriptor.navigation}
-				route={descriptor.route}
+			<ScreenAnimationStoreProvider
+				registerGlobally={false}
+				value={overlayAnimationStore}
 			>
-				<View
-					pointerEvents="box-none"
-					style={[StyleSheet.absoluteFill, styles.overlay]}
-				>
-					<OverlayComponent {...overlayProps} />
-				</View>
-			</NavigationScreenProvider>
+				<ScreenSlotStoreProvider registerGlobally={false} value={overlaySlots}>
+					<View
+						pointerEvents="box-none"
+						style={[StyleSheet.absoluteFill, styles.overlay]}
+					>
+						<OverlayComponent {...overlayProps} />
+					</View>
+				</ScreenSlotStoreProvider>
+			</ScreenAnimationStoreProvider>
 		</Animated.View>
 	);
 }

package/src/components/screen-container/layers/content.tsx

@@ -10,6 +10,7 @@ import { ScreenFallbackHost } from "../../boundary/portal/components/boundary-po
 import { useContentLayout } from "../hooks/use-content-layout";
 import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
 import { usesLayerRenderProps } from "./render-component";
+import { SurfaceLayer } from "./surface";
 
 type Props = {
 	children: React.ReactNode;
@@ -50,18 +51,22 @@ export const ContentLayer = memo(
 		const contentProps =
 			animatedContentProps as ScreenContentComponentProps["props"];
 
+		const screenChildren = hasAutoSnapPoint ? (
+			<View collapsable={false} onLayout={handleContentLayout}>
+				{children}
+			</View>
+		) : (
+			children
+		);
+
 		const contentChildren = (
 			<MaybeMaskedNavigationContainer
 				pointerEvents={contentPointerEvents}
 				enabled={isNavigationMaskEnabled}
 			>
-				{hasAutoSnapPoint ? (
-					<View collapsable={false} onLayout={handleContentLayout}>
-						{children}
-					</View>
-				) : (
-					children
-				)}
+				<SurfaceLayer pointerEvents={contentPointerEvents}>
+					{screenChildren}
+				</SurfaceLayer>
 				<ScreenFallbackHost />
 			</MaybeMaskedNavigationContainer>
 		);

package/src/components/screen-container/layers/surface.tsx

@@ -0,0 +1,65 @@
+import { type ComponentType, memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useSlotProps, useSlotStyles } from "../../../providers/screen/styles";
+import type { ScreenSurfaceComponentProps } from "../../../types";
+import { usesLayerRenderProps } from "./render-component";
+
+type Props = {
+	children: React.ReactNode;
+	pointerEvents: "box-none" | undefined;
+};
+
+export const SurfaceLayer = memo(({ children, pointerEvents }: Props) => {
+	const SurfaceComponent = useDescriptorsStore(
+		(store) => store.options.surfaceComponent,
+	);
+
+	const AnimatedSurfaceComponent = useMemo(() => {
+		return SurfaceComponent && !usesLayerRenderProps(SurfaceComponent)
+			? Animated.createAnimatedComponent(SurfaceComponent as ComponentType<any>)
+			: null;
+	}, [SurfaceComponent]);
+
+	const animatedSurfaceStyle = useSlotStyles("surface");
+	const animatedSurfaceProps = useSlotProps("surface");
+	const surfaceStyles = [
+		styles.surface,
+		animatedSurfaceStyle,
+	] as ScreenSurfaceComponentProps["styles"];
+	const surfaceProps =
+		animatedSurfaceProps as ScreenSurfaceComponentProps["props"];
+
+	if (!SurfaceComponent) {
+		return children;
+	}
+
+	if (AnimatedSurfaceComponent) {
+		return (
+			<AnimatedSurfaceComponent
+				style={surfaceStyles}
+				animatedProps={animatedSurfaceProps}
+				pointerEvents={pointerEvents}
+			>
+				{children}
+			</AnimatedSurfaceComponent>
+		);
+	}
+
+	return (
+		<SurfaceComponent
+			styles={surfaceStyles}
+			props={surfaceProps}
+			pointerEvents={pointerEvents}
+		>
+			{children}
+		</SurfaceComponent>
+	);
+});
+
+const styles = StyleSheet.create({
+	surface: {
+		flex: 1,
+	},
+});