react-native-screen-transitions 3.9.0 → 4.0.0-alpha.0

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

@@ -1,214 +0,0 @@
-import {
-	getHeaderTitle,
-	Header,
-	HeaderBackButton,
-	HeaderBackContext,
-	SafeAreaProviderCompat,
-	Screen,
-	useHeaderHeight,
-} from "@react-navigation/elements";
-import {
-	type ParamListBase,
-	type RouteProp,
-	type StackNavigationState,
-	useLinkBuilder,
-} from "@react-navigation/native";
-import * as React from "react";
-import { Animated, Image, StyleSheet, View } from "react-native";
-
-import type {
-	NativeStackDescriptor,
-	NativeStackDescriptorMap,
-	NativeStackNavigationHelpers,
-} from "../types";
-import { AnimatedHeaderHeightContext } from "../utils/useAnimatedHeaderHeight";
-
-type Props = {
-	state: StackNavigationState<ParamListBase>;
-	// This is used for the native implementation of the stack.
-	navigation: NativeStackNavigationHelpers;
-	descriptors: NativeStackDescriptorMap;
-	describe: (
-		route: RouteProp<ParamListBase>,
-		placeholder: boolean,
-	) => NativeStackDescriptor;
-};
-
-const TRANSPARENT_PRESENTATIONS = [
-	"transparentModal",
-	"containedTransparentModal",
-];
-
-export function NativeStackView({ state, descriptors, describe }: Props) {
-	const parentHeaderBack = React.useContext(HeaderBackContext);
-	const { buildHref } = useLinkBuilder();
-
-	const preloadedDescriptors =
-		state.preloadedRoutes.reduce<NativeStackDescriptorMap>((acc, route) => {
-			acc[route.key] = acc[route.key] || describe(route, true);
-			return acc;
-		}, {});
-
-	return (
-		<SafeAreaProviderCompat>
-			{state.routes.concat(state.preloadedRoutes).map((route, i) => {
-				const isFocused = state.index === i;
-				const previousKey = state.routes[i - 1]?.key;
-				const nextKey = state.routes[i + 1]?.key;
-				const previousDescriptor = previousKey
-					? descriptors[previousKey]
-					: undefined;
-				const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-				const { options, navigation, render } =
-					descriptors[route.key] ?? preloadedDescriptors[route.key];
-
-				const headerBack = previousDescriptor
-					? {
-							title: getHeaderTitle(
-								previousDescriptor.options,
-								previousDescriptor.route.name,
-							),
-							href: buildHref(
-								previousDescriptor.route.name,
-								previousDescriptor.route.params,
-							),
-						}
-					: parentHeaderBack;
-
-				const canGoBack = headerBack != null;
-
-				const {
-					header,
-					headerShown,
-					headerBackImageSource,
-					headerLeft,
-					headerTransparent,
-					headerBackTitle,
-					presentation,
-					contentStyle,
-					...rest
-				} = options;
-
-				const nextPresentation = nextDescriptor?.options.presentation;
-
-				const isPreloaded =
-					preloadedDescriptors[route.key] !== undefined &&
-					descriptors[route.key] === undefined;
-
-				return (
-					<Screen
-						key={route.key}
-						focused={isFocused}
-						route={route}
-						navigation={navigation}
-						headerShown={headerShown}
-						headerTransparent={headerTransparent}
-						header={
-							header !== undefined ? (
-								header({
-									back: headerBack,
-									options,
-									route,
-									navigation,
-								})
-							) : (
-								<Header
-									{...rest}
-									back={headerBack}
-									title={getHeaderTitle(options, route.name)}
-									headerLeft={
-										typeof headerLeft === "function"
-											? ({ label, ...rest }) =>
-													headerLeft({
-														...rest,
-														label: headerBackTitle ?? label,
-													})
-											: headerLeft === undefined && canGoBack
-												? ({ tintColor, label, ...rest }) => (
-														<HeaderBackButton
-															{...rest}
-															label={headerBackTitle ?? label}
-															tintColor={tintColor}
-															backImage={
-																headerBackImageSource !== undefined
-																	? () => (
-																			<Image
-																				source={headerBackImageSource}
-																				resizeMode="contain"
-																				tintColor={tintColor}
-																				style={styles.backImage}
-																			/>
-																		)
-																	: undefined
-															}
-															onPress={navigation.goBack}
-														/>
-													)
-												: headerLeft
-									}
-									headerTransparent={headerTransparent}
-								/>
-							)
-						}
-						style={[
-							StyleSheet.absoluteFill,
-							{
-								display:
-									(isFocused ||
-										(nextPresentation != null &&
-											TRANSPARENT_PRESENTATIONS.includes(nextPresentation))) &&
-									!isPreloaded
-										? "flex"
-										: "none",
-							},
-							presentation != null &&
-							TRANSPARENT_PRESENTATIONS.includes(presentation)
-								? { backgroundColor: "transparent" }
-								: null,
-						]}
-					>
-						<HeaderBackContext.Provider value={headerBack}>
-							<AnimatedHeaderHeightProvider>
-								<View style={[styles.contentContainer, contentStyle]}>
-									{render()}
-								</View>
-							</AnimatedHeaderHeightProvider>
-						</HeaderBackContext.Provider>
-					</Screen>
-				);
-			})}
-		</SafeAreaProviderCompat>
-	);
-}
-
-const AnimatedHeaderHeightProvider = ({
-	children,
-}: {
-	children: React.ReactNode;
-}) => {
-	const headerHeight = useHeaderHeight();
-	const [animatedHeaderHeight] = React.useState(
-		() => new Animated.Value(headerHeight),
-	);
-
-	React.useEffect(() => {
-		animatedHeaderHeight.setValue(headerHeight);
-	}, [animatedHeaderHeight, headerHeight]);
-
-	return (
-		<AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
-			{children}
-		</AnimatedHeaderHeightContext.Provider>
-	);
-};
-
-const styles = StyleSheet.create({
-	contentContainer: {
-		flex: 1,
-	},
-	backImage: {
-		height: 24,
-		width: 24,
-		margin: 3,
-	},
-});

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

@@ -1,295 +0,0 @@
-import { getHeaderTitle, HeaderTitle } from "@react-navigation/elements";
-import { type Route, useLocale, useTheme } from "@react-navigation/native";
-import { Platform, StyleSheet, type TextStyle, View } from "react-native";
-import {
-	isSearchBarAvailableForCurrentPlatform,
-	ScreenStackHeaderBackButtonImage,
-	ScreenStackHeaderCenterView,
-	ScreenStackHeaderLeftView,
-	ScreenStackHeaderRightView,
-	ScreenStackHeaderSearchBarView,
-	SearchBar,
-} from "react-native-screens";
-
-import type { NativeStackNavigationOptions } from "../types";
-import { processFonts } from "./FontProcessor";
-
-type Props = NativeStackNavigationOptions & {
-	headerTopInsetEnabled: boolean;
-	headerHeight: number;
-	headerBack: { title?: string | undefined; href: undefined } | undefined;
-	route: Route<string>;
-};
-
-export function useHeaderConfigProps({
-	headerBackImageSource,
-	headerBackButtonDisplayMode,
-	headerBackButtonMenuEnabled,
-	headerBackTitle,
-	headerBackTitleStyle,
-	headerBackVisible,
-	headerShadowVisible,
-	headerLargeStyle,
-	headerLargeTitle,
-	headerLargeTitleShadowVisible,
-	headerLargeTitleStyle,
-	headerBackground,
-	headerLeft,
-	headerRight,
-	headerShown,
-	headerStyle,
-	headerBlurEffect,
-	headerTintColor,
-	headerTitle,
-	headerTitleAlign,
-	headerTitleStyle,
-	headerTransparent,
-	headerSearchBarOptions,
-	headerTopInsetEnabled,
-	headerBack,
-	route,
-	title,
-}: Props) {
-	const { direction } = useLocale();
-	const { colors, fonts } = useTheme();
-	const tintColor =
-		headerTintColor ?? (Platform.OS === "ios" ? colors.primary : colors.text);
-
-	const headerBackTitleStyleFlattened =
-		StyleSheet.flatten([fonts.regular, headerBackTitleStyle]) || {};
-	const headerLargeTitleStyleFlattened =
-		StyleSheet.flatten([
-			Platform.select({ ios: fonts.heavy, default: fonts.medium }),
-			headerLargeTitleStyle,
-		]) || {};
-	const headerTitleStyleFlattened =
-		StyleSheet.flatten([
-			Platform.select({ ios: fonts.bold, default: fonts.medium }),
-			headerTitleStyle,
-		]) || {};
-	const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
-	const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
-
-	const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] =
-		processFonts([
-			headerBackTitleStyleFlattened.fontFamily,
-			headerLargeTitleStyleFlattened.fontFamily,
-			headerTitleStyleFlattened.fontFamily,
-		]);
-
-	const backTitleFontSize =
-		"fontSize" in headerBackTitleStyleFlattened
-			? headerBackTitleStyleFlattened.fontSize
-			: undefined;
-
-	const titleText = getHeaderTitle({ title, headerTitle }, route.name);
-	const titleColor =
-		"color" in headerTitleStyleFlattened
-			? headerTitleStyleFlattened.color
-			: (headerTintColor ?? colors.text);
-	const titleFontSize =
-		"fontSize" in headerTitleStyleFlattened
-			? headerTitleStyleFlattened.fontSize
-			: undefined;
-	const titleFontWeight = headerTitleStyleFlattened.fontWeight;
-
-	const largeTitleBackgroundColor = headerLargeStyleFlattened.backgroundColor;
-	const largeTitleColor =
-		"color" in headerLargeTitleStyleFlattened
-			? headerLargeTitleStyleFlattened.color
-			: undefined;
-	const largeTitleFontSize =
-		"fontSize" in headerLargeTitleStyleFlattened
-			? headerLargeTitleStyleFlattened.fontSize
-			: undefined;
-	const largeTitleFontWeight = headerLargeTitleStyleFlattened.fontWeight;
-
-	const headerTitleStyleSupported: TextStyle = { color: titleColor };
-
-	if (headerTitleStyleFlattened.fontFamily != null) {
-		headerTitleStyleSupported.fontFamily = headerTitleStyleFlattened.fontFamily;
-	}
-
-	if (titleFontSize != null) {
-		headerTitleStyleSupported.fontSize = titleFontSize;
-	}
-
-	if (titleFontWeight != null) {
-		headerTitleStyleSupported.fontWeight = titleFontWeight;
-	}
-
-	const headerBackgroundColor =
-		headerStyleFlattened.backgroundColor ??
-		(headerBackground != null || headerTransparent
-			? "transparent"
-			: colors.card);
-
-	const canGoBack = headerBack != null;
-
-	const headerLeftElement = headerLeft?.({
-		tintColor,
-		canGoBack,
-		label: headerBackTitle ?? headerBack?.title,
-		// `href` is only applicable to web
-		href: undefined,
-	});
-
-	const headerRightElement = headerRight?.({
-		tintColor,
-		canGoBack,
-	});
-
-	const headerTitleElement =
-		typeof headerTitle === "function"
-			? headerTitle({
-					tintColor,
-					children: titleText,
-				})
-			: null;
-
-	const hasHeaderSearchBar =
-		isSearchBarAvailableForCurrentPlatform && headerSearchBarOptions != null;
-
-	/**
-	 * We need to set this in if:
-	 * - Back button should stay visible when `headerLeft` is specified
-	 * - If `headerTitle` for Android is specified, so we only need to remove the title and keep the back button
-	 */
-	const backButtonInCustomView =
-		headerBackVisible ||
-		(Platform.OS === "android" &&
-			headerTitleElement != null &&
-			headerLeftElement == null);
-
-	const translucent =
-		headerBackground != null ||
-		headerTransparent ||
-		// When using a SearchBar or large title, the header needs to be translucent for it to work on iOS
-		((hasHeaderSearchBar || headerLargeTitle) &&
-			Platform.OS === "ios" &&
-			headerTransparent !== false);
-
-	const isBackButtonDisplayModeAvailable =
-		// On iOS 14+
-		Platform.OS === "ios" &&
-		parseInt(Platform.Version, 10) >= 14 &&
-		// Doesn't have custom styling, by default System, see: https://github.com/software-mansion/react-native-screens/pull/2105#discussion_r1565222738
-		(backTitleFontFamily == null || backTitleFontFamily === "System") &&
-		backTitleFontSize == null &&
-		// Back button menu is not disabled
-		headerBackButtonMenuEnabled !== false;
-
-	const isCenterViewRenderedAndroid = headerTitleAlign === "center";
-
-	const children = (
-		<>
-			{Platform.OS === "ios" ? (
-				<>
-					{headerLeftElement != null ? (
-						<ScreenStackHeaderLeftView>
-							{headerLeftElement}
-						</ScreenStackHeaderLeftView>
-					) : null}
-					{headerTitleElement != null ? (
-						<ScreenStackHeaderCenterView>
-							{headerTitleElement}
-						</ScreenStackHeaderCenterView>
-					) : null}
-				</>
-			) : (
-				<>
-					{headerLeftElement != null || typeof headerTitle === "function" ? (
-						// The style passed to header left, together with title element being wrapped
-						// in flex view is reqruied for proper header layout, in particular,
-						// for the text truncation to work.
-						<ScreenStackHeaderLeftView
-							style={!isCenterViewRenderedAndroid ? { flex: 1 } : null}
-						>
-							{headerLeftElement}
-							{headerTitleAlign !== "center" ? (
-								typeof headerTitle === "function" ? (
-									<View style={{ flex: 1 }}>{headerTitleElement}</View>
-								) : (
-									<View style={{ flex: 1 }}>
-										<HeaderTitle
-											tintColor={tintColor}
-											style={headerTitleStyleSupported}
-										>
-											{titleText}
-										</HeaderTitle>
-									</View>
-								)
-							) : null}
-						</ScreenStackHeaderLeftView>
-					) : null}
-					{isCenterViewRenderedAndroid ? (
-						<ScreenStackHeaderCenterView>
-							{typeof headerTitle === "function" ? (
-								headerTitleElement
-							) : (
-								<HeaderTitle
-									tintColor={tintColor}
-									style={headerTitleStyleSupported}
-								>
-									{titleText}
-								</HeaderTitle>
-							)}
-						</ScreenStackHeaderCenterView>
-					) : null}
-				</>
-			)}
-			{headerBackImageSource !== undefined ? (
-				<ScreenStackHeaderBackButtonImage source={headerBackImageSource} />
-			) : null}
-			{headerRightElement != null ? (
-				<ScreenStackHeaderRightView>
-					{headerRightElement}
-				</ScreenStackHeaderRightView>
-			) : null}
-			{hasHeaderSearchBar ? (
-				<ScreenStackHeaderSearchBarView>
-					<SearchBar {...headerSearchBarOptions} />
-				</ScreenStackHeaderSearchBarView>
-			) : null}
-		</>
-	);
-
-	return {
-		backButtonInCustomView,
-		backgroundColor: headerBackgroundColor,
-		backTitle: headerBackTitle,
-		backTitleVisible: isBackButtonDisplayModeAvailable
-			? undefined
-			: headerBackButtonDisplayMode !== "minimal",
-		backButtonDisplayMode: isBackButtonDisplayModeAvailable
-			? headerBackButtonDisplayMode
-			: undefined,
-		backTitleFontFamily,
-		backTitleFontSize,
-		blurEffect: headerBlurEffect,
-		color: tintColor,
-		direction,
-		disableBackButtonMenu: headerBackButtonMenuEnabled === false,
-		hidden: headerShown === false,
-		hideBackButton: headerBackVisible === false,
-		hideShadow:
-			headerShadowVisible === false ||
-			headerBackground != null ||
-			(headerTransparent && headerShadowVisible !== true),
-		largeTitle: headerLargeTitle,
-		largeTitleBackgroundColor,
-		largeTitleColor,
-		largeTitleFontFamily,
-		largeTitleFontSize,
-		largeTitleFontWeight,
-		largeTitleHideShadow: headerLargeTitleShadowVisible === false,
-		title: titleText,
-		titleColor,
-		titleFontFamily,
-		titleFontSize,
-		titleFontWeight: String(titleFontWeight),
-		topInsetEnabled: headerTopInsetEnabled,
-		translucent: translucent === true,
-		children,
-	} as const;
-}

package/src/shared/animation/snap-to.ts

@@ -1,96 +0,0 @@
-import { runOnUI } from "react-native-reanimated";
-import { AnimationStore } from "../stores/animation.store";
-import type { HistoryEntry } from "../stores/history.store";
-import { SystemStore } from "../stores/system.store";
-import { animateToProgress } from "../utils/animation/animate-to-progress";
-import { resolveSnapTransitionSpec } from "../utils/animation/resolve-snap-transition-spec";
-import { logger } from "../utils/logger";
-import { resolveSnapTargetEntry } from "./resolve-snap-target";
-
-const getSortedSnapPoints = (
-	descriptor: HistoryEntry["descriptor"],
-): number[] | null => {
-	const snapPoints = descriptor.options?.snapPoints;
-	if (!snapPoints || snapPoints.length === 0) return null;
-
-	// Resolve 'auto' to the measured fraction stored in SystemStore
-	const autoVal = SystemStore.getValue(
-		descriptor.route.key,
-		"resolvedAutoSnapPoint",
-	).get();
-
-	const resolved = snapPoints
-		.map((p) => (p === "auto" ? autoVal : p))
-		.filter((p): p is number => typeof p === "number" && p > 0);
-
-	return resolved.length > 0 ? resolved.sort((a, b) => a - b) : null;
-};
-
-export function snapDescriptorToIndex(
-	descriptor: HistoryEntry["descriptor"],
-	index: number,
-): boolean {
-	const sorted = getSortedSnapPoints(descriptor);
-	if (!sorted) {
-		logger.warn("snapTo: target screen has no snapPoints");
-		return false;
-	}
-
-	if (index < 0 || index >= sorted.length) {
-		logger.warn(
-			`snapTo: index ${index} out of bounds (0-${sorted.length - 1})`,
-		);
-		return false;
-	}
-
-	const targetProgress = sorted[index];
-	const animations = AnimationStore.getBag(descriptor.route.key);
-	const targetProgressValue = SystemStore.getValue(
-		descriptor.route.key,
-		"targetProgress",
-	);
-
-	runOnUI(() => {
-		"worklet";
-		const currentProgress = animations.transitionProgress.get();
-
-		animateToProgress({
-			target: targetProgress,
-			animations,
-			targetProgress: targetProgressValue,
-			spec: resolveSnapTransitionSpec(
-				descriptor.options.transitionSpec,
-				targetProgress < currentProgress ? "collapse" : "expand",
-			),
-		});
-	})();
-
-	return true;
-}
-
-/**
- * Programmatically snap the currently focused screen to a specific snap point.
- *
- * @param index - The index of the snap point to snap to (0-based, sorted ascending)
- *
- * @example
- * ```tsx
- * import { snapTo } from 'react-native-screen-transitions';
- *
- * // Snap to the first (smallest) snap point
- * snapTo(0);
- *
- * // Snap to the last (largest) snap point
- * snapTo(2); // if there are 3 snap points
- * ```
- */
-export function snapTo(index: number): void {
-	const screenWithSnapPoints = resolveSnapTargetEntry();
-
-	if (!screenWithSnapPoints) {
-		logger.warn("snapTo: No screens with snapPoints in history");
-		return;
-	}
-
-	snapDescriptorToIndex(screenWithSnapPoints.descriptor, index);
-}

package/src/shared/components/boundary/hooks/lifecycles/use-boundary-presence.ts

@@ -1,41 +0,0 @@
-import { useLayoutEffect } from "react";
-import { runOnUI } from "react-native-reanimated";
-import {
-	removeEntry,
-	setEntry,
-} from "../../../../stores/bounds/internals/entries";
-import type { BoundTag } from "../../../../stores/bounds/types";
-import type { BoundaryConfigProps } from "../../types";
-
-export const useBoundaryPresence = (params: {
-	enabled: boolean;
-	boundTag: BoundTag;
-	currentScreenKey: string;
-	boundaryConfig?: BoundaryConfigProps;
-	handoff?: boolean;
-	escapeClipping?: boolean;
-}) => {
-	const {
-		enabled,
-		boundTag,
-		currentScreenKey,
-		boundaryConfig,
-		handoff,
-		escapeClipping,
-	} = params;
-	const { tag } = boundTag;
-
-	useLayoutEffect(() => {
-		if (!enabled) return;
-
-		runOnUI(setEntry)(tag, currentScreenKey, {
-			boundaryConfig,
-			handoff: handoff ? true : null,
-			escapeClipping: escapeClipping ? true : null,
-		});
-
-		return () => {
-			runOnUI(removeEntry)(tag, currentScreenKey);
-		};
-	}, [enabled, tag, currentScreenKey, boundaryConfig, handoff, escapeClipping]);
-};