@react-navigation/elements 3.0.0-alpha.2 → 3.0.0-alpha.21

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;

package/src/PlatformPressable.tsx

@@ -19,15 +19,20 @@ type HoverEffectProps = {
 };
 
 export type Props = Omit<PressableProps, 'style' | 'onPress'> & {
-  href?: string;
-  pressColor?: ColorValue;
-  pressOpacity?: number;
-  hoverEffect?: HoverEffectProps;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  onPress?: (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-  ) => void;
+  href?: string | undefined;
+  pressColor?: ColorValue | undefined;
+  pressOpacity?: number | undefined;
+  hoverEffect?: HoverEffectProps | undefined;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
+  onPress?:
+    | ((
+        e:
+          | React.MouseEvent<HTMLAnchorElement, MouseEvent>
+          | GestureResponderEvent
+      ) => void)
+    | undefined;
   children: React.ReactNode;
+  ref?: React.Ref<React.ComponentRef<typeof AnimatedPressable>>;
 };
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
@@ -41,22 +46,20 @@ const useNativeDriver = Platform.OS !== 'web';
 /**
  * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
  */
-function PlatformPressableInternal(
-  {
-    disabled,
-    onPress,
-    onPressIn,
-    onPressOut,
-    android_ripple,
-    pressColor,
-    pressOpacity = 0.3,
-    hoverEffect,
-    style,
-    children,
-    ...rest
-  }: Props,
-  ref: React.Ref<React.ComponentRef<typeof AnimatedPressable>>
-) {
+export function PlatformPressable({
+  disabled,
+  onPress,
+  onPressIn,
+  onPressOut,
+  android_ripple,
+  pressColor,
+  pressOpacity = 0.3,
+  hoverEffect,
+  style,
+  children,
+  ref,
+  ...rest
+}: Props) {
   const { dark } = useTheme();
   const [opacity] = React.useState(() => new Animated.Value(1));
 
@@ -156,10 +159,6 @@ function PlatformPressableInternal(
   );
 }
 
-export const PlatformPressable = React.forwardRef(PlatformPressableInternal);
-
-PlatformPressable.displayName = 'PlatformPressable';
-
 const css = String.raw;
 
 const CLASS_NAME = `__react-navigation_elements_Pressable_hover`;

package/src/SafeAreaProviderCompat.tsx

@@ -34,7 +34,7 @@ const initialMetrics =
     : initialWindowMetrics;
 
 export function SafeAreaProviderCompat({ children, style }: Props) {
-  const insets = React.useContext(SafeAreaInsetsContext);
+  const insets = React.use(SafeAreaInsetsContext);
 
   return (
     <FrameSizeProvider

package/src/Screen.tsx

@@ -6,15 +6,10 @@ 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 { Container } from './Container';
 import { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 import { HeaderHeightContext } from './Header/HeaderHeightContext';
 import { HeaderShownContext } from './Header/HeaderShownContext';
@@ -22,14 +17,14 @@ import { useFrameSize } from './useFrameSize';
 
 type Props = {
   focused: boolean;
-  modal?: boolean;
+  modal?: boolean | undefined;
   navigation: NavigationProp<ParamListBase>;
   route: RouteProp<ParamListBase>;
   header: React.ReactNode;
-  headerShown?: boolean;
-  headerStatusBarHeight?: number;
-  headerTransparent?: boolean;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  headerShown?: boolean | undefined;
+  headerStatusBarHeight?: number | undefined;
+  headerTransparent?: boolean | undefined;
+  style?: React.ComponentProps<typeof Container>['style'] | undefined;
   children: React.ReactNode;
 };
 
@@ -37,8 +32,8 @@ export function Screen(props: Props) {
   const insets = useSafeAreaInsets();
   const { colors } = useTheme();
 
-  const isParentHeaderShown = React.useContext(HeaderShownContext);
-  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const isParentHeaderShown = React.use(HeaderShownContext);
+  const parentHeaderHeight = React.use(HeaderHeightContext);
 
   const {
     focused,
@@ -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/internal.tsx

@@ -1,6 +1,6 @@
+export { ActivityView } from './ActivityView';
 export { Color } from './Color';
 export { Container, type Props as ContainerProps } from './Container';
-export { Lazy } from './Lazy';
 export { isLiquidGlassSupported } from './LiquidGlassView';
 export { MissingIcon } from './MissingIcon';
 export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';