react-native-screen-transitions 2.0.2 → 2.0.4

package/src/integrations/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/navigator";
+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/integrations/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/navigator";
+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/providers/gestures.tsx

@@ -0,0 +1,89 @@
+import { createContext, useContext, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import type { GestureType } from "react-native-gesture-handler";
+import {
+	GestureDetector,
+	GestureHandlerRootView,
+} from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
+import { useSharedValue } from "react-native-reanimated";
+import { useBuildGestures } from "../hooks/gestures/use-build-gestures";
+
+export type ScrollProgress = {
+	x: number;
+	y: number;
+	contentHeight: number;
+	contentWidth: number;
+	layoutHeight: number;
+	layoutWidth: number;
+};
+
+export interface GestureContextType {
+	panGesture: GestureType;
+	nativeGesture: GestureType;
+	scrollProgress: SharedValue<ScrollProgress>;
+}
+
+type ScreenGestureProviderProps = {
+	children: React.ReactNode;
+};
+
+const DEFAULT_SCROLL_PROGRESS: ScrollProgress = {
+	x: 0,
+	y: 0,
+	contentHeight: 0,
+	contentWidth: 0,
+	layoutHeight: 0,
+	layoutWidth: 0,
+};
+
+const GestureContext = createContext<GestureContextType | undefined>(undefined);
+
+export const ScreenGestureProvider = ({
+	children,
+}: ScreenGestureProviderProps) => {
+	const scrollProgress = useSharedValue<ScrollProgress>(
+		DEFAULT_SCROLL_PROGRESS,
+	);
+
+	const { panGesture, nativeGesture } = useBuildGestures({
+		scrollProgress,
+	});
+
+	const value = useMemo(
+		() => ({
+			panGesture,
+			scrollProgress,
+			nativeGesture,
+		}),
+		[panGesture, scrollProgress, nativeGesture],
+	) satisfies GestureContextType;
+
+	return (
+		<GestureHandlerRootView>
+			<GestureContext.Provider value={value}>
+				<GestureDetector gesture={panGesture}>
+					<View style={styles.container}>{children}</View>
+				</GestureDetector>
+			</GestureContext.Provider>
+		</GestureHandlerRootView>
+	);
+};
+
+export const useGestureContext = () => {
+	const context = useContext(GestureContext);
+
+	if (!context) {
+		throw new Error(
+			"useGestureContext must be used within a ScreenGestureProvider",
+		);
+	}
+
+	return context;
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+});

package/src/providers/keys.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext, useMemo } from "react";
+import type { NativeStackDescriptor } from "../types/navigator";
+
+interface KeysContextType {
+	previous?: NativeStackDescriptor;
+	current: NativeStackDescriptor;
+	next?: NativeStackDescriptor;
+}
+
+const KeysContext = createContext<KeysContextType | undefined>(undefined);
+
+interface KeysProviderProps {
+	children: React.ReactNode;
+	previous?: NativeStackDescriptor;
+	current: NativeStackDescriptor;
+	next?: NativeStackDescriptor;
+}
+
+export const KeysProvider = ({
+	children,
+	previous,
+	current,
+	next,
+}: KeysProviderProps) => {
+	const value = useMemo(
+		() => ({ previous, current, next }),
+		[previous, current, next],
+	);
+	return <KeysContext.Provider value={value}>{children}</KeysContext.Provider>;
+};
+
+export const useKeys = (): KeysContextType => {
+	const context = useContext(KeysContext);
+	if (context === undefined) {
+		throw new Error("useKeys must be used within a KeysProvider");
+	}
+	return context;
+};

package/src/stores/animations.ts

@@ -0,0 +1,45 @@
+import { makeMutable, type SharedValue } from "react-native-reanimated";
+import type { ScreenKey } from "../types/navigator";
+
+export type AnimationMap = {
+	progress: SharedValue<number>;
+	closing: SharedValue<number>;
+	animating: SharedValue<number>;
+};
+
+const store: Record<ScreenKey, AnimationMap> = {};
+
+const ensure = (key: ScreenKey) => {
+	let bag = store[key];
+	if (!bag) {
+		bag = {
+			progress: makeMutable(0),
+			closing: makeMutable(0),
+			animating: makeMutable(0),
+		};
+		store[key] = bag;
+	}
+	return bag;
+};
+
+export function getAnimation(
+	key: ScreenKey,
+	type: "progress" | "closing" | "animating",
+): SharedValue<number> {
+	return ensure(key)[type];
+}
+
+export function getAll(key: ScreenKey) {
+	return ensure(key);
+}
+
+function clear(routeKey: ScreenKey) {
+	"worklet";
+	delete store[routeKey];
+}
+
+export const Animations = {
+	getAnimation,
+	clear,
+	getAll,
+};