react-native-screen-transitions 3.0.0-beta.9 → 3.0.0-rc.2

package/src/blank-stack/components/StackView.tsx

@@ -4,10 +4,11 @@ import {
 	NavigationRouteContext,
 } from "@react-navigation/native";
 import * as React from "react";
+import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { ScreenContainer } from "react-native-screens";
 import { BlankStackScreenLifecycleController } from "../../shared/components/controllers/screen-lifecycle";
-import { ScreenTransitionProvider } from "../../shared/providers/screen-transition-provider";
+import { ScreenTransitionProvider } from "../../shared/providers/screen-transition.provider";
 import type { BlankStackDescriptor } from "../types";
 import { withStackNavigationProvider } from "../utils/with-stack-navigation";
 import { Overlay } from "./Overlay";
@@ -49,7 +50,7 @@ export const StackView = withStackNavigationProvider(
 			<GestureHandlerRootView>
 				<SafeAreaProviderCompat>
 					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-					<ScreenContainer style={{ flex: 1 }}>
+					<ScreenContainer style={styles.container}>
 						{scenes.map((scene, sceneIndex) => {
 							const descriptor = scene.descriptor;
 							const route = scene.route;
@@ -101,3 +102,7 @@ export const StackView = withStackNavigationProvider(
 		);
 	},
 );
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});

package/src/blank-stack/hooks/use-overlay-animation.tsx

@@ -2,10 +2,10 @@ import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import { type DerivedValue, useDerivedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useSharedValueState } from "../../shared/hooks/use-shared-value-state";
-import { useKeys } from "../../shared/providers/keys";
-import { AnimationStore } from "../../shared/stores/animation-store";
-import type { OverlayInterpolationProps } from "../../shared/types/animation";
+import { useSharedValueState } from "../../shared/hooks/reanimated/use-shared-value-state";
+import { useKeys } from "../../shared/providers/keys.provider";
+import { AnimationStore } from "../../shared/stores/animation.store";
+import type { OverlayInterpolationProps } from "../../shared/types/animation.types";
 import { useStackNavigationContext } from "../utils/with-stack-navigation";
 
 /**
@@ -51,21 +51,21 @@ export const useOverlayAnimation = (): {
 		return total;
 	}, [progressValues]);
 
-	const optimisticActiveIndexValue = useDerivedValue(() => {
-		"worklet";
-
-		const activeIndex = progressValues.length - 1;
+	const optimisticActiveIndex = useSharedValueState(
+		useDerivedValue(() => {
+			"worklet";
 
-		const isOneDismissing = Number(
-			progressValues.some((value) => value.closing.value > 0),
-		);
+			const activeIndex = progressValues.length - 1;
 
-		const optimisticIndex = activeIndex - isOneDismissing;
+			const isOneDismissing = Number(
+				progressValues.some((value) => value.closing.value > 0),
+			);
 
-		return optimisticIndex;
-	});
+			const optimisticIndex = activeIndex - isOneDismissing;
 
-	const optimisticActiveIndex = useSharedValueState(optimisticActiveIndexValue);
+			return optimisticIndex;
+		}),
+	);
 
 	const screen = useWindowDimensions();
 

package/src/blank-stack/index.ts

@@ -1,5 +1,5 @@
-export { createBlankStackNavigator } from "../blank-stack/navigators/createBlankStackNavigator";
 export { useOverlayAnimation } from "../blank-stack/hooks/use-overlay-animation";
+export { createBlankStackNavigator } from "../blank-stack/navigators/createBlankStackNavigator";
 export type {
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,

package/src/blank-stack/types.ts

@@ -12,18 +12,18 @@ import type {
 	Theme,
 } from "@react-navigation/native";
 import type { DerivedValue } from "react-native-reanimated";
-import type { EdgeInsets } from "react-native-safe-area-context";
 import type { ScreenProps } from "react-native-screens";
+import type { ScreenTransitionConfig } from "../shared";
 import type {
 	OverlayInterpolationProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	TransitionSpec,
-} from "../shared/types/animation";
+} from "../shared/types/animation.types";
 import type {
 	GestureActivationArea,
 	GestureDirection,
-} from "../shared/types/gesture";
+} from "../shared/types/gesture.types";
 
 export type BlankStackNavigationEventMap = {
 	/**
@@ -95,65 +95,41 @@ export type BlankStackNavigationConfig = {};
 
 export type BlankStackOverlayProps = {
 	/**
-	 * Options for the back button.
+	 * Route of the currently focused screen in the stack.
 	 */
-	back?: {
-		/**
-		 * Title of the previous screen.
-		 */
-		title: string;
-	};
+	focusedRoute: Route<string>;
+
 	/**
-	 * Route object for the current screen.
+	 * Index of the focused route in the stack.
 	 */
-	route: Route<string>;
+	focusedIndex: number;
+
 	/**
-	 * Route object for the currently focused screen in the stack.
+	 * Options passed to the overlay component.
 	 */
-	focusedRoute: Route<string>;
+	overlayOptions?: {
+		title?: string;
+		subtitle?: string;
+		[key: string]: unknown;
+	};
+
 	/**
 	 * Navigation prop for the overlay.
 	 */
 	navigation: BlankStackNavigationProp<ParamListBase>;
-	/**
-	 * Safe area insets for the screen.
-	 */
-	insets: EdgeInsets;
+
 	/**
 	 * Animation values for the overlay.
 	 */
 	overlayAnimation: DerivedValue<OverlayInterpolationProps>;
+
 	/**
 	 * Animation values for the screen.
 	 */
 	screenAnimation: DerivedValue<ScreenInterpolationProps>;
-	/**
-	 * Index of the active route
-	 */
-	focusedIndex: number;
 };
 
-export type BlankStackScreenTransitionConfig = {
-	/**
-	 * The user-provided function to calculate styles based on animation progress.
-	 */
-	screenStyleInterpolator?: ScreenStyleInterpolator;
-	/**
-	 * The Reanimated animation config for opening and closing transitions.
-	 */
-	transitionSpec?: TransitionSpec;
-	/**
-	 * Whether the gesture is enabled.
-	 */
-	gestureEnabled?: boolean;
-	/**
-	 * The direction of the swipe gesture used to dismiss the screen.
-	 */
-	gestureDirection?: GestureDirection | GestureDirection[];
-	/**
-	 * How much the gesture's final velocity impacts the dismiss decision.
-	 */
-	gestureVelocityImpact?: number;
+export 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.
@@ -161,18 +137,6 @@ export type BlankStackScreenTransitionConfig = {
 	 * Defaults to `false` for the last screen for modals, otherwise `true`.
 	 */
 	detachPreviousScreen?: boolean;
-	/**
-	 * Distance threshold for gesture recognition throughout the screen.
-	 */
-	gestureResponseDistance?: number;
-	/**
-	 * Whether the gesture drives the progress.
-	 */
-	gestureDrivesProgress?: boolean;
-	/**
-	 * The area of the screen where the gesture is activated.
-	 */
-	gestureActivationArea?: GestureActivationArea;
 };
 
 export type BlankStackNavigationOptions = BlankStackScreenTransitionConfig & {
@@ -180,6 +144,7 @@ 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)
@@ -187,6 +152,7 @@ export type BlankStackNavigationOptions = BlankStackScreenTransitionConfig & {
 	 * @default 'screen'
 	 */
 	overlayMode?: "float" | "screen";
+
 	/**
 	 * Whether to show the overlay. The overlay is shown by default.
 	 * Setting this to `false` hides the overlay.
@@ -194,56 +160,14 @@ export type BlankStackNavigationOptions = BlankStackScreenTransitionConfig & {
 	overlayShown?: boolean;
 
 	/**
-	 * Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
-	 *
-	 * @platform ios
-	 */
-	autoHideHomeIndicator?: boolean;
-	/**
-	 * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
-	 *
-	 * @platform ios
-	 */
-	keyboardHandlingEnabled?: boolean;
-	/**
-	 * Sets the visibility of the navigation bar. Defaults to `false`.
-	 *
-	 * @platform android
-	 */
-	navigationBarHidden?: boolean;
-	/**
-	 * Sets the status bar animation (similar to the `StatusBar` component).
-	 * On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar.
-	 * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
-	 *
-	 * Defaults to `fade` on iOS and `none` on Android.
-	 *
-	 * Only supported on Android and iOS.
-	 *
-	 * @platform android, ios
-	 */
-	statusBarAnimation?: ScreenProps["statusBarAnimation"];
-	/**
-	 * Whether the status bar should be hidden on this screen.
-	 * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
-	 *
-	 * Only supported on Android and iOS.
-	 *
-	 * @platform android, ios
+	 * Options passed to the overlay component.
 	 */
-	statusBarHidden?: boolean;
-	/**
-	 * Sets the status bar color (similar to the `StatusBar` component).
-	 * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
-	 * `auto` and `inverted` are supported only on iOS. On Android, they will fallback to `light`.
-	 *
-	 * Defaults to `auto` on iOS and `light` on Android.
-	 *
-	 * Only supported on Android and iOS.
-	 *
-	 * @platform android, ios
-	 */
-	statusBarStyle?: ScreenProps["statusBarStyle"];
+	overlayOptions?: {
+		title?: string;
+		subtitle?: string;
+		[key: string]: unknown;
+	};
+
 	/**
 	 * 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/blank-stack/utils/with-stack-navigation/{_hooks → hooks}/use-stack-navigation-state.tsx

@@ -3,10 +3,10 @@ import { useLayoutEffect, useState } from "react";
 import useStableCallback from "../../../../shared/hooks/use-stable-callback";
 import type { BlankStackDescriptorMap } from "../../../types";
 import type { StackNavigationContextProps } from "../_types";
-import { areDescriptorsEqual } from "../_utils/are-descriptors-equal";
-import { composeDescriptors } from "../_utils/compose-descriptors";
-import { haveSameRouteKeys } from "../_utils/have-same-route-keys";
-import { routesAreIdentical } from "../_utils/routes-are-identical";
+import { areDescriptorsEqual } from "../helpers/are-descriptors-equal";
+import { composeDescriptors } from "../helpers/compose-descriptors";
+import { haveSameRouteKeys } from "../helpers/have-same-route-keys";
+import { routesAreIdentical } from "../helpers/routes-are-identical";
 import { useClosingRouteKeys } from "./use-closing-route-keys";
 import { usePrevious } from "./use-previous";
 

package/src/blank-stack/utils/with-stack-navigation/index.tsx

@@ -1,11 +1,11 @@
 import { type ComponentType, createContext, useContext, useMemo } from "react";
 import type { BlankStackScene } from "../../types";
-import { useStackNavigationState } from "./_hooks/use-stack-navigation-state";
+import { useStackNavigationState } from "./hooks/use-stack-navigation-state";
 import type {
 	StackNavigationContextProps,
 	StackNavigationContextValue,
 } from "./_types";
-import { calculateActiveScreensLimit } from "./_utils/calculate-active-screens-limit";
+import { calculateActiveScreensLimit } from "./helpers/calculate-active-screens-limit";
 
 export const StackNavigationContext =
 	createContext<StackNavigationContextValue | null>(null);

package/src/native-stack/types.ts

@@ -22,7 +22,7 @@ import type {
 	ScreenStackHeaderConfigProps,
 	SearchBarProps,
 } from "react-native-screens";
-import type { ScreenTransitionConfig } from "../shared/types/core";
+import type { ScreenTransitionConfig } from "../shared/types/core.types";
 
 export type Layout = {
 	width: number;
@@ -143,7 +143,14 @@ export type NativeStackHeaderLeftProps = NativeStackHeaderRightProps & {
 	href?: string;
 };
 
-export type NativeStackNavigationOptions = ScreenTransitionConfig & {
+export type NativeStackScreenTransitionConfig = ScreenTransitionConfig & {
+	/**
+	 * Whether to enable transitions. It sets the presentation to containedTransparentModal, animation none, and headerShown to false.
+	 */
+	enableTransitions?: boolean;
+};
+
+export type NativeStackNavigationOptions = NativeStackScreenTransitionConfig & {
 	/**
 	 * String that can be displayed in the header as a fallback for `headerTitle`.
 	 */

package/src/native-stack/views/NativeStackView.native.tsx

@@ -34,7 +34,7 @@ import {
 	ScreenStackItem,
 } from "react-native-screens";
 import { NativeStackScreenLifecycleController } from "../../shared/components/controllers/screen-lifecycle";
-import { ScreenTransitionProvider } from "../../shared/providers/screen-transition-provider";
+import { ScreenTransitionProvider } from "../../shared/providers/screen-transition.provider";
 import type {
 	NativeStackDescriptor,
 	NativeStackDescriptorMap,
@@ -513,11 +513,13 @@ export function NativeStackView({
 			return acc;
 		}, {});
 
+	const routes = state.routes.concat(state.preloadedRoutes);
+
 	return (
 		<GestureHandlerRootView>
 			<SafeAreaProviderCompat>
 				<ScreenStack style={styles.container}>
-					{state.routes.concat(state.preloadedRoutes).map((route, index) => {
+					{routes.map((route, index) => {
 						const descriptor =
 							descriptors[route.key] ?? preloadedDescriptors[route.key];
 						const isFocused = state.index === index;

package/src/shared/components/controllers/screen-lifecycle.tsx

@@ -1,16 +1,16 @@
 import { useEffect, useLayoutEffect } from "react";
-import { useAnimatedReaction } from "react-native-reanimated";
+import { useAnimatedReaction, useDerivedValue } from "react-native-reanimated";
 import type { BlankStackDescriptor } from "../../../blank-stack/types";
 import { useStackNavigationContext } from "../../../blank-stack/utils/with-stack-navigation";
 import type { NativeStackDescriptor } from "../../../native-stack/types";
 import { useParentGestureRegistry } from "../../hooks/gestures/use-parent-gesture-registry";
-import { useDerivedValueState } from "../../hooks/use-derived-value-state";
+import { useSharedValueState } from "../../hooks/reanimated/use-shared-value-state";
 import useStableCallback from "../../hooks/use-stable-callback";
-import { useGestureContext } from "../../providers/gestures";
-import { useKeys } from "../../providers/keys";
-import { AnimationStore } from "../../stores/animation-store";
-import { resetStoresForScreen } from "../../stores/utils/reset-stores-for-screen";
+import { useGestureContext } from "../../providers/gestures.provider";
+import { useKeys } from "../../providers/keys.provider";
+import { AnimationStore } from "../../stores/animation.store";
 import { startScreenTransition } from "../../utils/animation/start-screen-transition";
+import { resetStoresForScreen } from "../../utils/reset-stores-for-screen";
 
 export interface ScreenLifecycleProps {
 	children: React.ReactNode;
@@ -25,10 +25,12 @@ export const NativeStackScreenLifecycleController = ({
 	const { current } = useKeys<NativeStackDescriptor>();
 	const { parentContext } = useGestureContext();
 
-	const isParentDismissingViaGesture = useDerivedValueState(() => {
-		"worklet";
-		return parentContext?.gestureAnimationValues.isDismissing?.value ?? false;
-	});
+	const isParentDismissingViaGesture = useSharedValueState(
+		useDerivedValue(() => {
+			"worklet";
+			return parentContext?.gestureAnimationValues.isDismissing?.value ?? false;
+		}),
+	);
 
 	const animations = AnimationStore.getAll(current.route.key);
 

package/src/shared/components/create-transition-aware-component.tsx

@@ -4,11 +4,11 @@ import type { View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, { runOnUI, useAnimatedRef } from "react-native-reanimated";
 import { useAssociatedStyles } from "../hooks/animation/use-associated-style";
-import { useBoundsRegistry } from "../hooks/bounds/use-bound-registry";
 import { useScrollRegistry } from "../hooks/gestures/use-scroll-registry";
-import { useGestureContext } from "../providers/gestures";
-import type { TransitionAwareProps } from "../types/core";
-import type { Any } from "../types/utils";
+import { useGestureContext } from "../providers/gestures.provider";
+import { RegisterBoundsProvider } from "../providers/register-bounds.provider";
+import type { TransitionAwareProps } from "../types/core.types";
+import type { Any } from "../types/utils.types";
 
 interface CreateTransitionAwareComponentOptions {
 	isScrollable?: boolean;
@@ -61,30 +61,26 @@ export function createTransitionAwareComponent<P extends object>(
 			style,
 		});
 
-		const {
-			handleInitialLayout,
-			captureActiveOnPress,
-			MeasurementSyncProvider,
-		} = useBoundsRegistry({
-			sharedBoundTag,
-			animatedRef,
-			style,
-			onPress,
-		});
-
 		return (
-			<MeasurementSyncProvider>
-				<AnimatedComponent
-					{...(rest as Any)}
-					ref={animatedRef}
-					style={[style, associatedStyles]}
-					onPress={captureActiveOnPress}
-					onLayout={runOnUI(handleInitialLayout)}
-					collapsable={!sharedBoundTag}
-				>
-					{children}
-				</AnimatedComponent>
-			</MeasurementSyncProvider>
+			<RegisterBoundsProvider
+				animatedRef={animatedRef}
+				style={style}
+				onPress={onPress}
+				sharedBoundTag={sharedBoundTag}
+			>
+				{({ captureActiveOnPress, handleInitialLayout }) => (
+					<AnimatedComponent
+						{...(rest as Any)}
+						ref={animatedRef}
+						style={[style, associatedStyles]}
+						onPress={captureActiveOnPress}
+						onLayout={runOnUI(handleInitialLayout)}
+						collapsable={!sharedBoundTag}
+					>
+						{children}
+					</AnimatedComponent>
+				)}
+			</RegisterBoundsProvider>
 		);
 	});
 

package/src/shared/components/root-transition-aware.tsx

@@ -2,7 +2,7 @@ import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { NO_STYLES } from "../constants";
-import { useTransitionStyles } from "../providers/transition-styles";
+import { useTransitionStyles } from "../providers/transition-styles.provider";
 
 type Props = {
 	children: React.ReactNode;