@react-navigation/native-stack 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/views/useHeaderConfigProps.tsx

@@ -1,16 +1,19 @@
 import { getHeaderTitle, HeaderTitle } from '@react-navigation/elements';
 import { Color } from '@react-navigation/elements/internal';
 import {
+  MaterialSymbol,
   type Route,
   type Theme,
   useLocale,
   useTheme,
 } from '@react-navigation/native';
+import { useMemo } from 'react';
 import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
 import {
-  type HeaderBarButtonItem,
   type HeaderBarButtonItemMenuAction,
   type HeaderBarButtonItemSubmenu,
+  type HeaderBarButtonItemWithAction,
+  type HeaderBarButtonItemWithMenu,
   isSearchBarAvailableForCurrentPlatform,
   ScreenStackHeaderBackButtonImage,
   ScreenStackHeaderCenterView,
@@ -23,6 +26,7 @@ import {
 
 import type {
   NativeStackHeaderItem,
+  NativeStackHeaderItemButton,
   NativeStackHeaderItemMenuAction,
   NativeStackHeaderItemMenuSubmenu,
   NativeStackNavigationOptions,
@@ -35,6 +39,8 @@ type Props = NativeStackNavigationOptions & {
   route: Route<string>;
 };
 
+const ICON_SIZE = 24;
+
 const processBarButtonItems = (
   items: NativeStackHeaderItem[] | undefined,
   colors: Theme['colors'],
@@ -70,7 +76,7 @@ const processBarButtonItems = (
 
         const { badge, label, labelStyle, icon, ...rest } = item;
 
-        let processedItem: HeaderBarButtonItem = {
+        const processedItemCommon = {
           ...rest,
           index,
           title: label,
@@ -78,40 +84,43 @@ const processBarButtonItems = (
             ...fonts.regular,
             ...labelStyle,
           },
-          icon:
-            icon?.type === 'image'
-              ? icon.tinted === false
-                ? {
-                    type: 'imageSource',
-                    imageSource: icon.source,
-                  }
-                : {
-                    type: 'templateSource',
-                    templateSource: icon.source,
-                  }
-              : icon,
+          icon: transformIcon(icon),
         };
 
-        if (processedItem.type === 'menu' && item.type === 'menu') {
+        let processedItem:
+          | HeaderBarButtonItemWithAction
+          | HeaderBarButtonItemWithMenu;
+
+        if (processedItemCommon.type === 'menu' && item.type === 'menu') {
           const { multiselectable, layout } = item.menu;
 
           processedItem = {
-            ...processedItem,
+            ...processedItemCommon,
             menu: {
-              ...processedItem.menu,
-              singleSelection: !multiselectable,
+              ...processedItemCommon.menu,
+              singleSelection:
+                typeof multiselectable === 'boolean'
+                  ? !multiselectable
+                  : undefined,
               displayAsPalette: layout === 'palette',
               items: item.menu.items.map(getMenuItem),
             },
           };
+        } else if (
+          processedItemCommon.type === 'button' &&
+          item.type === 'button'
+        ) {
+          processedItem = processedItemCommon;
+        } else {
+          throw new Error(
+            `Invalid item type: ${JSON.stringify(item)}. Valid types are 'button' and 'menu'.`
+          );
         }
 
         if (badge) {
           const badgeBackgroundColor =
             badge.style?.backgroundColor ?? colors.notification;
-          const badgeTextColor = Color(badgeBackgroundColor)?.isLight()
-            ? 'black'
-            : 'white';
+          const badgeTextColor = Color.foreground(badgeBackgroundColor);
 
           processedItem = {
             ...processedItem,
@@ -138,26 +147,44 @@ const processBarButtonItems = (
     .filter((item) => item != null);
 };
 
+const transformIcon = (
+  icon: NativeStackHeaderItemButton['icon']
+):
+  | HeaderBarButtonItemWithAction['icon']
+  | HeaderBarButtonItemWithMenu['icon'] => {
+  if (icon?.type === 'image') {
+    return icon.tinted === false
+      ? { type: 'imageSource', imageSource: icon.source }
+      : { type: 'templateSource', templateSource: icon.source };
+  }
+
+  return icon;
+};
+
 const getMenuItem = (
   item: NativeStackHeaderItemMenuAction | NativeStackHeaderItemMenuSubmenu
 ): HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu => {
   if (item.type === 'submenu') {
-    const { label, inline, layout, items, multiselectable, ...rest } = item;
+    const { label, icon, inline, layout, items, multiselectable, ...rest } =
+      item;
 
     return {
       ...rest,
+      icon: transformIcon(icon),
       title: label,
       displayAsPalette: layout === 'palette',
       displayInline: inline,
-      singleSelection: !multiselectable,
+      singleSelection:
+        typeof multiselectable === 'boolean' ? !multiselectable : undefined,
       items: items.map(getMenuItem),
     };
   }
 
-  const { label, description, ...rest } = item;
+  const { label, icon, description, ...rest } = item;
 
   return {
     ...rest,
+    icon: transformIcon(icon),
     title: label,
     subtitle: description,
   };
@@ -216,6 +243,15 @@ export function useHeaderConfigProps({
   const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
   const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
 
+  const headerBackgroundColor =
+    headerStyleFlattened.backgroundColor ??
+    (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);
+
   const backTitleFontSize =
     'fontSize' in headerBackTitleStyleFlattened
       ? headerBackTitleStyleFlattened.fontSize
@@ -226,7 +262,13 @@ export function useHeaderConfigProps({
   const titleColor =
     'color' in headerTitleStyleFlattened
       ? headerTitleStyleFlattened.color
-      : (headerTintColor ?? colors.text);
+      : Platform.OS === 'ios' &&
+          (headerTransparent || headerBackgroundColor === 'transparent')
+        ? // On iOS 26, we want header title to change color based on content underneath
+          // So we don't set an explicit color when header is transparent
+          // Unless a custom tint color is explicitly provided
+          headerTintColor
+        : (headerTintColor ?? colors.text);
   const titleFontSize =
     'fontSize' in headerTitleStyleFlattened
       ? headerTitleStyleFlattened.fontSize
@@ -260,15 +302,6 @@ export function useHeaderConfigProps({
     headerTitleStyleSupported.fontWeight = titleFontWeight;
   }
 
-  const headerBackgroundColor =
-    headerStyleFlattened.backgroundColor ??
-    (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);
-
   const canGoBack = headerBack != null;
 
   const headerLeftElement = headerLeft?.({
@@ -342,6 +375,37 @@ export function useHeaderConfigProps({
     rightItems = [...rightItems].reverse();
   }
 
+  const backImageSource = useMemo(() => {
+    if (headerBackIcon == null && Platform.OS === 'android') {
+      try {
+        // Use Material Symbol as default back icon on Android
+        // So it's consistent with other material icons
+        // Based on the available variant and weight
+        return MaterialSymbol.getImageSource({
+          name: 'arrow_back',
+          color: tintColor,
+          size: ICON_SIZE,
+        });
+      } catch (e) {
+        // Fallback to default if symbol is not available
+        // This can happen if no font, or multiple fonts are available
+        // Or in tests where native module is not available
+      }
+    } else if (headerBackIcon?.type === 'image') {
+      return headerBackIcon.source;
+    } else if (headerBackIcon?.type === 'materialSymbol') {
+      return MaterialSymbol.getImageSource({
+        name: headerBackIcon.name,
+        variant: headerBackIcon.variant,
+        weight: headerBackIcon.weight,
+        color: tintColor,
+        size: ICON_SIZE,
+      });
+    }
+
+    return undefined;
+  }, [headerBackIcon, tintColor]);
+
   const children = (
     <>
       {Platform.OS === 'ios' ? (
@@ -417,8 +481,8 @@ export function useHeaderConfigProps({
           ) : null}
         </>
       )}
-      {headerBackIcon !== undefined ? (
-        <ScreenStackHeaderBackButtonImage source={headerBackIcon.source} />
+      {backImageSource != null ? (
+        <ScreenStackHeaderBackButtonImage source={backImageSource} />
       ) : null}
       {Platform.OS === 'ios' && rightItems ? (
         rightItems.map((item, index) => {