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

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,
@@ -325,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>