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

package/src/Color.tsx

@@ -1,10 +1,10 @@
 // eslint-disable-next-line no-restricted-imports
 import OriginalColor from 'color';
-import type { ColorValue } from 'react-native';
+import { type ColorValue, Platform } from 'react-native';
+
+import { DynamicColorIOS, PlatformColor } from './PlatformColor';
 
 type ColorType = {
-  isLight(): boolean;
-  isDark(): boolean;
   alpha(amount: number): ColorType;
   alpha(): number;
   fade(amount: number): ColorType;
@@ -19,3 +19,133 @@ export function Color(value: ColorValue): ColorType | undefined {
 
   return undefined;
 }
+
+Color.foreground = (color: ColorValue): ColorValue => {
+  const value = color as unknown;
+
+  if (typeof value === 'object' && value != null) {
+    // Special case for Android platform colors
+    // Available colors: https://developer.android.com/reference/android/R.color
+    if (
+      Platform.OS === 'android' &&
+      PlatformColor &&
+      'resource_paths' in value &&
+      Array.isArray(value.resource_paths) &&
+      typeof value.resource_paths[0] === 'string'
+    ) {
+      const name = value.resource_paths[0].replace('@android:color/', '');
+
+      if (name in ANDROID_COLOR_MAP) {
+        return PlatformColor(`@android:color/${ANDROID_COLOR_MAP[name]}`);
+      }
+    }
+
+    // Special case for iOS platform colors
+    if (
+      Platform.OS === 'ios' &&
+      PlatformColor &&
+      'semantic' in value &&
+      Array.isArray(value.semantic) &&
+      typeof value.semantic[0] === 'string'
+    ) {
+      const name = value.semantic[0];
+
+      if (name in IOS_COLOR_MAP) {
+        const foreground = IOS_COLOR_MAP[name];
+        return foreground === 'white' || foreground === 'black'
+          ? foreground
+          : PlatformColor(foreground);
+      }
+    }
+
+    // Special case for iOS dynamic colors
+    if (
+      Platform.OS === 'ios' &&
+      DynamicColorIOS &&
+      'dynamic' in value &&
+      typeof value.dynamic === 'object' &&
+      value.dynamic != null &&
+      'light' in value.dynamic &&
+      typeof value.dynamic.light === 'string' &&
+      'dark' in value.dynamic &&
+      typeof value.dynamic.dark === 'string'
+    ) {
+      const lightForeground = Color.foreground(value.dynamic.light);
+      const darkForeground = Color.foreground(value.dynamic.dark);
+
+      if (lightForeground && darkForeground) {
+        return DynamicColorIOS({
+          light: lightForeground,
+          dark: darkForeground,
+        });
+      }
+    }
+  } else if (typeof color === 'string' && !color.startsWith('var(')) {
+    const processed = OriginalColor(color);
+
+    if (processed.isLight()) {
+      return processed.darken(0.71).string();
+    }
+  }
+
+  return '#fff';
+};
+
+const ANDROID_COLOR_MAP: Record<string, string> = {
+  system_background_dark: 'system_on_background_dark',
+  system_background_light: 'system_on_background_light',
+  system_error_container_dark: 'system_on_error_container_dark',
+  system_error_container_light: 'system_on_error_container_light',
+  system_error_dark: 'system_on_error_dark',
+  system_error_light: 'system_on_error_light',
+  system_primary_container_dark: 'system_on_primary_container_dark',
+  system_primary_container_light: 'system_on_primary_container_light',
+  system_primary_dark: 'system_on_primary_dark',
+  system_primary_fixed: 'system_on_primary_fixed',
+  system_primary_light: 'system_on_primary_light',
+  system_secondary_container_dark: 'system_on_secondary_container_dark',
+  system_secondary_container_light: 'system_on_secondary_container_light',
+  system_secondary_dark: 'system_on_secondary_dark',
+  system_secondary_fixed: 'system_on_secondary_fixed',
+  system_secondary_light: 'system_on_secondary_light',
+  system_surface_dark: 'system_on_surface_dark',
+  system_surface_disabled: 'system_on_surface_disabled',
+  system_surface_light: 'system_on_surface_light',
+  system_surface_variant_dark: 'system_on_surface_variant_dark',
+  system_surface_variant_light: 'system_on_surface_variant_light',
+};
+
+const IOS_COLOR_MAP: Record<string, string> = {
+  systemBackground: 'label',
+  secondarySystemBackground: 'label',
+  tertiarySystemBackground: 'label',
+  systemGroupedBackground: 'label',
+  secondarySystemGroupedBackground: 'label',
+  tertiarySystemGroupedBackground: 'label',
+
+  systemFill: 'label',
+  secondarySystemFill: 'label',
+  tertiarySystemFill: 'label',
+  quaternarySystemFill: 'label',
+
+  systemRed: 'white',
+  systemGreen: 'white',
+  systemBlue: 'white',
+  systemIndigo: 'white',
+  systemPurple: 'white',
+  systemBrown: 'white',
+
+  systemOrange: 'black',
+  systemYellow: 'black',
+  systemMint: 'black',
+  systemTeal: 'black',
+  systemCyan: 'black',
+  systemPink: 'black',
+
+  systemGray: 'label',
+  systemGray2: 'label',
+  systemGray3: 'label',
+  systemGray4: 'label',
+  systemGray5: 'label',
+  systemGray6: 'label',
+};

package/src/Container.tsx

@@ -2,17 +2,28 @@ import { Platform, View, type ViewStyle } from 'react-native';
 
 export type Props = {
   inert?: boolean;
-  style?: React.CSSProperties & ViewStyle;
+  style?: ViewStyle &
+    Omit<React.CSSProperties, 'backgroundColor'> & {
+      backgroundColor?: ViewStyle['backgroundColor'];
+    };
   children: React.ReactNode;
 };
 
 export function Container({ inert, children, style }: Props) {
   if (Platform.OS === 'web') {
+    const { backgroundColor, ...rest } = style ?? {};
+
     return (
       <div
         inert={inert}
         aria-hidden={inert}
-        style={{ ...DEFAULT_STYLE, ...style }}
+        style={{
+          ...DEFAULT_STYLE,
+          ...rest,
+          backgroundColor:
+            // In practice we only get string on web instead of OpaqueValue
+            typeof backgroundColor === 'string' ? backgroundColor : undefined,
+        }}
       >
         {children}
       </div>

package/src/Header/Header.tsx

@@ -458,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/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/Screen.tsx

@@ -6,18 +6,13 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import * as React from 'react';
-import {
-  Animated,
-  type StyleProp,
-  StyleSheet,
-  View,
-  type ViewStyle,
-} from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 import { HeaderHeightContext } from './Header/HeaderHeightContext';
 import { HeaderShownContext } from './Header/HeaderShownContext';
+import { Container } from './internal';
 import { useFrameSize } from './useFrameSize';
 
 type Props = {
@@ -29,7 +24,7 @@ type Props = {
   headerShown?: boolean;
   headerStatusBarHeight?: number;
   headerTransparent?: boolean;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: React.ComponentProps<typeof Container>['style'];
   children: React.ReactNode;
 };
 
@@ -72,12 +67,17 @@ export function Screen(props: Props) {
   }, [route.name]);
 
   return (
-    <Animated.View
-      aria-hidden={!focused}
-      style={[styles.container, { backgroundColor: colors.background }, style]}
+    <Container
+      inert={!focused}
+      style={{
+        ...styles.container,
+        backgroundColor: colors.background,
+        ...style,
+      }}
       // On Fabric we need to disable collapsing for the background to ensure
       // that we won't render unnecessary views due to the view flattening.
-      collapsable={false}
+      // Container sets `collapsable` to `false` internally
+      // This comment is left to make sure refactors don't remove it by mistake
     >
       {headerShown ? (
         <NavigationProvider navigation={navigation} route={route}>
@@ -105,7 +105,7 @@ export function Screen(props: Props) {
           </HeaderHeightContext.Provider>
         </HeaderShownContext.Provider>
       </View>
-    </Animated.View>
+    </Container>
   );
 }
 

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>