@react-navigation/native-stack 7.8.6 → 8.0.0-alpha.0

package/src/views/useHeaderConfigProps.tsx

@@ -1,11 +1,11 @@
 import { getHeaderTitle, HeaderTitle } from '@react-navigation/elements';
+import { Color } from '@react-navigation/elements/internal';
 import {
   type Route,
   type Theme,
   useLocale,
   useTheme,
 } from '@react-navigation/native';
-import color from 'color';
 import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
 import {
   type HeaderBarButtonItem,
@@ -27,7 +27,6 @@ import type {
   NativeStackHeaderItemMenuSubmenu,
   NativeStackNavigationOptions,
 } from '../types';
-import { processFonts } from './FontProcessor';
 
 type Props = NativeStackNavigationOptions & {
   headerTopInsetEnabled: boolean;
@@ -94,10 +93,14 @@ const processBarButtonItems = (
         };
 
         if (processedItem.type === 'menu' && item.type === 'menu') {
+          const { multiselectable, layout } = item.menu;
+
           processedItem = {
             ...processedItem,
             menu: {
               ...processedItem.menu,
+              singleSelection: !multiselectable,
+              displayAsPalette: layout === 'palette',
               items: item.menu.items.map(getMenuItem),
             },
           };
@@ -106,7 +109,7 @@ const processBarButtonItems = (
         if (badge) {
           const badgeBackgroundColor =
             badge.style?.backgroundColor ?? colors.notification;
-          const badgeTextColor = color(badgeBackgroundColor).isLight()
+          const badgeTextColor = Color(badgeBackgroundColor)?.isLight()
             ? 'black'
             : 'white';
 
@@ -138,25 +141,30 @@ const processBarButtonItems = (
 const getMenuItem = (
   item: NativeStackHeaderItemMenuAction | NativeStackHeaderItemMenuSubmenu
 ): HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu => {
-  const { label, ...rest } = item;
+  if (item.type === 'submenu') {
+    const { label, inline, layout, items, multiselectable, ...rest } = item;
 
-  if (rest.type === 'submenu') {
     return {
       ...rest,
       title: label,
-      items: rest.items.map(getMenuItem),
+      displayAsPalette: layout === 'palette',
+      displayInline: inline,
+      singleSelection: !multiselectable,
+      items: items.map(getMenuItem),
     };
   }
 
+  const { label, description, ...rest } = item;
+
   return {
     ...rest,
     title: label,
+    subtitle: description,
   };
 };
 
 export function useHeaderConfigProps({
   headerBackIcon,
-  headerBackImageSource,
   headerBackButtonDisplayMode,
   headerBackButtonMenuEnabled,
   headerBackTitle,
@@ -164,8 +172,7 @@ export function useHeaderConfigProps({
   headerBackVisible,
   headerShadowVisible,
   headerLargeStyle,
-  headerLargeTitle: headerLargeTitleDeprecated,
-  headerLargeTitleEnabled = headerLargeTitleDeprecated,
+  headerLargeTitleEnabled,
   headerLargeTitleShadowVisible,
   headerLargeTitleStyle,
   headerBackground,
@@ -188,7 +195,7 @@ export function useHeaderConfigProps({
   unstable_headerRightItems: headerRightItems,
 }: Props): ScreenStackHeaderConfigProps {
   const { direction } = useLocale();
-  const { colors, fonts } = useTheme();
+  const { colors, fonts, dark } = useTheme();
   const tintColor =
     headerTintColor ?? (Platform.OS === 'ios' ? colors.primary : colors.text);
 
@@ -207,17 +214,11 @@ export function useHeaderConfigProps({
   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 backTitleFontFamily = headerBackTitleStyleFlattened.fontFamily;
 
   const titleText = getHeaderTitle({ title, headerTitle }, route.name);
   const titleColor =
@@ -229,6 +230,7 @@ export function useHeaderConfigProps({
       ? headerTitleStyleFlattened.fontSize
       : undefined;
   const titleFontWeight = headerTitleStyleFlattened.fontWeight;
+  const titleFontFamily = headerTitleStyleFlattened.fontFamily;
 
   const largeTitleBackgroundColor = headerLargeStyleFlattened.backgroundColor;
   const largeTitleColor =
@@ -240,6 +242,7 @@ export function useHeaderConfigProps({
       ? headerLargeTitleStyleFlattened.fontSize
       : undefined;
   const largeTitleFontWeight = headerLargeTitleStyleFlattened.fontWeight;
+  const largeTitleFontFamily = headerLargeTitleStyleFlattened.fontFamily;
 
   const headerTitleStyleSupported: TextStyle = { color: titleColor };
 
@@ -257,7 +260,10 @@ export function useHeaderConfigProps({
 
   const headerBackgroundColor =
     headerStyleFlattened.backgroundColor ??
-    (headerBackground != null || headerTransparent
+    (headerBackground != null ||
+    headerTransparent ||
+    // The title becomes invisible if background color is set with large title on iOS 26
+    (Platform.OS === 'ios' && headerLargeTitleEnabled)
       ? 'transparent'
       : colors.card);
 
@@ -284,14 +290,8 @@ export function useHeaderConfigProps({
         })
       : null;
 
-  const supportsHeaderSearchBar =
-    typeof isSearchBarAvailableForCurrentPlatform === 'boolean'
-      ? isSearchBarAvailableForCurrentPlatform
-      : // Fallback for older versions of react-native-screens
-        Platform.OS === 'ios' && SearchBar != null;
-
   const hasHeaderSearchBar =
-    supportsHeaderSearchBar && headerSearchBarOptions != null;
+    isSearchBarAvailableForCurrentPlatform && headerSearchBarOptions != null;
 
   /**
    * We need to set this in if:
@@ -413,10 +413,8 @@ export function useHeaderConfigProps({
           ) : null}
         </>
       )}
-      {headerBackIcon !== undefined || headerBackImageSource !== undefined ? (
-        <ScreenStackHeaderBackButtonImage
-          source={headerBackIcon?.source ?? headerBackImageSource}
-        />
+      {headerBackIcon !== undefined ? (
+        <ScreenStackHeaderBackButtonImage source={headerBackIcon.source} />
       ) : null}
       {Platform.OS === 'ios' && rightItems ? (
         rightItems.map((item, index) => {
@@ -441,7 +439,10 @@ export function useHeaderConfigProps({
       ) : null}
       {hasHeaderSearchBar ? (
         <ScreenStackHeaderSearchBarView>
-          <SearchBar {...headerSearchBarOptions} />
+          <SearchBar
+            {...headerSearchBarOptions}
+            onChangeText={headerSearchBarOptions.onChange}
+          />
         </ScreenStackHeaderSearchBarView>
       ) : null}
     </>
@@ -486,5 +487,6 @@ export function useHeaderConfigProps({
     children,
     headerLeftBarButtonItems: processBarButtonItems(leftItems, colors, fonts),
     headerRightBarButtonItems: processBarButtonItems(rightItems, colors, fonts),
+    experimental_userInterfaceStyle: dark ? 'dark' : 'light',
   } as const;
 }

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');
-}