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

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,
+	},
+});

package/src/components/stack-view.tsx

@@ -1,5 +1,4 @@
-import { memo, type ReactNode } from "react";
-import { NavigationScreenProvider } from "../providers/navigation/navigation-host.provider";
+import { memo } from "react";
 import { ScreenComposer } from "../providers/screen/screen-composer";
 import {
 	BlankStackProvider,
@@ -18,28 +17,6 @@ interface RouteKeyProps {
 	routeKey: string;
 }
 
-const BlankNavigationProvider = memo(function BlankNavigationProvider({
-	children,
-	routeKey,
-}: RouteKeyProps & { children: ReactNode }) {
-	const navigation = useBlankStackStore(
-		(store) => store.scenesByKey[routeKey]?.descriptor.navigation,
-	);
-	const route = useBlankStackStore(
-		(store) => store.scenesByKey[routeKey]?.route,
-	);
-
-	if (!navigation || !route) {
-		throw new Error(`Blank stack scene "${routeKey}" was not found.`);
-	}
-
-	return (
-		<NavigationScreenProvider navigation={navigation} route={route}>
-			{children}
-		</NavigationScreenProvider>
-	);
-});
-
 const BlankSceneContent = memo(function BlankSceneContent({
 	routeKey,
 }: RouteKeyProps) {
@@ -47,27 +24,21 @@ const BlankSceneContent = memo(function BlankSceneContent({
 		(store) => store?.scenesByKey[routeKey]?.descriptor.render,
 	);
 
-	return render?.() ?? null;
+	return render?.();
 });
 
 const BlankSceneRow = memo(function BlankSceneRow({ routeKey }: RouteKeyProps) {
 	return (
-		<BlankNavigationProvider routeKey={routeKey}>
-			<ActivityScreen routeKey={routeKey}>
-				<ScreenComposer routeKey={routeKey}>
-					<BlankSceneContent routeKey={routeKey} />
-				</ScreenComposer>
-			</ActivityScreen>
-		</BlankNavigationProvider>
+		<ActivityScreen routeKey={routeKey}>
+			<ScreenComposer routeKey={routeKey}>
+				<BlankSceneContent routeKey={routeKey} />
+			</ScreenComposer>
+		</ActivityScreen>
 	);
 });
 
-const EMPTY_ROUTE_KEYS: string[] = [];
-
 const StackViewContent = memo(function StackViewContent() {
-	const routeKeys = useBlankStackStore(
-		(store) => store?.routeKeys ?? EMPTY_ROUTE_KEYS,
-	);
+	const routeKeys = useBlankStackStore((store) => store?.routeKeys);
 
 	return (
 		<PortalProvider>
@@ -89,7 +60,6 @@ export const StackView = memo(function StackView({
 	state,
 	navigation,
 	descriptors,
-	describe,
 }: StackViewProps) {
 	return (
 		<StackCoreProvider
@@ -101,7 +71,6 @@ export const StackView = memo(function StackView({
 				state={state}
 				navigation={navigation}
 				descriptors={descriptors}
-				describe={describe}
 			>
 				<StackViewContent />
 			</BlankStackProvider>

package/src/configs/index.ts

@@ -1,9 +1,6 @@
 import {
 	DraggableCard,
 	ElasticCard,
-	SharedAppleMusic,
-	SharedIGImage,
-	SharedXImage,
 	SlideFromBottom,
 	SlideFromTop,
 	ZoomIn,
@@ -23,7 +20,4 @@ export const Presets = {
 	SlideFromBottom,
 	DraggableCard,
 	ElasticCard,
-	SharedIGImage,
-	SharedAppleMusic,
-	SharedXImage,
 };