@react-navigation/native-stack 7.0.0-alpha.5 → 7.0.0-alpha.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator using react-native-screens",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,27 +41,26 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.0.0-alpha.2",
+    "@react-navigation/elements": "^2.0.0-alpha.4",
     "warn-once": "^0.1.1"
   },
   "devDependencies": {
-    "@react-navigation/native": "^7.0.0-alpha.4",
-    "@testing-library/react-native": "^11.5.0",
-    "@types/react": "~18.0.27",
-    "@types/react-native": "~0.70.8",
-    "del-cli": "^5.0.0",
+    "@react-navigation/native": "^7.0.0-alpha.6",
+    "@testing-library/react-native": "^12.3.1",
+    "@types/react": "~18.2.33",
+    "del-cli": "^5.1.0",
     "react": "18.2.0",
-    "react-native": "0.71.8",
-    "react-native-builder-bob": "^0.21.0",
-    "react-native-screens": "~3.20.0",
-    "typescript": "^4.9.4"
+    "react-native": "0.72.6",
+    "react-native-builder-bob": "^0.23.1",
+    "react-native-screens": "~3.22.0",
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^6.0.0",
+    "@react-navigation/native": "^7.0.0-alpha.6",
     "react": "*",
-    "react-native": "*",
-    "react-native-safe-area-context": ">= 3.0.0",
-    "react-native-screens": ">= 3.0.0"
+    "react-native": "0.72.6",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -77,5 +76,5 @@
       ]
     ]
   },
-  "gitHead": "ae0a70c2d94f77cd8ca8b8d3028f684a63f81b92"
+  "gitHead": "d718b717320d41c90051c2a5f849b8d74f518a18"
 }

package/src/index.tsx

@@ -8,6 +8,11 @@ export { createNativeStackNavigator } from './navigators/createNativeStackNaviga
  */
 export { NativeStackView } from './views/NativeStackView';
 
+/**
+ * Hooks
+ */
+export { useAnimatedHeaderHeight } from './utils/useAnimatedHeaderHeight';
+
 /**
  * Types
  */

package/src/navigators/createNativeStackNavigator.tsx

@@ -1,12 +1,12 @@
 import {
   createNavigatorFactory,
-  EventArg,
-  ParamListBase,
-  StackActionHelpers,
+  type EventArg,
+  type ParamListBase,
+  type StackActionHelpers,
   StackActions,
-  StackNavigationState,
+  type StackNavigationState,
   StackRouter,
-  StackRouterOptions,
+  type StackRouterOptions,
   useNavigationBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
@@ -22,6 +22,7 @@ function NativeStackNavigator({
   id,
   initialRouteName,
   children,
+  layout,
   screenListeners,
   screenOptions,
   ...rest
@@ -37,6 +38,7 @@ function NativeStackNavigator({
       id,
       initialRouteName,
       children,
+      layout,
       screenListeners,
       screenOptions,
     });

package/src/types.tsx

@@ -36,7 +36,7 @@ export type NativeStackNavigationEventMap = {
 export type NativeStackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = NavigationProp<
   ParamList,
   RouteName,
@@ -50,7 +50,7 @@ export type NativeStackNavigationProp<
 export type NativeStackScreenProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
-  NavigatorID extends string | undefined = undefined
+  NavigatorID extends string | undefined = undefined,
 > = {
   navigation: NativeStackNavigationProp<ParamList, RouteName, NavigatorID>;
   route: RouteProp<ParamList, RouteName>;
@@ -72,7 +72,11 @@ export type NativeStackHeaderProps = {
     /**
      * Title of the previous screen.
      */
-    title: string;
+    title: string | undefined;
+    /**
+     * The `href` to use for the anchor tag on web
+     */
+    href: string | undefined;
   };
   /**
    * Options for the current screen.
@@ -379,7 +383,7 @@ export type NativeStackNavigationOptions = {
   statusBarTranslucent?: boolean;
   /**
    * Sets the direction in which you should swipe to dismiss the screen.
-   * When using `vertical` option, options `fullScreenGestureEnabled: true`, `customAnimationOnGesture: true` and `animation: 'slide_from_bottom'` are set by default.
+   * When using `vertical` option, options `fullScreenGestureEnabled: true`, `animationMatchesGesture: true` and `animation: 'slide_from_bottom'` are set by default.
    *
    * Supported values:
    * - `vertical` – dismiss screen vertically
@@ -399,10 +403,10 @@ export type NativeStackNavigationOptions = {
    *
    * @platform ios
    */
-  customAnimationOnGesture?: boolean;
+  animationMatchesGesture?: boolean;
   /**
    * Whether the gesture to dismiss should work on the whole screen. Using gesture to dismiss with this option results in the same
-   * transition animation as `simple_push`. This behavior can be changed by setting `customAnimationOnGesture` prop. Achieving the
+   * transition animation as `simple_push`. This behavior can be changed by setting `animationMatchesGesture` prop. Achieving the
    * default iOS animation isn't possible due to platform limitations. Defaults to `false`.
    *
    * Doesn't affect the behavior of screens presented modally.

package/src/utils/useAnimatedHeaderHeight.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { Animated } from 'react-native';
+
+export const AnimatedHeaderHeightContext = React.createContext<
+  Animated.Value | undefined
+>(undefined);
+
+export function useAnimatedHeaderHeight() {
+  const animatedValue = React.useContext(AnimatedHeaderHeightContext);
+
+  if (animatedValue === undefined) {
+    throw new Error(
+      "Couldn't find the header height. Are you inside a screen in a native stack navigator?"
+    );
+  }
+
+  return animatedValue;
+}

package/src/views/DebugContainer.native.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Platform, View, ViewProps } from 'react-native';
-// @ts-ignore Getting private component
+import { Platform, View, type ViewProps } from 'react-native';
+// @ts-expect-error Getting private component
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import type { StackPresentationTypes } from 'react-native-screens';
 

package/src/views/DebugContainer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ViewProps } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 import type { StackPresentationTypes } from 'react-native-screens';
 
 type ContainerProps = ViewProps & {

package/src/views/FontProcessor.native.tsx

@@ -1,10 +1,9 @@
-// @ts-ignore: No declaration available
+// @ts-expect-error importing private module
 import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
 
 export function processFonts(
   fontFamilies: (string | undefined)[]
 ): (string | undefined)[] {
-  // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
   const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
   if (typeof fontFamilyProcessor === 'function') {
     return fontFamilies.map(fontFamilyProcessor);

package/src/views/HeaderConfig.tsx

@@ -1,7 +1,7 @@
 import { getHeaderTitle, HeaderTitle } from '@react-navigation/elements';
-import { Route, useLocale, useTheme } from '@react-navigation/native';
+import { type Route, useLocale, useTheme } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, StyleSheet, TextStyle, View } from 'react-native';
+import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
 import {
   isSearchBarAvailableForCurrentPlatform,
   ScreenStackHeaderBackButtonImage,
@@ -24,7 +24,6 @@ type Props = NativeStackNavigationOptions & {
 };
 
 export function HeaderConfig({
-  headerHeight,
   headerBackImageSource,
   headerBackButtonMenuEnabled,
   headerBackTitle,
@@ -177,118 +176,105 @@ export function HeaderConfig({
       headerTransparent !== false);
 
   return (
-    <>
-      {headerBackground != null ? (
-        <View
-          style={[
-            styles.background,
-            headerTransparent ? styles.translucent : null,
-            { height: headerHeight },
-          ]}
-        >
-          {headerBackground()}
-        </View>
-      ) : null}
-      <ScreenStackHeaderConfig
-        backButtonInCustomView={backButtonInCustomView}
-        backgroundColor={headerBackgroundColor}
-        backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
-        backTitleFontFamily={backTitleFontFamily}
-        backTitleFontSize={backTitleFontSize}
-        blurEffect={headerBlurEffect}
-        color={tintColor}
-        direction={direction}
-        disableBackButtonMenu={headerBackButtonMenuEnabled === false}
-        hidden={headerShown === false}
-        hideBackButton={headerBackVisible === false}
-        hideShadow={
-          headerShadowVisible === false ||
-          headerBackground != null ||
-          (headerTransparent && headerShadowVisible !== true)
-        }
-        largeTitle={headerLargeTitle}
-        largeTitleBackgroundColor={largeTitleBackgroundColor}
-        largeTitleColor={largeTitleColor}
-        largeTitleFontFamily={largeTitleFontFamily}
-        largeTitleFontSize={largeTitleFontSize}
-        largeTitleFontWeight={largeTitleFontWeight}
-        largeTitleHideShadow={headerLargeTitleShadowVisible === false}
-        title={titleText}
-        titleColor={titleColor}
-        titleFontFamily={titleFontFamily}
-        titleFontSize={titleFontSize}
-        titleFontWeight={titleFontWeight}
-        topInsetEnabled={headerTopInsetEnabled}
-        translucent={
-          // This defaults to `true`, so we can't pass `undefined`
-          translucent === true
-        }
-      >
-        {Platform.OS === 'ios' ? (
-          <>
-            {headerLeftElement != null ? (
-              <ScreenStackHeaderLeftView>
+    <ScreenStackHeaderConfig
+      backButtonInCustomView={backButtonInCustomView}
+      backgroundColor={headerBackgroundColor}
+      backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
+      backTitleFontFamily={backTitleFontFamily}
+      backTitleFontSize={backTitleFontSize}
+      blurEffect={headerBlurEffect}
+      color={tintColor}
+      direction={direction}
+      disableBackButtonMenu={headerBackButtonMenuEnabled === false}
+      hidden={headerShown === false}
+      hideBackButton={headerBackVisible === false}
+      hideShadow={
+        headerShadowVisible === false ||
+        headerBackground != null ||
+        (headerTransparent && headerShadowVisible !== true)
+      }
+      largeTitle={headerLargeTitle}
+      largeTitleBackgroundColor={largeTitleBackgroundColor}
+      largeTitleColor={largeTitleColor}
+      largeTitleFontFamily={largeTitleFontFamily}
+      largeTitleFontSize={largeTitleFontSize}
+      largeTitleFontWeight={largeTitleFontWeight}
+      largeTitleHideShadow={headerLargeTitleShadowVisible === false}
+      title={titleText}
+      titleColor={titleColor}
+      titleFontFamily={titleFontFamily}
+      titleFontSize={titleFontSize}
+      titleFontWeight={titleFontWeight}
+      topInsetEnabled={headerTopInsetEnabled}
+      translucent={
+        // This defaults to `true`, so we can't pass `undefined`
+        translucent === true
+      }
+    >
+      {Platform.OS === 'ios' ? (
+        <>
+          {headerLeftElement != null ? (
+            <ScreenStackHeaderLeftView>
+              {headerLeftElement}
+            </ScreenStackHeaderLeftView>
+          ) : null}
+          {headerTitleElement != null ? (
+            <ScreenStackHeaderCenterView>
+              {headerTitleElement}
+            </ScreenStackHeaderCenterView>
+          ) : null}
+        </>
+      ) : (
+        <>
+          {headerLeftElement != null || typeof headerTitle === 'function' ? (
+            <ScreenStackHeaderLeftView>
+              <View style={styles.row}>
                 {headerLeftElement}
-              </ScreenStackHeaderLeftView>
-            ) : null}
-            {headerTitleElement != null ? (
-              <ScreenStackHeaderCenterView>
-                {headerTitleElement}
-              </ScreenStackHeaderCenterView>
-            ) : null}
-          </>
-        ) : (
-          <>
-            {headerLeftElement != null || typeof headerTitle === 'function' ? (
-              <ScreenStackHeaderLeftView>
-                <View style={styles.row}>
-                  {headerLeftElement}
-                  {headerTitleAlign !== 'center' ? (
-                    typeof headerTitle === 'function' ? (
-                      headerTitleElement
-                    ) : (
-                      <HeaderTitle
-                        tintColor={tintColor}
-                        style={headerTitleStyleSupported}
-                      >
-                        {titleText}
-                      </HeaderTitle>
-                    )
-                  ) : null}
-                </View>
-              </ScreenStackHeaderLeftView>
-            ) : null}
-            {headerTitleAlign === 'center' ? (
-              <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}
-      </ScreenStackHeaderConfig>
-    </>
+                {headerTitleAlign !== 'center' ? (
+                  typeof headerTitle === 'function' ? (
+                    headerTitleElement
+                  ) : (
+                    <HeaderTitle
+                      tintColor={tintColor}
+                      style={headerTitleStyleSupported}
+                    >
+                      {titleText}
+                    </HeaderTitle>
+                  )
+                ) : null}
+              </View>
+            </ScreenStackHeaderLeftView>
+          ) : null}
+          {headerTitleAlign === 'center' ? (
+            <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}
+    </ScreenStackHeaderConfig>
   );
 }
 
@@ -297,15 +283,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  translucent: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1,
-    elevation: 1,
-  },
-  background: {
-    overflow: 'hidden',
-  },
 });