@react-navigation/native-stack 7.20.0 → 7.21.1

package/src/views/useHeaderConfigProps.tsx

@@ -10,6 +10,7 @@ import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
 import {
   type HeaderBarButtonItemMenuAction,
   type HeaderBarButtonItemSubmenu,
+  type HeaderBarButtonItemVisibilityPriority,
   type HeaderBarButtonItemWithAction,
   type HeaderBarButtonItemWithMenu,
   isSearchBarAvailableForCurrentPlatform,
@@ -29,7 +30,6 @@ import type {
   NativeStackHeaderItemMenuSubmenu,
   NativeStackNavigationOptions,
 } from '../types';
-import { processFonts } from './FontProcessor';
 
 type Props = NativeStackNavigationOptions & {
   headerTopInsetEnabled: boolean;
@@ -71,7 +71,13 @@ const processBarButtonItems = (
           );
         }
 
-        const { badge, label, labelStyle, icon, ...rest } = item;
+        const { badge, label, labelStyle, icon, visibilityPriority, ...rest } =
+          item;
+
+        const processedVisibilityPriority:
+          | HeaderBarButtonItemVisibilityPriority
+          | undefined =
+          visibilityPriority === 'default' ? 'standard' : visibilityPriority;
 
         const processedItemCommon = {
           ...rest,
@@ -82,6 +88,7 @@ const processBarButtonItems = (
             ...labelStyle,
           },
           icon: transformIcon(icon),
+          visibilityPriority: processedVisibilityPriority,
         };
 
         let processedItem:
@@ -164,13 +171,22 @@ const getMenuItem = (
   item: NativeStackHeaderItemMenuAction | NativeStackHeaderItemMenuSubmenu
 ): HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu => {
   if (item.type === 'submenu') {
-    const { label, icon, inline, layout, items, multiselectable, ...rest } =
-      item;
+    const {
+      label,
+      description,
+      icon,
+      inline,
+      layout,
+      items,
+      multiselectable,
+      ...rest
+    } = item;
 
     return {
       ...rest,
       icon: transformIcon(icon),
       title: label,
+      subtitle: description,
       displayAsPalette: layout === 'palette',
       displayInline: inline,
       singleSelection:
@@ -190,6 +206,7 @@ const getMenuItem = (
 };
 
 export function useHeaderConfigProps({
+  header,
   headerBackIcon,
   headerBackImageSource,
   headerBackButtonDisplayMode,
@@ -205,7 +222,9 @@ export function useHeaderConfigProps({
   headerLargeTitleStyle,
   headerBackground,
   headerLeft,
+  headerLeftBackgroundVisible,
   headerRight,
+  headerRightBackgroundVisible,
   headerShown,
   headerStyle,
   headerBlurEffect,
@@ -253,17 +272,11 @@ export function useHeaderConfigProps({
       ? 'transparent'
       : colors.card);
 
-  const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] =
-    processFonts([
-      headerBackTitleStyleFlattened.fontFamily,
-      headerLargeTitleStyleFlattened.fontFamily,
-      headerTitleStyleFlattened.fontFamily,
-    ]);
-
   const backTitleFontSize =
     'fontSize' in headerBackTitleStyleFlattened
       ? headerBackTitleStyleFlattened.fontSize
       : undefined;
+  const backTitleFontFamily = headerBackTitleStyleFlattened.fontFamily;
 
   const titleText = getHeaderTitle({ title, headerTitle }, route.name);
   const titleColor =
@@ -281,6 +294,7 @@ export function useHeaderConfigProps({
       ? headerTitleStyleFlattened.fontSize
       : undefined;
   const titleFontWeight = headerTitleStyleFlattened.fontWeight;
+  const titleFontFamily = headerTitleStyleFlattened.fontFamily;
 
   const largeTitleBackgroundColor = headerLargeStyleFlattened.backgroundColor;
   const largeTitleColor =
@@ -292,20 +306,14 @@ export function useHeaderConfigProps({
       ? headerLargeTitleStyleFlattened.fontSize
       : undefined;
   const largeTitleFontWeight = headerLargeTitleStyleFlattened.fontWeight;
+  const largeTitleFontFamily = headerLargeTitleStyleFlattened.fontFamily;
 
-  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 headerTitleStyleSupported: TextStyle = {
+    color: titleColor,
+    ...(titleFontFamily != null ? { fontFamily: titleFontFamily } : null),
+    ...(titleFontSize != null ? { fontSize: titleFontSize } : null),
+    ...(titleFontWeight != null ? { fontWeight: titleFontWeight } : null),
+  };
 
   const canGoBack = headerBack != null;
 
@@ -407,7 +415,9 @@ export function useHeaderConfigProps({
               return null;
             })
           ) : headerLeftElement != null ? (
-            <ScreenStackHeaderLeftView>
+            <ScreenStackHeaderLeftView
+              hidesSharedBackground={headerLeftBackgroundVisible === false}
+            >
               {headerLeftElement}
             </ScreenStackHeaderLeftView>
           ) : null}
@@ -481,7 +491,9 @@ export function useHeaderConfigProps({
           return null;
         })
       ) : headerRightElement != null ? (
-        <ScreenStackHeaderRightView>
+        <ScreenStackHeaderRightView
+          hidesSharedBackground={headerRightBackgroundVisible === false}
+        >
           {headerRightElement}
         </ScreenStackHeaderRightView>
       ) : null}
@@ -520,7 +532,8 @@ export function useHeaderConfigProps({
     largeTitleColor,
     largeTitleFontFamily,
     largeTitleFontSize,
-    largeTitleFontWeight,
+    largeTitleFontWeight:
+      largeTitleFontWeight != null ? String(largeTitleFontWeight) : undefined,
     largeTitleHideShadow: headerLargeTitleShadowVisible === false,
     title: titleText,
     titleColor,
@@ -539,7 +552,7 @@ export function useHeaderConfigProps({
     disableBottomInsetApplication:
       headerInsets?.bottom !== undefined ? !headerInsets.bottom : undefined,
     translucent: translucent === true,
-    children,
+    children: header === undefined ? children : null,
     headerLeftBarButtonItems: processBarButtonItems(leftItems, colors, fonts),
     headerRightBarButtonItems: processBarButtonItems(rightItems, colors, fonts),
     experimental_userInterfaceStyle: dark ? 'dark' : 'light',

package/lib/module/views/FontProcessor.js

@@ -1,6 +0,0 @@
-"use strict";
-
-export function processFonts(_) {
-  throw new Error('Not supported on Web');
-}
-//# sourceMappingURL=FontProcessor.js.map

package/lib/module/views/FontProcessor.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["processFonts","_","Error"],"sourceRoot":"../../../src","sources":["views/FontProcessor.tsx"],"mappings":";;AAAA,OAAO,SAASA,YAAYA,CAC1BC,CAAyB,EACD;EACxB,MAAM,IAAIC,KAAK,CAAC,sBAAsB,CAAC;AACzC","ignoreList":[]}

package/lib/module/views/FontProcessor.native.js

@@ -1,12 +0,0 @@
-"use strict";
-
-// @ts-expect-error importing private module
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
-export function processFonts(fontFamilies) {
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
-}
-//# sourceMappingURL=FontProcessor.native.js.map

package/lib/module/views/FontProcessor.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ReactNativeStyleAttributes","processFonts","fontFamilies","fontFamilyProcessor","fontFamily","process","map"],"sourceRoot":"../../../src","sources":["views/FontProcessor.native.tsx"],"mappings":";;AAAA;AACA,OAAOA,0BAA0B,MAAM,mEAAmE;AAE1G,OAAO,SAASC,YAAYA,CAC1BC,YAAoC,EACZ;EACxB,MAAMC,mBAAmB,GAAGH,0BAA0B,CAACI,UAAU,EAAEC,OAAO;EAC1E,IAAI,OAAOF,mBAAmB,KAAK,UAAU,EAAE;IAC7C,OAAOD,YAAY,CAACI,GAAG,CAACH,mBAAmB,CAAC;EAC9C;EACA,OAAOD,YAAY;AACrB","ignoreList":[]}

package/lib/typescript/src/views/FontProcessor.d.ts

@@ -1,2 +0,0 @@
-export declare function processFonts(_: (string | undefined)[]): (string | undefined)[];
-//# sourceMappingURL=FontProcessor.d.ts.map

package/lib/typescript/src/views/FontProcessor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FontProcessor.d.ts","sourceRoot":"","sources":["../../../../src/views/FontProcessor.tsx"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC1B,CAAC,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACxB,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAExB"}

package/lib/typescript/src/views/FontProcessor.native.d.ts

@@ -1,2 +0,0 @@
-export declare function processFonts(fontFamilies: (string | undefined)[]): (string | undefined)[];
-//# sourceMappingURL=FontProcessor.native.d.ts.map

package/lib/typescript/src/views/FontProcessor.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FontProcessor.native.d.ts","sourceRoot":"","sources":["../../../../src/views/FontProcessor.native.tsx"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAC1B,YAAY,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACnC,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAMxB"}

package/src/views/FontProcessor.native.tsx

@@ -1,12 +0,0 @@
-// @ts-expect-error importing private module
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
-
-export function processFonts(
-  fontFamilies: (string | undefined)[]
-): (string | undefined)[] {
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
-}

package/src/views/FontProcessor.tsx

@@ -1,5 +0,0 @@
-export function processFonts(
-  _: (string | undefined)[]
-): (string | undefined)[] {
-  throw new Error('Not supported on Web');
-}