react-native-screen-transitions 2.4.2-beta.2 → 3.0.0-beta.0

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

@@ -0,0 +1,214 @@
+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

@@ -0,0 +1,295 @@
+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/__tests__/gesture.velocity.test.ts

@@ -0,0 +1,139 @@
+import { describe, expect, it, mock } from "bun:test";
+
+mock.module("react-native", () => ({}));
+mock.module("react-native-gesture-handler", () => ({}));
+mock.module("react-native-reanimated", () => ({
+	clamp: (value: number, lower: number, upper: number) =>
+		Math.min(Math.max(value, lower), upper),
+}));
+
+const { velocity } = await import("../utils/gesture/velocity");
+
+type Directions = {
+	horizontal: boolean;
+	horizontalInverted: boolean;
+	vertical: boolean;
+	verticalInverted: boolean;
+};
+
+type GestureEventInit = {
+	translationX?: number;
+	translationY?: number;
+	velocityX?: number;
+	velocityY?: number;
+};
+
+const createAnimations = (progress: number) =>
+	({
+		progress: { value: progress },
+		closing: { value: 0 },
+		animating: { value: 0 },
+	}) as const;
+
+const createEvent = ({
+	translationX = 0,
+	translationY = 0,
+	velocityX = 0,
+	velocityY = 0,
+}: GestureEventInit) =>
+	({ translationX, translationY, velocityX, velocityY }) as any;
+
+const createDirections = (overrides: Partial<Directions> = {}) => ({
+	horizontal: false,
+	horizontalInverted: false,
+	vertical: false,
+	verticalInverted: false,
+	...overrides,
+});
+
+describe("velocity.normalize", () => {
+	it("clamps values to the configured range", () => {
+		expect(velocity.normalize(6400, 320)).toBeCloseTo(3.2, 5);
+		expect(velocity.normalize(-6400, 320)).toBeCloseTo(-3.2, 5);
+	});
+});
+
+describe("velocity.calculateProgressVelocity", () => {
+	const dimensions = { width: 320, height: 640 };
+
+	it("returns positive magnitude when progressing toward open target", () => {
+		const animations = createAnimations(0.25);
+		const event = createEvent({
+			translationX: 48,
+			translationY: 6,
+			velocityX: 800,
+		});
+
+		const result = velocity.calculateProgressVelocity({
+			animations: animations as any,
+			shouldDismiss: false,
+			event,
+			dimensions,
+			directions: createDirections({ horizontal: true }),
+		});
+
+		expect(result).toBeCloseTo(2.5, 5);
+	});
+
+	it("prefers the axis with greater normalized translation", () => {
+		const animations = createAnimations(0.8);
+		const event = createEvent({
+			translationX: 24,
+			translationY: -140,
+			velocityX: 120,
+			velocityY: -900,
+		});
+
+		const result = velocity.calculateProgressVelocity({
+			animations: animations as any,
+			shouldDismiss: true,
+			event,
+			dimensions,
+			directions: createDirections({
+				horizontal: true,
+				verticalInverted: true,
+			}),
+		});
+
+		expect(result).toBeLessThan(0);
+		expect(Math.abs(result)).toBeCloseTo(1.406, 3);
+	});
+
+	it("caps the returned magnitude using clamp", () => {
+		const animations = createAnimations(0.5);
+		const event = createEvent({
+			translationX: 10,
+			velocityX: 5000,
+		});
+
+		const result = velocity.calculateProgressVelocity({
+			animations: animations as any,
+			shouldDismiss: false,
+			event,
+			dimensions,
+			directions: createDirections({ horizontal: true }),
+		});
+
+		expect(result).toBeCloseTo(3.2, 5);
+	});
+});
+
+describe("velocity.shouldPassDismissalThreshold", () => {
+	const width = 320;
+
+	it("returns true once translation alone crosses half the screen", () => {
+		expect(velocity.shouldPassDismissalThreshold(170, 0, width, 0.3)).toBe(
+			true,
+		);
+	});
+
+	it("combines translation with weighted velocity", () => {
+		expect(velocity.shouldPassDismissalThreshold(40, 2500, width, 0.5)).toBe(
+			true,
+		);
+	});
+
+	it("returns false when movement is negligible", () => {
+		expect(velocity.shouldPassDismissalThreshold(0, 0, width, 0.3)).toBe(false);
+	});
+});