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

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/native-stack.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/native-stack.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/create-screen-transition-provider.tsx

@@ -1,55 +0,0 @@
-import type React from "react";
-import type { Descriptor } from "@react-navigation/native";
-import { RootTransitionAware } from "../components/root-transition-aware";
-import { ScreenGestureProvider } from "./gestures";
-import { KeysProvider } from "./keys";
-import { TransitionStylesProvider } from "./transition-styles";
-
-type AnyDescriptor = Descriptor<any, any, any>;
-
-type ScreenLifecycleComponent = React.ComponentType<{
-  children: React.ReactNode;
-}>;
-
-type ScreenTransitionProviderProps<DescriptorType extends AnyDescriptor> = {
-  previous?: DescriptorType;
-  current: DescriptorType;
-  next?: DescriptorType;
-  children: React.ReactNode;
-};
-
-type CreateScreenTransitionProviderOptions = {
-  defaultEnableTransitions?: boolean;
-};
-
-export function createScreenTransitionProvider<
-  DescriptorType extends AnyDescriptor
->(
-  ScreenLifecycleComponent: ScreenLifecycleComponent,
-  { defaultEnableTransitions = false }: CreateScreenTransitionProviderOptions = {}
-) {
-  return function ScreenTransitionProvider({
-    previous,
-    current,
-    next,
-    children,
-  }: ScreenTransitionProviderProps<DescriptorType>) {
-    return (
-      <KeysProvider<DescriptorType>
-        previous={previous}
-        current={current}
-        next={next}
-      >
-        <ScreenGestureProvider>
-          <ScreenLifecycleComponent>
-            <TransitionStylesProvider
-              defaultEnableTransitions={defaultEnableTransitions}
-            >
-              <RootTransitionAware>{children}</RootTransitionAware>
-            </TransitionStylesProvider>
-          </ScreenLifecycleComponent>
-        </ScreenGestureProvider>
-      </KeysProvider>
-    );
-  };
-}

package/src/providers/keys.tsx

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

package/src/providers/transition-styles.tsx

@@ -1,76 +0,0 @@
-import { createContext, useContext, useMemo } from "react";
-import { useDerivedValue } from "react-native-reanimated";
-import { NO_STYLES } from "../constants";
-import { _useScreenAnimation } from "../hooks/animation/use-screen-animation";
-import type { TransitionInterpolatedStyle } from "../types/animation";
-import { createBounds } from "../utils/bounds";
-
-type Props = {
-	children: React.ReactNode;
-	defaultEnableTransitions?: boolean;
-};
-
-const TransitionStylesContext = createContext<ReturnType<
-	typeof useMemo<{
-		stylesMap: ReturnType<typeof useDerivedValue<TransitionInterpolatedStyle>>;
-	}>
-> | null>(null);
-
-export function TransitionStylesProvider({
-	children,
-	defaultEnableTransitions = false,
-}: Props) {
-	const { screenInterpolatorProps, screenStyleInterpolator } =
-		_useScreenAnimation(defaultEnableTransitions);
-
-	const stylesMap = useDerivedValue<TransitionInterpolatedStyle>(() => {
-		"worklet";
-
-		/**
-		 * ### Maintainer note
-		 *
-		 * From my understanding, reanimated will serialize the DerivedValue result. Thus resulting in us receiving a `bounds is not a function, it is an object` error. We'll build the bounds function inside here (the final step) and pass it alongside the interpolator instead.
-		 */
-		const props = screenInterpolatorProps.value;
-
-		const bounds = createBounds(props);
-		try {
-			if (!screenStyleInterpolator) return NO_STYLES;
-
-			return screenStyleInterpolator({
-				...props,
-				bounds,
-			});
-		} catch (err) {
-			if (__DEV__) {
-				console.warn(
-					"[react-native-screen-transitions] screenStyleInterpolator must be a worklet",
-					err,
-				);
-			}
-			return NO_STYLES;
-		}
-	});
-
-	const value = useMemo(() => {
-		return {
-			stylesMap,
-		};
-	}, [stylesMap]);
-
-	return (
-		<TransitionStylesContext.Provider value={value}>
-			{children}
-		</TransitionStylesContext.Provider>
-	);
-}
-
-export function useTransitionStyles() {
-	const ctx = useContext(TransitionStylesContext);
-	if (!ctx) {
-		throw new Error(
-			"useTransitionStyles must be used within a TransitionStylesProvider",
-		);
-	}
-	return ctx;
-}