@react-navigation/elements 3.0.0-alpha.0 → 3.0.0-alpha.10

package/src/Header/Header.tsx

@@ -90,12 +90,14 @@ export function Header(props: Props) {
     headerTitle: customTitle,
     headerTitleAlign = Platform.OS === 'ios' ? 'center' : 'left',
     headerLeft = back ? (props) => <HeaderBackButton {...props} /> : undefined,
+    headerLeftBackgroundVisible,
     headerSearchBarOptions,
     headerTransparent,
     headerTintColor,
     headerBackground,
     headerBlurEffect,
     headerRight,
+    headerRightBackgroundVisible,
     headerTitleAllowFontScaling: titleAllowFontScaling,
     headerTitleStyle: titleStyle,
     headerLeftContainerStyle: leftContainerStyle,
@@ -411,6 +413,7 @@ export function Header(props: Props) {
           ]}
         >
           <HeaderButtonBackground
+            plain={headerLeftBackgroundVisible === false}
             style={[styles.buttonContainer, leftContainerStyle]}
           >
             {leftButton}
@@ -441,6 +444,7 @@ export function Header(props: Props) {
           ]}
         >
           <HeaderButtonBackground
+            plain={headerRightBackgroundVisible === false}
             style={[styles.buttonContainer, rightContainerStyle]}
           >
             {rightButton}
@@ -454,7 +458,23 @@ export function Header(props: Props) {
                   headerSearchBarOptions?.onOpen?.();
                 }}
               >
-                <HeaderIcon source={searchIcon} tintColor={iconTintColor} />
+                <HeaderIcon
+                  icon={Platform.select({
+                    android: {
+                      type: 'materialSymbol',
+                      name: 'search',
+                    },
+                    ios: {
+                      type: 'sfSymbol',
+                      name: 'magnifyingglass',
+                    },
+                    default: {
+                      type: 'image',
+                      source: searchIcon,
+                    },
+                  })}
+                  color={iconTintColor}
+                />
               </HeaderButton>
             ) : null}
           </HeaderButtonBackground>

package/src/Header/HeaderBackButton.tsx

@@ -12,11 +12,12 @@ import {
   View,
 } from 'react-native';
 
-import backIcon from '../assets/back-icon.png';
+import backIconImage from '../assets/back-icon.png';
 import { isLiquidGlassSupported } from '../LiquidGlassView';
 import type {
   HeaderBackButtonDisplayMode,
   HeaderBackButtonProps,
+  HeaderIcon as HeaderIconType,
 } from '../types';
 import { BUTTON_SIZE, HeaderButton } from './HeaderButton';
 import { HeaderIcon } from './HeaderIcon';
@@ -24,7 +25,7 @@ import { HeaderIcon } from './HeaderIcon';
 export function HeaderBackButton({
   disabled,
   allowFontScaling,
-  backImage,
+  icon,
   label,
   labelStyle,
   displayMode = 'minimal',
@@ -48,17 +49,30 @@ export function HeaderBackButton({
   const isMinimal = displayMode === 'minimal' || measuredMinimal;
 
   const renderBackImage = () => {
-    if (backImage) {
-      return backImage({ tintColor: tintColor ?? colors.text });
-    } else {
-      return (
-        <HeaderIcon
-          source={backIcon}
-          tintColor={tintColor ?? colors.text}
-          style={styles.icon}
-        />
-      );
+    const color = tintColor ?? colors.text;
+
+    if (typeof icon === 'function') {
+      return icon({ tintColor: color });
     }
+
+    const backIcon =
+      icon ??
+      Platform.select<HeaderIconType>({
+        ios: {
+          type: 'sfSymbol',
+          name: 'chevron.left',
+        },
+        android: {
+          type: 'materialSymbol',
+          name: 'arrow_back',
+        },
+        default: {
+          type: 'image',
+          source: backIconImage,
+        },
+      });
+
+    return <HeaderIcon icon={backIcon} color={color} style={styles.icon} />;
   };
 
   const handlePress = () => {
@@ -231,8 +245,8 @@ function HeaderBackLabel({
 // iOS uses a smaller chevron, Android uses a larger arrow
 const ICON_WIDTH = Platform.OS === 'ios' ? 13 : 24;
 const ICON_SPACING_START = isLiquidGlassSupported
-  ? 13 // Standard distance of chevron from left edge in liquid glass
-  : 0; // Otherwise icon is aligned to the start of the button
+  ? 15 // Standard distance of chevron from left edge in liquid glass
+  : 2; // Otherwise icon is aligned to the start of the button
 
 // Standard distance between chevron and label
 const ICON_LABEL_SPACING = 9;

package/src/Header/HeaderButtonBackground.tsx

@@ -3,12 +3,18 @@ import { Animated, StyleSheet } from 'react-native';
 import { LiquidGlassView } from '../LiquidGlassView';
 import { BUTTON_SIZE } from './HeaderButton';
 
-type Props = React.ComponentProps<typeof Animated.View>;
+type Props = React.ComponentProps<typeof Animated.View> & {
+  plain?: boolean;
+};
 
 const AnimatedLiquidGlassView =
   Animated.createAnimatedComponent(LiquidGlassView);
 
-export function HeaderButtonBackground({ style, ...rest }: Props) {
+export function HeaderButtonBackground({ plain, style, ...rest }: Props) {
+  if (plain) {
+    return <Animated.View style={[styles.container, style]} {...rest} />;
+  }
+
   return (
     <AnimatedLiquidGlassView
       interactive

package/src/Header/HeaderIcon.tsx

@@ -1,24 +1,64 @@
-import { useLocale, useTheme } from '@react-navigation/native';
-import { Image, type ImageProps, Platform, StyleSheet } from 'react-native';
+import { MaterialSymbol, SFSymbol, useLocale } from '@react-navigation/native';
+import {
+  type ColorValue,
+  Image,
+  type ImageProps,
+  Platform,
+  StyleSheet,
+} from 'react-native';
 
-export function HeaderIcon({ source, style, ...rest }: ImageProps) {
-  const { colors } = useTheme();
+import type { HeaderIcon as HeaderIconType } from '../types';
+
+type Props = Omit<ImageProps, 'source'> & {
+  icon: HeaderIconType;
+  color: ColorValue;
+};
+
+export function HeaderIcon({ icon, color, style, ...rest }: Props) {
   const { direction } = useLocale();
 
+  const iconStyle = [styles.icon, direction === 'rtl' && styles.flip, style];
+
+  if (icon.type === 'sfSymbol') {
+    return (
+      <SFSymbol
+        name={icon.name}
+        color={color}
+        size={ICON_SIZE}
+        style={iconStyle}
+        {...rest}
+      />
+    );
+  }
+
+  if (icon.type === 'materialSymbol') {
+    return (
+      <MaterialSymbol
+        name={icon.name}
+        variant={icon.variant}
+        weight={icon.weight}
+        color={color}
+        size={ICON_SIZE}
+        style={iconStyle}
+        {...rest}
+      />
+    );
+  }
+
   return (
     <Image
-      source={source}
+      source={icon.source}
       resizeMode="contain"
       fadeDuration={0}
-      tintColor={colors.text}
-      style={[styles.icon, direction === 'rtl' && styles.flip, style]}
+      tintColor={color}
+      style={iconStyle}
       {...rest}
     />
   );
 }
 
-export const ICON_SIZE = Platform.OS === 'ios' ? 21 : 24;
-export const ICON_MARGIN = Platform.OS === 'ios' ? 8 : 3;
+const ICON_SIZE = Platform.OS === 'ios' ? 21 : 24;
+const ICON_MARGIN = Platform.OS === 'ios' ? 8 : 3;
 
 const styles = StyleSheet.create({
   icon: {

package/src/Header/HeaderSearchBar.tsx

@@ -1,10 +1,9 @@
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { SFSymbol, useNavigation, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
   BackHandler,
   type ColorValue,
-  Image,
   type NativeEventSubscription,
   Platform,
   type StyleProp,
@@ -14,10 +13,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import clearIcon from '../assets/clear-icon.png';
 import closeIcon from '../assets/close-icon.png';
-import searchIcon from '../assets/search-icon.png';
-import searchIconLegacy from '../assets/search-icon-legacy.png';
 import { Color } from '../Color';
 import {
   AnimatedLiquidGlassContainerView,
@@ -210,9 +206,10 @@ function HeaderSearchBarInternal(
       ) : null}
       <HeaderButtonBackground style={styles.searchbarContainer}>
         {Platform.OS === 'ios' ? (
-          <HeaderIcon
-            source={isLiquidGlassSupported ? searchIcon : searchIconLegacy}
-            tintColor={textColor}
+          <SFSymbol
+            name="magnifyingglass"
+            size={SEARCH_ICON_SIZE}
+            color={textColor}
             style={[
               styles.inputSearchIconIos,
               !isLiquidGlassSupported && styles.inputSearchIconIosLegacy,
@@ -263,10 +260,10 @@ function HeaderSearchBarInternal(
               !isLiquidGlassSupported && styles.clearButtonIosLegacy,
             ]}
           >
-            <Image
-              source={clearIcon}
-              resizeMode="contain"
-              tintColor={textColor}
+            <SFSymbol
+              name="xmark.circle.fill"
+              size={CLEAR_ICON_SIZE}
+              color={textColor}
               style={styles.clearIconIos}
             />
           </PlatformPressable>
@@ -278,7 +275,19 @@ function HeaderSearchBarInternal(
           onPress={onClear}
           style={[styles.closeButton, { opacity: clearVisibleAnim }]}
         >
-          <HeaderIcon source={closeIcon} tintColor={textColor} />
+          <HeaderIcon
+            icon={Platform.select({
+              android: {
+                type: 'materialSymbol',
+                name: 'close',
+              },
+              default: {
+                type: 'image',
+                source: closeIcon,
+              },
+            })}
+            color={textColor}
+          />
         </HeaderButton>
       ) : null}
       {Platform.OS === 'ios' ? (
@@ -288,7 +297,7 @@ function HeaderSearchBarInternal(
               accessibilityLabel={cancelButtonText}
               onPress={cancelSearch}
             >
-              <HeaderIcon source={closeIcon} tintColor={textColor} />
+              <SFSymbol name="xmark" color={textColor} />
             </HeaderButton>
           </HeaderButtonBackground>
         ) : (
@@ -332,14 +341,14 @@ const styles = StyleSheet.create({
   },
   inputSearchIconIos: {
     position: 'absolute',
-    opacity: 0.5,
-    top: SEARCHBAR_ICON_SPACING,
-    left: SEARCHBAR_ICON_SPACING,
+    top: '50%',
+    left: BUTTON_SPACING + SEARCHBAR_ICON_SPACING / 2,
+    marginTop: -SEARCH_ICON_SIZE / 2,
     height: SEARCH_ICON_SIZE,
     width: SEARCH_ICON_SIZE,
   },
   inputSearchIconIosLegacy: {
-    top: SEARCHBAR_LEGACY_VERTICAL_OFFSET_IOS,
+    top: SEARCHBAR_ICON_SPACING,
   },
   backButton: {
     alignSelf: 'center',

package/src/PlatformColor.native.tsx

@@ -1 +1 @@
-export { PlatformColor } from 'react-native';
+export { DynamicColorIOS, PlatformColor } from 'react-native';

package/src/PlatformColor.tsx

@@ -6,3 +6,7 @@
 export const PlatformColor:
   | typeof import('react-native').PlatformColor
   | undefined = undefined;
+
+export const DynamicColorIOS:
+  | typeof import('react-native').DynamicColorIOS
+  | undefined = undefined;

package/src/index.tsx

@@ -1,9 +1,3 @@
-import backIcon from './assets/back-icon.png';
-import clearIcon from './assets/clear-icon.png';
-import closeIcon from './assets/close-icon.png';
-import searchIcon from './assets/search-icon.png';
-import searchIconLegacy from './assets/search-icon-legacy.png';
-
 export { Badge } from './Badge';
 export { Button } from './Button';
 export { getDefaultSidebarWidth } from './getDefaultSidebarWidth';
@@ -22,14 +16,5 @@ export { getLabel } from './Label/getLabel';
 export { Label } from './Label/Label';
 export { PlatformPressable } from './PlatformPressable';
 export { Text } from './Text';
-export { useFrameSize } from './useFrameSize';
-
-export const Assets = [
-  backIcon,
-  searchIcon,
-  searchIconLegacy,
-  closeIcon,
-  clearIcon,
-];
-
 export * from './types';
+export { useFrameSize } from './useFrameSize';

package/src/types.tsx

@@ -1,6 +1,12 @@
+import type {
+  MaterialSymbolProps,
+  SFSymbolProps,
+} from '@react-navigation/native';
+import * as React from 'react';
 import type {
   Animated,
   ColorValue,
+  ImageSourcePropType,
   LayoutChangeEvent,
   StyleProp,
   TextInputProps,
@@ -123,17 +129,6 @@ export type HeaderOptions = {
    * Options to render a search bar.
    */
   headerSearchBarOptions?: HeaderSearchBarOptions;
-  /**
-   * Function which returns a React Element to display on the left side of the header.
-   */
-  headerLeft?: (
-    props: HeaderBackButtonProps & {
-      /**
-       * Whether it's possible to navigate back.
-       */
-      canGoBack?: boolean;
-    }
-  ) => React.ReactNode;
   /**
    * How the back button displays icon and title.
    *
@@ -154,6 +149,26 @@ export type HeaderOptions = {
     fontFamily?: string;
     fontSize?: number;
   }>;
+  /**
+   * Function which returns a React Element to display on the left side of the header.
+   */
+  headerLeft?: (
+    props: HeaderBackButtonProps & {
+      /**
+       * Whether it's possible to navigate back.
+       */
+      canGoBack?: boolean;
+    }
+  ) => React.ReactNode;
+  /**
+   * Whether the liquid glass background is visible for the item.
+   *
+   * Only supported on iOS 26.0 and later.
+   * Older versions of iOS and other platforms never show the background.
+   *
+   * Defaults to `true`.
+   */
+  headerLeftBackgroundVisible?: boolean;
   /**
    * Style object for the container of the `headerLeft` element`.
    */
@@ -167,6 +182,15 @@ export type HeaderOptions = {
     pressOpacity?: number;
     canGoBack: boolean;
   }) => React.ReactNode;
+  /**
+   * Whether the liquid glass background is visible for the item.
+   *
+   * Only supported on iOS 26.0 and later.
+   * Older versions of iOS and other platforms never show the background.
+   *
+   * Defaults to `true`.
+   */
+  headerRightBackgroundVisible?: boolean;
   /**
    * Style object for the container of the `headerRight` element.
    */
@@ -307,11 +331,36 @@ export type HeaderButtonProps = {
   children: React.ReactNode;
 };
 
+export type HeaderIcon =
+  | {
+      type: 'image';
+      source: ImageSourcePropType;
+    }
+  | {
+      type: 'sfSymbol';
+      name: SFSymbolProps['name'];
+    }
+  | ({
+      type: 'materialSymbol';
+    } & Pick<MaterialSymbolProps, 'name' | 'variant' | 'weight'>);
+
 export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
   /**
-   * Function which returns a React Element to display custom image in header's back button.
+   * Icon to display for the back button.
+   *
+   * Supported types:
+   * - image: custom image source
+   * - sfSymbol: SF Symbol icon (iOS only)
+   * - materialSymbol: material symbol icon (Android only)
+   * - React Node: function that returns a React Element
+   *
+   * Defaults to back icon image for the platform
+   * - A chevron on iOS
+   * - An arrow on Android
    */
-  backImage?: (props: { tintColor: ColorValue }) => React.ReactNode;
+  icon?:
+    | HeaderIcon
+    | ((props: { tintColor: ColorValue | undefined }) => React.ReactNode);
   /**
    * Label text for the button. Usually the title of the previous screen.
    * By default, this is only shown on iOS.

package/lib/module/assets/back-icon.ios.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.527 1.485L1.584 10.5L10.559 19.542" stroke="#0c0000" stroke-width="2.5" stroke-linecap="round"
-    stroke-linejoin="round" />
-</svg>

package/lib/module/assets/search-icon.ios.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="9.75" cy="9.75" r="8" stroke="#000" stroke-width="2" />
-  <path d="M15.5 15.5L22 22" stroke="#000" stroke-width="2" stroke-linecap="round" />
-</svg>

package/src/assets/back-icon.ios.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.527 1.485L1.584 10.5L10.559 19.542" stroke="#0c0000" stroke-width="2.5" stroke-linecap="round"
-    stroke-linejoin="round" />
-</svg>

package/src/assets/search-icon.ios.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="9.75" cy="9.75" r="8" stroke="#000" stroke-width="2" />
-  <path d="M15.5 15.5L22 22" stroke="#000" stroke-width="2" stroke-linecap="round" />
-</svg>