@react-navigation/stack 7.6.16 → 8.0.0-alpha.1

package/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,4 +1,5 @@
-import { Animated, Platform } from 'react-native';
+import { isLiquidGlassSupported } from '@react-navigation/elements/internal';
+import { Animated } from 'react-native';
 
 import type {
   StackHeaderInterpolatedStyle,
@@ -7,10 +8,6 @@ import type {
 
 const { add, multiply } = Animated;
 
-// Width of the screen in split layout on portrait mode on iPad Mini
-// Keep in sync with HeaderBackButton.tsx
-const IPAD_MINI_MEDIUM_WIDTH = 414;
-
 /**
  * Standard UIKit style animation for the header where the title fades into the back button label.
  */
@@ -20,29 +17,6 @@ export function forUIKit({
   direction,
   layouts,
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
-  const defaultOffset = 100;
-  const leftSpacing =
-    27 +
-    (Platform.OS === 'ios' && layouts.screen.width >= IPAD_MINI_MEDIUM_WIDTH
-      ? 5 // Additional padding on iPad specified in Header.tsx
-      : 0);
-
-  // The title and back button title should cross-fade to each other
-  // When screen is fully open, the title should be in center, and back title should be on left
-  // When screen is closing, the previous title will animate to back title's position
-  // And back title will animate to title's position
-  // We achieve this by calculating the offsets needed to translate title to back title's position and vice-versa
-  const leftLabelOffset = layouts.leftLabel
-    ? (layouts.screen.width - layouts.leftLabel.width) / 2 - leftSpacing
-    : defaultOffset;
-  const titleLeftOffset = layouts.title
-    ? (layouts.screen.width - layouts.title.width) / 2 - leftSpacing
-    : defaultOffset;
-
-  // When the current title is animating to right, it is centered in the right half of screen in middle of transition
-  // The back title also animates in from this position
-  const rightOffset = layouts.screen.width / 4;
-
   const multiplier = direction === 'rtl' ? -1 : 1;
 
   const progress = add(
@@ -60,61 +34,50 @@ export function forUIKit({
       : 0
   );
 
-  return {
-    leftButtonStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0.3, 1, 1.5],
-        outputRange: [0, 1, 0],
-      }),
-    },
-    leftLabelStyle: {
-      transform: [
-        {
-          translateX: multiply(
-            multiplier,
-            progress.interpolate({
-              inputRange: [0, 1, 2],
-              outputRange: [leftLabelOffset, 0, -rightOffset],
-            })
-          ),
-        },
+  if (isLiquidGlassSupported) {
+    const opacity = progress.interpolate({
+      inputRange: [0, 1, 2],
+      outputRange: [
+        // FIXME: Liquid glass views don't work properly with `opacity: 0`
+        // So we use a small value instead to workaround this issue.
+        0.1, 1, 1,
       ],
-    },
-    rightButtonStyle: {
-      opacity: progress.interpolate({
-        inputRange: [0.3, 1, 1.5],
-        outputRange: [0, 1, 0],
-      }),
-    },
-    titleStyle: {
+    });
+
+    const translateX = multiply(
+      multiplier,
+      progress.interpolate({
+        inputRange: [0, 1, 2],
+        outputRange: [layouts.screen.width, 0, -layouts.screen.width * 0.3],
+      })
+    );
+
+    return {
+      leftButtonStyle: { opacity },
+      rightButtonStyle: { opacity },
+      titleStyle: {
+        transform: [{ translateX }],
+      },
+      backgroundStyle: {
+        transform: [{ translateX }],
+      },
+    };
+  }
+
+  const opacity = progress.interpolate({
+    inputRange: [0, 1, 2],
+    outputRange: [0, 1, 0],
+  });
+
+  return {
+    leftButtonStyle: { opacity },
+    rightButtonStyle: { opacity },
+    titleStyle: { opacity },
+    backgroundStyle: {
       opacity: progress.interpolate({
-        inputRange: [0, 0.5, 0.75, 1, 1.5],
-        outputRange: [0, 0, 0.1, 1, 0],
+        inputRange: [0, 1, 1.9, 2],
+        outputRange: [0, 1, 1, 0],
       }),
-      transform: [
-        {
-          translateX: multiply(
-            multiplier,
-            progress.interpolate({
-              inputRange: [0.5, 1, 2],
-              outputRange: [rightOffset, 0, -titleLeftOffset],
-            })
-          ),
-        },
-      ],
-    },
-    backgroundStyle: {
-      transform: [
-        {
-          translateX: multiply(
-            multiplier,
-            progress.interpolate({
-              inputRange: [0, 1, 2],
-              outputRange: [layouts.screen.width, 0, -layouts.screen.width],
-            })
-          ),
-        },
-      ],
     },
   };
 }

package/src/TransitionConfigs/TransitionPresets.tsx

@@ -13,7 +13,7 @@ import {
   forScaleFromCenterAndroid,
   forVerticalIOS,
 } from './CardStyleInterpolators';
-import { forFade } from './HeaderStyleInterpolators';
+import { forFade, forUIKit } from './HeaderStyleInterpolators';
 import {
   BottomSheetSlideInSpec,
   BottomSheetSlideOutSpec,
@@ -38,7 +38,7 @@ export const SlideFromRightIOS: TransitionPreset = {
     close: TransitionIOSSpec,
   },
   cardStyleInterpolator: forHorizontalIOS,
-  headerStyleInterpolator: forFade,
+  headerStyleInterpolator: forUIKit,
 };
 
 /**
@@ -51,7 +51,7 @@ export const ModalSlideFromBottomIOS: TransitionPreset = {
     close: TransitionIOSSpec,
   },
   cardStyleInterpolator: forVerticalIOS,
-  headerStyleInterpolator: forFade,
+  headerStyleInterpolator: forUIKit,
 };
 
 /**
@@ -64,7 +64,7 @@ export const ModalPresentationIOS: TransitionPreset = {
     close: TransitionIOSSpec,
   },
   cardStyleInterpolator: forModalPresentationIOS,
-  headerStyleInterpolator: forFade,
+  headerStyleInterpolator: forUIKit,
 };
 
 /**

package/src/index.tsx

@@ -6,7 +6,10 @@ import * as TransitionSpecs from './TransitionConfigs/TransitionSpecs';
 /**
  * Navigators
  */
-export { createStackNavigator } from './navigators/createStackNavigator';
+export {
+  createStackNavigator,
+  createStackScreen,
+} from './navigators/createStackNavigator';
 
 /**
  * Views

package/src/navigators/createStackNavigator.tsx

@@ -1,7 +1,6 @@
 import {
   createNavigatorFactory,
   type EventArg,
-  type NavigatorTypeBagBase,
   type ParamListBase,
   type StackActionHelpers,
   StackActions,
@@ -9,6 +8,10 @@ import {
   StackRouter,
   type StackRouterOptions,
   type StaticConfig,
+  type StaticParamList,
+  type StaticScreenConfig,
+  type StaticScreenConfigLinking,
+  type StaticScreenConfigScreen,
   type TypedNavigator,
   useLocale,
   useNavigationBuilder,
@@ -24,15 +27,14 @@ import type {
 import { StackView } from '../views/Stack/StackView';
 
 function StackNavigator({
-  id,
   initialRouteName,
-  UNSTABLE_routeNamesChangeBehavior,
+  routeNamesChangeBehavior,
   children,
   layout,
   screenListeners,
   screenOptions,
   screenLayout,
-  UNSTABLE_router,
+  router,
   ...rest
 }: StackNavigatorProps) {
   const { direction } = useLocale();
@@ -45,15 +47,14 @@ function StackNavigator({
       StackNavigationOptions,
       StackNavigationEventMap
     >(StackRouter, {
-      id,
       initialRouteName,
-      UNSTABLE_routeNamesChangeBehavior,
+      routeNamesChangeBehavior,
       children,
       layout,
       screenListeners,
       screenOptions,
       screenLayout,
-      UNSTABLE_router,
+      router,
     });
 
   React.useEffect(
@@ -96,25 +97,41 @@ function StackNavigator({
   );
 }
 
+type StackTypeBag<ParamList extends {}> = {
+  ParamList: ParamList;
+  State: StackNavigationState<ParamList>;
+  ScreenOptions: StackNavigationOptions;
+  EventMap: StackNavigationEventMap;
+  NavigationList: {
+    [RouteName in keyof ParamList]: StackNavigationProp<ParamList, RouteName>;
+  };
+  Navigator: typeof StackNavigator;
+};
+
 export function createStackNavigator<
   const ParamList extends ParamListBase,
-  const NavigatorID extends string | undefined = string | undefined,
-  const TypeBag extends NavigatorTypeBagBase = {
-    ParamList: ParamList;
-    NavigatorID: NavigatorID;
-    State: StackNavigationState<ParamList>;
-    ScreenOptions: StackNavigationOptions;
-    EventMap: StackNavigationEventMap;
-    NavigationList: {
-      [RouteName in keyof ParamList]: StackNavigationProp<
-        ParamList,
-        RouteName,
-        NavigatorID
-      >;
-    };
-    Navigator: typeof StackNavigator;
-  },
-  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
->(config?: Config): TypedNavigator<TypeBag, Config> {
+>(): TypedNavigator<StackTypeBag<ParamList>, undefined>;
+export function createStackNavigator<
+  const Config extends StaticConfig<StackTypeBag<ParamListBase>>,
+>(
+  config: Config
+): TypedNavigator<StackTypeBag<StaticParamList<{ config: Config }>>, Config>;
+export function createStackNavigator(config?: unknown) {
   return createNavigatorFactory(StackNavigator)(config);
 }
+
+export function createStackScreen<
+  const Linking extends StaticScreenConfigLinking,
+  const Screen extends StaticScreenConfigScreen,
+>(
+  config: StaticScreenConfig<
+    Linking,
+    Screen,
+    StackNavigationState<ParamListBase>,
+    StackNavigationOptions,
+    StackNavigationEventMap,
+    StackNavigationProp<ParamListBase>
+  >
+) {
+  return config;
+}

package/src/types.tsx

@@ -20,7 +20,13 @@ import type {
   Theme,
 } from '@react-navigation/native';
 import type * as React from 'react';
-import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type {
+  Animated,
+  ColorValue,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 
 export type StackNavigationEventMap = {
   /**
@@ -54,31 +60,27 @@ export type StackNavigationHelpers = NavigationHelpers<
 export type StackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
-  NavigatorID,
   StackNavigationState<ParamList>,
   StackNavigationOptions,
-  StackNavigationEventMap
-> &
-  StackActionHelpers<ParamList>;
+  StackNavigationEventMap,
+  StackActionHelpers<ParamList>
+>;
 
 export type StackScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
 > = {
-  navigation: StackNavigationProp<ParamList, RouteName, NavigatorID>;
+  navigation: StackNavigationProp<ParamList, RouteName>;
   route: RouteProp<ParamList, RouteName>;
 };
 
 export type StackOptionsArgs<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined,
-> = StackScreenProps<ParamList, RouteName, NavigatorID> & {
+> = StackScreenProps<ParamList, RouteName> & {
   theme: Theme;
 };
 
@@ -217,10 +219,6 @@ export type StackHeaderOptions = Omit<
 };
 
 export type StackHeaderProps = {
-  /**
-   * Layout of the screen.
-   */
-  layout: Layout;
   /**
    * Options for the back button.
    */
@@ -260,11 +258,11 @@ export type StackHeaderRightProps = {
   /**
    * Tint color for the header button.
    */
-  tintColor?: string;
+  tintColor?: ColorValue;
   /**
    * Color for material ripple (Android >= 5.0 only).
    */
-  pressColor?: string;
+  pressColor?: ColorValue;
   /**
    * Opacity when the button is pressed, used when ripple is not supported.
    */
@@ -561,38 +559,26 @@ export type StackHeaderInterpolationProps = {
      * Layout of the whole screen.
      */
     screen: Layout;
-    /**
-     * Layout of the title element.
-     */
-    title?: Layout;
-    /**
-     * Layout of the back button label.
-     */
-    leftLabel?: Layout;
   };
 };
 
 export type StackHeaderInterpolatedStyle = {
-  /**
-   * Interpolated style for the label of the left button (back button label).
-   */
-  leftLabelStyle?: any;
   /**
    * Interpolated style for the left button (usually the back button).
    */
-  leftButtonStyle?: any;
+  leftButtonStyle?: Animated.WithAnimatedValue<ViewStyle>;
   /**
    * Interpolated style for the right button.
    */
-  rightButtonStyle?: any;
+  rightButtonStyle?: Animated.WithAnimatedValue<ViewStyle>;
   /**
    * Interpolated style for the header title text.
    */
-  titleStyle?: any;
+  titleStyle?: Animated.WithAnimatedValue<TextStyle>;
   /**
    * Interpolated style for the header background.
    */
-  backgroundStyle?: any;
+  backgroundStyle?: Animated.WithAnimatedValue<ViewStyle>;
 };
 
 export type StackHeaderStyleInterpolator = (
@@ -629,7 +615,6 @@ export type TransitionPreset = {
 
 export type StackNavigatorProps = DefaultNavigatorOptions<
   ParamListBase,
-  string | undefined,
   StackNavigationState<ParamListBase>,
   StackNavigationOptions,
   StackNavigationEventMap,

package/src/utils/getShadowStyle.tsx

@@ -1,4 +1,3 @@
-import Color from 'color';
 import { Platform } from 'react-native';
 
 type ShadowConfig = {
@@ -8,27 +7,17 @@ type ShadowConfig = {
   };
   radius: number;
   opacity: number;
-  color?: string;
 };
 
-export function getShadowStyle({
-  offset,
-  radius,
-  opacity,
-  color = '#000',
-}: ShadowConfig) {
+export function getShadowStyle({ offset, radius, opacity }: ShadowConfig) {
   const result = Platform.select({
     web: {
-      boxShadow: `${offset.width}px ${offset.height}px ${radius}px ${Color(
-        color
-      )
-        .alpha(opacity)
-        .toString()}`,
+      boxShadow: `${offset.width}px ${offset.height}px ${radius}px rgba(0, 0, 0, ${opacity})`,
     },
     default: {
       shadowOffset: offset,
       shadowRadius: radius,
-      shadowColor: color,
+      shadowColor: '#000',
       shadowOpacity: opacity,
     },
   });

package/src/views/Header/Header.tsx

@@ -10,7 +10,6 @@ import { HeaderSegment } from './HeaderSegment';
 
 export const Header = React.memo(function Header({
   back,
-  layout,
   progress,
   options,
   route,
@@ -57,7 +56,6 @@ export const Header = React.memo(function Header({
       {...options}
       title={getHeaderTitle(options, route.name)}
       progress={progress}
-      layout={layout}
       modal={isModal}
       headerBackTitle={
         options.headerBackTitle !== undefined

package/src/views/Header/HeaderContainer.tsx

@@ -1,7 +1,6 @@
 import { getHeaderTitle, HeaderBackContext } from '@react-navigation/elements';
 import {
-  NavigationContext,
-  NavigationRouteContext,
+  NavigationProvider,
   type ParamListBase,
   type Route,
   useLinkBuilder,
@@ -16,7 +15,6 @@ import {
   forSlideUp,
 } from '../../TransitionConfigs/HeaderStyleInterpolators';
 import type {
-  Layout,
   Scene,
   StackHeaderMode,
   StackHeaderProps,
@@ -26,7 +24,6 @@ import { Header } from './Header';
 
 export type Props = {
   mode: StackHeaderMode;
-  layout: Layout;
   scenes: (Scene | undefined)[];
   getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
   getFocusedRoute: () => Route<string>;
@@ -40,7 +37,6 @@ export type Props = {
 export function HeaderContainer({
   mode,
   scenes,
-  layout,
   getPreviousScene,
   getFocusedRoute,
   onContentHeightChange,
@@ -51,7 +47,7 @@ export function HeaderContainer({
   const { buildHref } = useLinkBuilder();
 
   return (
-    <View pointerEvents="box-none" style={style}>
+    <View style={[styles.container, style]}>
       {/* We render header only on two top-most headers as
          a workaround for https://github.com/react-navigation/react-navigation/issues/12456.
          If the header is persisted, it might be placed incorrectly when navigating back. */}
@@ -122,7 +118,6 @@ export function HeaderContainer({
           nextHeaderlessScene;
 
         const props: StackHeaderProps = {
-          layout,
           back: headerBack,
           progress: scene.progress,
           options: scene.descriptor.options,
@@ -143,38 +138,39 @@ export function HeaderContainer({
         };
 
         return (
-          <NavigationContext.Provider
+          <NavigationProvider
             key={scene.descriptor.route.key}
-            value={scene.descriptor.navigation}
+            navigation={scene.descriptor.navigation}
+            route={scene.descriptor.route}
           >
-            <NavigationRouteContext.Provider value={scene.descriptor.route}>
-              <View
-                onLayout={
-                  onContentHeightChange
-                    ? (e) => {
-                        const { height } = e.nativeEvent.layout;
-
-                        onContentHeightChange({
-                          route: scene.descriptor.route,
-                          height,
-                        });
-                      }
-                    : undefined
-                }
-                pointerEvents={isFocused ? 'box-none' : 'none'}
-                aria-hidden={!isFocused}
-                style={
-                  // Avoid positioning the focused header absolutely
-                  // Otherwise accessibility tools don't seem to be able to find it
-                  (mode === 'float' && !isFocused) || headerTransparent
-                    ? styles.header
-                    : null
-                }
-              >
-                {header !== undefined ? header(props) : <Header {...props} />}
-              </View>
-            </NavigationRouteContext.Provider>
-          </NavigationContext.Provider>
+            <View
+              onLayout={
+                onContentHeightChange
+                  ? (e) => {
+                      const { height } = e.nativeEvent.layout;
+
+                      onContentHeightChange({
+                        route: scene.descriptor.route,
+                        height,
+                      });
+                    }
+                  : undefined
+              }
+              aria-hidden={!isFocused}
+              style={[
+                // Avoid positioning the focused header absolutely
+                // Otherwise accessibility tools don't seem to be able to find it
+                (mode === 'float' && !isFocused) || headerTransparent
+                  ? styles.header
+                  : null,
+                {
+                  pointerEvents: isFocused ? 'box-none' : 'none',
+                },
+              ]}
+            >
+              {header !== undefined ? header(props) : <Header {...props} />}
+            </View>
+          </NavigationProvider>
         );
       })}
     </View>
@@ -182,6 +178,9 @@ export function HeaderContainer({
 }
 
 const styles = StyleSheet.create({
+  container: {
+    pointerEvents: 'box-none',
+  },
   header: {
     position: 'absolute',
     top: 0,