@react-navigation/elements 3.0.0-alpha.3 → 3.0.0-alpha.31

package/src/Container.tsx

@@ -1,18 +1,33 @@
 import { Platform, View, type ViewStyle } from 'react-native';
 
 export type Props = {
-  inert?: boolean;
-  style?: React.CSSProperties & ViewStyle;
+  ref?: React.Ref<HTMLDivElement | View> | undefined;
+  inert?: boolean | undefined;
+  style?:
+    | (ViewStyle &
+        Omit<React.CSSProperties, 'backgroundColor'> & {
+          backgroundColor?: ViewStyle['backgroundColor'] | undefined;
+        })
+    | undefined;
   children: React.ReactNode;
 };
 
-export function Container({ inert, children, style }: Props) {
+export function Container({ ref, inert, children, style }: Props) {
   if (Platform.OS === 'web') {
+    const { backgroundColor, ...rest } = style ?? {};
+
     return (
       <div
+        ref={ref as React.Ref<HTMLDivElement> | undefined}
         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>
@@ -21,6 +36,7 @@ export function Container({ inert, children, style }: Props) {
 
   return (
     <View
+      ref={ref as React.Ref<View> | undefined}
       aria-hidden={inert}
       style={[{ pointerEvents: inert ? 'none' : 'box-none' }, style]}
       collapsable={false}

package/src/Header/Header.tsx

@@ -1,4 +1,8 @@
-import { useNavigation, useTheme } from '@react-navigation/native';
+import {
+  UNSTABLE_CornerInset,
+  useNavigation,
+  useTheme,
+} from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
@@ -30,20 +34,22 @@ type Props = HeaderOptions & {
   /**
    * Options for the back button.
    */
-  back?: {
-    /**
-     * Title of the previous screen.
-     */
-    title: string | undefined;
-    /**
-     * The `href` to use for the anchor tag on web
-     */
-    href: string | undefined;
-  };
+  back?:
+    | {
+        /**
+         * Title of the previous screen.
+         */
+        title: string | undefined;
+        /**
+         * The `href` to use for the anchor tag on web
+         */
+        href: string | undefined;
+      }
+    | undefined;
   /**
    * Whether the header is in a modal
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * Title text for the header.
    */
@@ -79,7 +85,7 @@ export function Header(props: Props) {
   const { colors } = useTheme();
 
   const navigation = useNavigation();
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const isParentHeaderShown = React.use(HeaderShownContext);
 
   const [searchBarVisible, setSearchBarVisible] = React.useState(false);
 
@@ -321,21 +327,21 @@ export function Header(props: Props) {
       return;
     }
 
-    Animated.timing(searchBarVisibleAnim, {
+    const animation = Animated.timing(searchBarVisibleAnim, {
       toValue: searchBarVisible ? 1 : 0,
       duration: 150,
       useNativeDriver,
       easing: Easing.in(Easing.linear),
-    }).start(({ finished }) => {
+    });
+
+    animation.start(({ finished }) => {
       if (finished) {
         setSearchBarRendered(searchBarVisible);
         searchBarVisibleRef.current = searchBarVisible;
       }
     });
 
-    return () => {
-      searchBarVisibleAnim.stopAnimation();
-    };
+    return () => animation.stop();
   }, [searchBarVisible, searchBarVisibleAnim]);
 
   const headerOpacity = searchBarVisibleAnim.interpolate({
@@ -402,6 +408,7 @@ export function Header(props: Props) {
           },
         ]}
       >
+        <UNSTABLE_CornerInset direction="horizontal" edge="left" />
         <View
           style={[
             styles.start,
@@ -458,7 +465,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>
@@ -540,7 +563,7 @@ const styles = StyleSheet.create({
     maxWidth: '50%',
   },
   background: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     pointerEvents: 'box-none',
   },
 });

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,
+  Icon,
 } 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<Icon>({
+        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 = () => {
@@ -105,11 +119,11 @@ function HeaderBackLabel({
   truncatedLabel,
   onMeasureMinimal,
 }: {
-  allowFontScaling?: boolean;
+  allowFontScaling?: boolean | undefined;
   displayMode: HeaderBackButtonDisplayMode;
   label: string | undefined;
-  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
-  tintColor?: ColorValue;
+  labelStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
+  tintColor?: ColorValue | undefined;
   truncatedLabel: string | undefined;
   onMeasureMinimal: () => void;
 }) {
@@ -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/HeaderBackground.tsx

@@ -12,9 +12,9 @@ import { BlurEffectBackground } from '../BlurEffectBackground';
 import { type BlurEffectType } from '../getBlurBackgroundColor';
 
 type Props = Omit<ViewProps, 'style'> & {
-  blurEffect?: BlurEffectType | 'none';
-  style?: StyleProp<ViewStyle>;
-  children?: React.ReactNode;
+  blurEffect?: BlurEffectType | 'none' | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
+  children?: React.ReactNode | undefined;
 };
 
 export function HeaderBackground({

package/src/Header/HeaderButton.tsx

@@ -4,20 +4,22 @@ import { Platform, StyleSheet } from 'react-native';
 import { PlatformPressable } from '../PlatformPressable';
 import type { HeaderButtonProps } from '../types';
 
-function HeaderButtonInternal(
-  {
-    disabled,
-    onPress,
-    pressColor,
-    pressOpacity,
-    accessibilityLabel,
-    testID,
-    style,
-    href,
-    children,
-  }: HeaderButtonProps,
-  ref: React.Ref<React.ComponentRef<typeof PlatformPressable>>
-) {
+type Props = HeaderButtonProps & {
+  ref?: React.Ref<React.ComponentRef<typeof PlatformPressable>>;
+};
+
+export function HeaderButton({
+  disabled,
+  onPress,
+  pressColor,
+  pressOpacity,
+  accessibilityLabel,
+  testID,
+  style,
+  href,
+  children,
+  ref,
+}: Props) {
   return (
     <PlatformPressable
       ref={ref}
@@ -40,10 +42,6 @@ function HeaderButtonInternal(
   );
 }
 
-export const HeaderButton = React.forwardRef(HeaderButtonInternal);
-
-HeaderButton.displayName = 'HeaderButton';
-
 export const BUTTON_SIZE = Platform.OS === 'ios' ? 44 : 48;
 export const BUTTON_SPACING = Platform.OS === 'ios' ? 10 : 8;
 

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 { Icon } from '../types';
+
+type Props = Omit<ImageProps, 'source'> & {
+  icon: Icon;
+  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,
@@ -34,11 +30,12 @@ import { HeaderIcon } from './HeaderIcon';
 type Props = Omit<HeaderSearchBarOptions, 'ref'> & {
   visible: boolean;
   onClose: () => void;
-  tintColor?: ColorValue;
-  pressColor?: ColorValue;
-  pressOpacity?: number;
+  tintColor?: ColorValue | undefined;
+  pressColor?: ColorValue | undefined;
+  pressOpacity?: number | undefined;
   statusBarHeight: number;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
+  ref?: React.Ref<HeaderSearchBarRef>;
 };
 
 const INPUT_TYPE_TO_MODE = {
@@ -50,26 +47,24 @@ const INPUT_TYPE_TO_MODE = {
 
 const useNativeDriver = Platform.OS !== 'web';
 
-function HeaderSearchBarInternal(
-  {
-    visible,
-    inputType,
-    autoFocus = true,
-    autoCapitalize,
-    placeholder = 'Search',
-    enterKeyHint = 'search',
-    cancelButtonText = 'Cancel',
-    onChange,
-    onClose,
-    tintColor,
-    pressColor,
-    pressOpacity,
-    statusBarHeight,
-    style,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<HeaderSearchBarRef>
-) {
+export function HeaderSearchBar({
+  visible,
+  inputType,
+  autoFocus = true,
+  autoCapitalize,
+  placeholder = 'Search',
+  enterKeyHint = 'search',
+  cancelButtonText = 'Cancel',
+  onChange,
+  onClose,
+  tintColor,
+  pressColor,
+  pressOpacity,
+  statusBarHeight,
+  style,
+  ref,
+  ...rest
+}: Props) {
   const navigation = useNavigation();
   const { dark, colors, fonts } = useTheme();
   const [value, setValue] = React.useState('');
@@ -210,9 +205,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 +259,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 +274,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 +296,7 @@ function HeaderSearchBarInternal(
               accessibilityLabel={cancelButtonText}
               onPress={cancelSearch}
             >
-              <HeaderIcon source={closeIcon} tintColor={textColor} />
+              <SFSymbol name="xmark" color={textColor} />
             </HeaderButton>
           </HeaderButtonBackground>
         ) : (
@@ -332,14 +340,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',
@@ -417,5 +425,3 @@ const styles = StyleSheet.create({
     }),
   },
 });
-
-export const HeaderSearchBar = React.forwardRef(HeaderSearchBarInternal);

package/src/Header/HeaderTitle.tsx

@@ -10,9 +10,9 @@ import {
 } from 'react-native';
 
 type Props = Omit<TextProps, 'style'> & {
-  tintColor?: ColorValue;
-  children?: string;
-  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  tintColor?: ColorValue | undefined;
+  children?: string | undefined;
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
 };
 
 export function HeaderTitle({ tintColor, style, ...rest }: Props) {

package/src/Header/getHeaderTitle.tsx

@@ -1,7 +1,10 @@
 import type { HeaderOptions } from '../types';
 
 export function getHeaderTitle(
-  options: { title?: string; headerTitle?: HeaderOptions['headerTitle'] },
+  options: {
+    title?: string | undefined;
+    headerTitle?: HeaderOptions['headerTitle'];
+  },
   fallback: string
 ): string {
   return typeof options.headerTitle === 'string'

package/src/Header/useHeaderHeight.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { HeaderHeightContext } from './HeaderHeightContext';
 
 export function useHeaderHeight() {
-  const height = React.useContext(HeaderHeightContext);
+  const height = React.use(HeaderHeightContext);
 
   if (height === undefined) {
     throw new Error(

package/src/Label/getLabel.tsx

@@ -1,5 +1,5 @@
 export function getLabel(
-  options: { label?: string; title?: string },
+  options: { label?: string | undefined; title?: string | undefined },
   fallback: string
 ): string {
   return options.label !== undefined

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;