react-native-screen-transitions 2.4.2 → 3.0.0-beta.1

package/src/integrations/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/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

@@ -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/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/keys.tsx

@@ -1,38 +0,0 @@
-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/providers/screen-transition-provider.tsx

@@ -1,33 +0,0 @@
-import type React from "react";
-import { ScreenLifecycleController } from "../components/controllers/screen-lifecycle";
-import { RootTransitionAware } from "../components/root-transition-aware";
-import { ScreenGestureProvider } from "../providers/gestures";
-import { KeysProvider } from "../providers/keys";
-import { TransitionStylesProvider } from "../providers/transition-styles";
-import type { NativeStackDescriptor } from "../types/navigator";
-
-type Props = {
-	previous?: NativeStackDescriptor;
-	current: NativeStackDescriptor;
-	next?: NativeStackDescriptor;
-	children: React.ReactNode;
-};
-
-export function ScreenTransitionProvider({
-	previous,
-	current,
-	next,
-	children,
-}: Props) {
-	return (
-		<KeysProvider previous={previous} current={current} next={next}>
-			<ScreenGestureProvider>
-				<ScreenLifecycleController>
-					<TransitionStylesProvider>
-						<RootTransitionAware>{children}</RootTransitionAware>
-					</TransitionStylesProvider>
-				</ScreenLifecycleController>
-			</ScreenGestureProvider>
-		</KeysProvider>
-	);
-}

package/src/stores/animations.ts

@@ -1,45 +0,0 @@
-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,
-};