react-native-screen-transitions 3.0.0 → 3.2.0-beta.0

package/src/blank-stack/types.ts

@@ -11,12 +11,8 @@ import type {
 	StackRouterOptions,
 	Theme,
 } from "@react-navigation/native";
-import type { DerivedValue } from "react-native-reanimated";
 import type { ScreenTransitionConfig } from "../shared";
-import type {
-	OverlayInterpolationProps,
-	ScreenInterpolationProps,
-} from "../shared/types/animation.types";
+import type { OverlayProps } from "../shared/types/overlay.types";
 
 export type BlankStackNavigationEventMap = {};
 
@@ -62,46 +58,17 @@ export type BlankStackScene = {
 };
 
 // We want it to be an empty object because navigator does not have any additional props
-export type BlankStackNavigationConfig = {};
+type BlankStackNavigationConfig = {};
 
-export type BlankStackOverlayProps = {
-	/**
-	 * Route of the currently focused screen in the stack.
-	 */
-	focusedRoute: Route<string>;
-
-	/**
-	 * Index of the focused route in the stack.
-	 */
-	focusedIndex: number;
-
-	/**
-	 * All routes currently in the stack.
-	 */
-	routes: Route<string>[];
-
-	/**
-	 * Custom metadata from the focused screen's options.
-	 */
-	meta?: Record<string, unknown>;
-
-	/**
-	 * Navigation prop for the overlay.
-	 */
-	navigation: BlankStackNavigationProp<ParamListBase>;
-
-	/**
-	 * Animation values for the overlay.
-	 */
-	overlayAnimation: DerivedValue<OverlayInterpolationProps>;
-
-	/**
-	 * Animation values for the screen.
-	 */
-	screenAnimation: DerivedValue<ScreenInterpolationProps>;
-};
+/**
+ * Props passed to overlay components in blank-stack.
+ * Uses the shared OverlayProps type with blank-stack's navigation type.
+ */
+export type BlankStackOverlayProps = OverlayProps<
+	BlankStackNavigationProp<ParamListBase>
+>;
 
-export type BlankStackScreenTransitionConfig = ScreenTransitionConfig & {
+type BlankStackScreenTransitionConfig = ScreenTransitionConfig & {
 	/**
 	 * Whether to detach the previous screen from the view hierarchy to save memory.
 	 * Set it to `false` if you need the previous screen to be seen through the active screen.
@@ -111,25 +78,6 @@ export type BlankStackScreenTransitionConfig = ScreenTransitionConfig & {
 };
 
 export type BlankStackNavigationOptions = BlankStackScreenTransitionConfig & {
-	/**
-	 * Function that given `OverlayProps` returns a React Element to display as a overlay.
-	 */
-	overlay?: (props: BlankStackOverlayProps) => React.ReactNode;
-
-	/**
-	 * Layout: How the Overlay is positioned
-	 * - 'float': Single persistent overlay above all screens (like iOS)
-	 * - 'screen': Per-screen overlay that transitions with content
-	 * @default 'screen'
-	 */
-	overlayMode?: "float" | "screen";
-
-	/**
-	 * Whether to show the overlay. The overlay is shown by default.
-	 * Setting this to `false` hides the overlay.
-	 */
-	overlayShown?: boolean;
-
 	/**
 	 * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
 	 * Defaults to `true` when `enableFreeze()` is run at the top of the application.

package/src/component-stack/components/component-view.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { Overlay } from "../../shared/components/overlay";
+import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
+import { withStackCore } from "../../shared/providers/stack/core.provider";
+import { withManagedStack } from "../../shared/providers/stack/managed.provider";
+import { ComponentStackScreenLifecycleController } from "../controllers/component-stack-lifecycle";
+import type { ComponentNavigation, ComponentStackDescriptor } from "../types";
+import { Screen } from "./screens";
+
+type SceneViewProps = {
+	descriptor: ComponentStackDescriptor;
+};
+
+const SceneView = React.memo(function SceneView({
+	descriptor,
+}: SceneViewProps) {
+	return (
+		<>
+			{descriptor.options.overlayMode === "screen" && <Overlay.Screen />}
+			{descriptor.render()}
+		</>
+	);
+});
+
+export const ComponentView = withStackCore(
+	{ TRANSITIONS_ALWAYS_ON: true },
+	withManagedStack<ComponentStackDescriptor, ComponentNavigation>(
+		({ scenes, shouldShowFloatOverlay }) => {
+			return (
+				<Fragment>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+					<Overlay.Container>
+						<View style={styles.container}>
+							{scenes.map((scene, sceneIndex) => {
+								const descriptor = scene.descriptor;
+								const route = scene.route;
+
+								const previousDescriptor = scenes[sceneIndex - 1]?.descriptor;
+								const nextDescriptor = scenes[sceneIndex + 1]?.descriptor;
+
+								return (
+									<Screen
+										key={route.key}
+										index={sceneIndex}
+										routeKey={route.key}
+									>
+										<ScreenComposer
+											previous={previousDescriptor}
+											current={descriptor}
+											next={nextDescriptor}
+											LifecycleController={
+												ComponentStackScreenLifecycleController
+											}
+										>
+											<SceneView key={route.key} descriptor={descriptor} />
+										</ScreenComposer>
+									</Screen>
+								);
+							})}
+						</View>
+					</Overlay.Container>
+				</Fragment>
+			);
+		},
+	),
+);
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});

package/src/component-stack/components/screens.tsx

@@ -0,0 +1,86 @@
+import type * as React from "react";
+import { StyleSheet } from "react-native";
+import Animated, {
+	interpolate,
+	useAnimatedProps,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { useManagedStackContext } from "../../shared/providers/stack/managed.provider";
+import { AnimationStore } from "../../shared/stores/animation.store";
+
+interface ScreenProps {
+	routeKey: string;
+	index: number;
+	children: React.ReactNode;
+}
+
+enum ScreenActivity {
+	INACTIVE = 0,
+	TRANSITIONING_OR_BELOW_TOP = 1,
+	ON_TOP = 2,
+}
+
+const EPSILON = 1e-5;
+
+export const Screen = ({ routeKey, index, children }: ScreenProps) => {
+	const { activeScreensLimit, routes } = useManagedStackContext();
+	const routesLength = routes.length;
+
+	const sceneProgress = AnimationStore.getAnimation(routeKey, "progress");
+	const sceneClosing = AnimationStore.getAnimation(routeKey, "closing");
+	const screenActivity = useSharedValue<ScreenActivity>(
+		ScreenActivity.TRANSITIONING_OR_BELOW_TOP,
+	);
+
+	useDerivedValue(() => {
+		if (!sceneProgress) {
+			screenActivity.set(ScreenActivity.TRANSITIONING_OR_BELOW_TOP);
+			return;
+		}
+
+		if (index < routesLength - activeScreensLimit - 1) {
+			screenActivity.set(ScreenActivity.INACTIVE);
+		} else {
+			const outputValue =
+				index === routesLength - 1
+					? ScreenActivity.ON_TOP
+					: index >= routesLength - activeScreensLimit
+						? ScreenActivity.TRANSITIONING_OR_BELOW_TOP
+						: ScreenActivity.INACTIVE;
+
+			const v = interpolate(
+				sceneProgress.get(),
+				[0, 1 - EPSILON, 1],
+				[1, 1, outputValue],
+				"clamp",
+			);
+
+			const next = Math.trunc(v) ?? ScreenActivity.TRANSITIONING_OR_BELOW_TOP;
+
+			if (next !== screenActivity.get()) {
+				screenActivity.set(next);
+			}
+		}
+	});
+
+	const animatedProps = useAnimatedProps(() => {
+		// const activity = screenActivity.get();
+		return {
+			// activityState: activity,
+			// shouldFreeze: activity === ScreenActivity.INACTIVE && shouldFreeze,
+			pointerEvents: sceneClosing.get()
+				? ("none" as const)
+				: ("box-none" as const),
+		};
+	});
+
+	return (
+		<Animated.View
+			style={StyleSheet.absoluteFill}
+			animatedProps={animatedProps}
+		>
+			{children}
+		</Animated.View>
+	);
+};

package/src/component-stack/controllers/component-stack-lifecycle.tsx

@@ -0,0 +1,80 @@
+import { useLayoutEffect } from "react";
+import { runOnJS, useAnimatedReaction } from "react-native-reanimated";
+import { useHighRefreshRate } from "../../shared/hooks/animation/use-high-refresh-rate";
+import useStableCallback from "../../shared/hooks/use-stable-callback";
+import { useKeys } from "../../shared/providers/screen/keys.provider";
+import { useManagedStackContext } from "../../shared/providers/stack/managed.provider";
+import { AnimationStore } from "../../shared/stores/animation.store";
+import { startScreenTransition } from "../../shared/utils/animation/start-screen-transition";
+import { resetStoresForScreen } from "../../shared/utils/reset-stores-for-screen";
+import type { ComponentStackDescriptor } from "../types";
+
+interface Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Lifecycle controller built out for Component Stack implementation.
+ * Uses the shared ManagedStackContext for closing route handling.
+ */
+export const ComponentStackScreenLifecycleController = ({
+	children,
+}: Props) => {
+	const { current } = useKeys<ComponentStackDescriptor>();
+	const { handleCloseRoute, closingRouteKeysShared } = useManagedStackContext();
+
+	const animations = AnimationStore.getAll(current.route.key);
+
+	const { deactivateHighRefreshRate, activateHighRefreshRate } =
+		useHighRefreshRate(current);
+
+	const handleInitialize = useStableCallback(() => {
+		activateHighRefreshRate();
+		startScreenTransition({
+			target: "open",
+			spec: current.options.transitionSpec,
+			animations,
+			onAnimationFinish: deactivateHighRefreshRate,
+		});
+	});
+
+	const handleCleanup = useStableCallback(() => {
+		resetStoresForScreen(current);
+	});
+
+	const handleCloseEnd = useStableCallback((finished: boolean) => {
+		deactivateHighRefreshRate();
+		if (!finished) {
+			return;
+		}
+		handleCloseRoute({ route: current.route });
+	});
+
+	useAnimatedReaction(
+		() => ({
+			keys: closingRouteKeysShared.value,
+		}),
+		({ keys }) => {
+			if (!keys.includes(current.route.key)) {
+				return;
+			}
+
+			runOnJS(activateHighRefreshRate)();
+			startScreenTransition({
+				target: "close",
+				spec: current.options.transitionSpec,
+				animations,
+				onAnimationFinish: handleCloseEnd,
+			});
+		},
+	);
+
+	useLayoutEffect(() => {
+		handleInitialize();
+		return () => {
+			handleCleanup();
+		};
+	}, [handleInitialize, handleCleanup]);
+
+	return children;
+};