@react-navigation/elements 2.0.0-rc.9 → 2.0.0

package/src/Header/Header.tsx

@@ -1,6 +1,8 @@
+import { useNavigation, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Animated,
+  type LayoutChangeEvent,
   Platform,
   StyleSheet,
   View,
@@ -11,9 +13,14 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 
+import searchIcon from '../assets/search-icon.png';
 import type { HeaderOptions, Layout } from '../types';
 import { getDefaultHeaderHeight } from './getDefaultHeaderHeight';
+import { HeaderBackButton } from './HeaderBackButton';
 import { HeaderBackground } from './HeaderBackground';
+import { HeaderButton } from './HeaderButton';
+import { HeaderIcon } from './HeaderIcon';
+import { HeaderSearchBar } from './HeaderSearchBar';
 import { HeaderShownContext } from './HeaderShownContext';
 import { HeaderTitle } from './HeaderTitle';
 
@@ -21,6 +28,19 @@ import { HeaderTitle } from './HeaderTitle';
 const IPAD_MINI_MEDIUM_WIDTH = 414;
 
 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;
+  };
   /**
    * Whether the header is in a modal
    */
@@ -54,20 +74,42 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
 export function Header(props: Props) {
   const insets = useSafeAreaInsets();
   const frame = useSafeAreaFrame();
+  const { colors } = useTheme();
 
+  const navigation = useNavigation();
   const isParentHeaderShown = React.useContext(HeaderShownContext);
 
+  const [searchBarVisible, setSearchBarVisible] = React.useState(false);
+  const [titleLayout, setTitleLayout] = React.useState<Layout | undefined>(
+    undefined
+  );
+
+  const onTitleLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    setTitleLayout((titleLayout) => {
+      if (
+        titleLayout &&
+        height === titleLayout.height &&
+        width === titleLayout.width
+      ) {
+        return titleLayout;
+      }
+
+      return { height, width };
+    });
+  };
+
   const {
+    // eslint-disable-next-line @eslint-react/no-unstable-default-props
     layout = frame,
     modal = false,
+    back,
     title,
     headerTitle: customTitle,
-    headerTitleAlign = Platform.select({
-      ios: 'center',
-      default: 'left',
-    }),
-    headerLeft,
-    headerLeftLabelVisible,
+    headerTitleAlign = Platform.OS === 'ios' ? 'center' : 'left',
+    headerLeft = back ? (props) => <HeaderBackButton {...props} /> : undefined,
+    headerSearchBarOptions,
     headerTransparent,
     headerTintColor,
     headerBackground,
@@ -77,11 +119,14 @@ export function Header(props: Props) {
     headerLeftContainerStyle: leftContainerStyle,
     headerRightContainerStyle: rightContainerStyle,
     headerTitleContainerStyle: titleContainerStyle,
+    headerBackButtonDisplayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
+    headerBackTitleStyle,
     headerBackgroundContainerStyle: backgroundContainerStyle,
     headerStyle: customHeaderStyle,
     headerShadowVisible,
     headerPressColor,
     headerPressOpacity,
+    // eslint-disable-next-line @eslint-react/no-unstable-default-props
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
   } = props;
 
@@ -194,20 +239,35 @@ export function Header(props: Props) {
     },
   ];
 
+  const iconTintColor =
+    headerTintColor ??
+    Platform.select({
+      ios: colors.primary,
+      default: colors.text,
+    });
+
   const leftButton = headerLeft
     ? headerLeft({
-        tintColor: headerTintColor,
+        tintColor: iconTintColor,
         pressColor: headerPressColor,
         pressOpacity: headerPressOpacity,
-        labelVisible: headerLeftLabelVisible,
+        displayMode: headerBackButtonDisplayMode,
+        titleLayout,
+        screenLayout: layout,
+        canGoBack: Boolean(back),
+        onPress: back ? navigation.goBack : undefined,
+        label: back?.title,
+        labelStyle: headerBackTitleStyle,
+        href: back?.href,
       })
     : null;
 
   const rightButton = headerRight
     ? headerRight({
-        tintColor: headerTintColor,
+        tintColor: iconTintColor,
         pressColor: headerPressColor,
         pressOpacity: headerPressOpacity,
+        canGoBack: Boolean(back),
       })
     : null;
 
@@ -254,53 +314,88 @@ export function Header(props: Props) {
         >
           {leftButton}
         </Animated.View>
-        <Animated.View
-          pointerEvents="box-none"
-          style={[
-            styles.title,
-            {
-              // Avoid the title from going offscreen or overlapping buttons
-              maxWidth:
-                headerTitleAlign === 'center'
-                  ? layout.width -
-                    ((leftButton
-                      ? headerLeftLabelVisible !== false
-                        ? 80
-                        : 32
-                      : 16) +
-                      (rightButton ? 16 : 0) +
-                      Math.max(insets.left, insets.right)) *
-                      2
-                  : layout.width -
-                    ((leftButton ? 52 : 16) +
-                      (rightButton ? 52 : 16) +
-                      insets.left -
-                      insets.right),
-            },
-            headerTitleAlign === 'left' && leftButton
-              ? { marginStart: 4 }
-              : { marginStart: 16 },
-            titleContainerStyle,
-          ]}
-        >
-          {headerTitle({
-            children: title,
-            allowFontScaling: titleAllowFontScaling,
-            tintColor: headerTintColor,
-            style: titleStyle,
-          })}
-        </Animated.View>
-        <Animated.View
-          pointerEvents="box-none"
-          style={[
-            styles.end,
-            styles.expand,
-            { marginEnd: insets.right },
-            rightContainerStyle,
-          ]}
-        >
-          {rightButton}
-        </Animated.View>
+        {Platform.OS === 'ios' || !searchBarVisible ? (
+          <>
+            <Animated.View
+              pointerEvents="box-none"
+              style={[
+                styles.title,
+                {
+                  // Avoid the title from going offscreen or overlapping buttons
+                  maxWidth:
+                    headerTitleAlign === 'center'
+                      ? layout.width -
+                        ((leftButton
+                          ? headerBackButtonDisplayMode !== 'minimal'
+                            ? 80
+                            : 32
+                          : 16) +
+                          (rightButton || headerSearchBarOptions ? 16 : 0) +
+                          Math.max(insets.left, insets.right)) *
+                          2
+                      : layout.width -
+                        ((leftButton ? 52 : 16) +
+                          (rightButton || headerSearchBarOptions ? 52 : 16) +
+                          insets.left -
+                          insets.right),
+                },
+                headerTitleAlign === 'left' && leftButton
+                  ? { marginStart: 4 }
+                  : { marginHorizontal: 16 },
+                titleContainerStyle,
+              ]}
+            >
+              {headerTitle({
+                children: title,
+                allowFontScaling: titleAllowFontScaling,
+                tintColor: headerTintColor,
+                onLayout: onTitleLayout,
+                style: titleStyle,
+              })}
+            </Animated.View>
+            <Animated.View
+              pointerEvents="box-none"
+              style={[
+                styles.end,
+                styles.expand,
+                { marginEnd: insets.right },
+                rightContainerStyle,
+              ]}
+            >
+              {rightButton}
+              {headerSearchBarOptions ? (
+                <HeaderButton
+                  tintColor={iconTintColor}
+                  pressColor={headerPressColor}
+                  pressOpacity={headerPressOpacity}
+                  onPress={() => setSearchBarVisible(true)}
+                >
+                  <HeaderIcon
+                    style={
+                      Boolean(iconTintColor) && { tintColor: iconTintColor }
+                    }
+                    source={searchIcon}
+                  />
+                </HeaderButton>
+              ) : null}
+            </Animated.View>
+          </>
+        ) : null}
+        {Platform.OS === 'ios' || searchBarVisible ? (
+          <HeaderSearchBar
+            {...headerSearchBarOptions}
+            visible={searchBarVisible}
+            onClose={() => {
+              setSearchBarVisible(false);
+              headerSearchBarOptions?.onClose?.();
+            }}
+            style={[
+              Platform.OS === 'ios'
+                ? [StyleSheet.absoluteFill, { backgroundColor: colors.card }]
+                : !leftButton && { marginStart: 8 },
+            ]}
+          />
+        ) : null}
       </View>
     </Animated.View>
   );
@@ -319,12 +414,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   start: {
-    justifyContent: 'center',
-    alignItems: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
   },
   end: {
-    justifyContent: 'center',
-    alignItems: 'flex-end',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
   },
   expand: {
     flexGrow: 1,

package/src/Header/HeaderBackButton.tsx

@@ -3,9 +3,10 @@ import * as React from 'react';
 import {
   Animated,
   Image,
-  type LayoutChangeEvent,
   Platform,
+  type StyleProp,
   StyleSheet,
+  type TextStyle,
   View,
 } from 'react-native';
 
@@ -14,6 +15,7 @@ import backIconMask from '../assets/back-icon-mask.png';
 import { MaskedView } from '../MaskedView';
 import type { HeaderBackButtonProps } from '../types';
 import { HeaderButton } from './HeaderButton';
+import { HeaderIcon, ICON_MARGIN } from './HeaderIcon';
 
 export function HeaderBackButton({
   disabled,
@@ -21,13 +23,13 @@ export function HeaderBackButton({
   backImage,
   label,
   labelStyle,
-  labelVisible = Platform.OS === 'ios',
+  displayMode = Platform.OS === 'ios' ? 'default' : 'minimal',
   onLabelLayout,
   onPress,
   pressColor,
   pressOpacity,
   screenLayout,
-  tintColor: customTintColor,
+  tintColor,
   titleLayout,
   truncatedLabel = 'Back',
   accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
@@ -38,85 +40,97 @@ export function HeaderBackButton({
   const { colors, fonts } = useTheme();
   const { direction } = useLocale();
 
-  const [initialLabelWidth, setInitialLabelWidth] = React.useState<
-    undefined | number
-  >(undefined);
-
-  const tintColor =
-    customTintColor !== undefined
-      ? customTintColor
-      : Platform.select({
-          ios: colors.primary,
-          default: colors.text,
-        });
-
-  const handleLabelLayout = (e: LayoutChangeEvent) => {
-    onLabelLayout?.(e);
-
-    const { layout } = e.nativeEvent;
-
-    setInitialLabelWidth(
-      (direction === 'rtl' ? layout.y : layout.x) + layout.width
-    );
-  };
-
-  const shouldTruncateLabel = () => {
-    return (
-      !label ||
-      (initialLabelWidth &&
-        titleLayout &&
-        screenLayout &&
-        (screenLayout.width - titleLayout.width) / 2 < initialLabelWidth + 26)
-    );
-  };
+  const [labelWidth, setLabelWidth] = React.useState<number | null>(null);
+  const [truncatedLabelWidth, setTruncatedLabelWidth] = React.useState<
+    number | null
+  >(null);
 
   const renderBackImage = () => {
     if (backImage) {
-      return backImage({ tintColor });
+      return backImage({ tintColor: tintColor ?? colors.text });
     } else {
       return (
-        <Image
+        <HeaderIcon
           style={[
             styles.icon,
-            direction === 'rtl' && styles.flip,
-            Boolean(labelVisible) && styles.iconWithLabel,
+            displayMode !== 'minimal' && styles.iconWithLabel,
             Boolean(tintColor) && { tintColor },
           ]}
-          resizeMode="contain"
           source={backIcon}
-          fadeDuration={0}
         />
       );
     }
   };
 
   const renderLabel = () => {
-    const leftLabelText = shouldTruncateLabel() ? truncatedLabel : label;
-
-    if (!labelVisible || leftLabelText === undefined) {
+    if (displayMode === 'minimal') {
       return null;
     }
 
+    const availableSpace =
+      titleLayout && screenLayout
+        ? (screenLayout.width - titleLayout.width) / 2 -
+          (ICON_WIDTH + ICON_MARGIN)
+        : null;
+
+    const potentialLabelText =
+      displayMode === 'default' ? label : truncatedLabel;
+    const finalLabelText =
+      availableSpace && labelWidth && truncatedLabelWidth
+        ? availableSpace > labelWidth
+          ? potentialLabelText
+          : availableSpace > truncatedLabelWidth
+            ? truncatedLabel
+            : null
+        : potentialLabelText;
+
+    const commonStyle: Animated.WithAnimatedValue<StyleProp<TextStyle>> = [
+      fonts.regular,
+      styles.label,
+      labelStyle,
+    ];
+
+    const hiddenStyle: Animated.WithAnimatedValue<StyleProp<TextStyle>> = [
+      commonStyle,
+      {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        opacity: 0,
+      },
+    ];
+
     const labelElement = (
       <View style={styles.labelWrapper}>
-        <Animated.Text
-          accessible={false}
-          onLayout={
-            // This measurement is used to determine if we should truncate the label when it doesn't fit
-            // Only measure it when label is not truncated because we want the measurement of full label
-            leftLabelText === label ? handleLabelLayout : undefined
-          }
-          style={[
-            tintColor ? { color: tintColor } : null,
-            fonts.regular,
-            styles.label,
-            labelStyle,
-          ]}
-          numberOfLines={1}
-          allowFontScaling={!!allowFontScaling}
-        >
-          {leftLabelText}
-        </Animated.Text>
+        {label && displayMode === 'default' ? (
+          <Animated.Text
+            style={hiddenStyle}
+            numberOfLines={1}
+            onLayout={(e) => setLabelWidth(e.nativeEvent.layout.width)}
+          >
+            {label}
+          </Animated.Text>
+        ) : null}
+        {truncatedLabel ? (
+          <Animated.Text
+            style={hiddenStyle}
+            numberOfLines={1}
+            onLayout={(e) => setTruncatedLabelWidth(e.nativeEvent.layout.width)}
+          >
+            {truncatedLabel}
+          </Animated.Text>
+        ) : null}
+        {finalLabelText ? (
+          <Animated.Text
+            accessible={false}
+            onLayout={onLabelLayout}
+            style={[tintColor ? { color: tintColor } : null, commonStyle]}
+            numberOfLines={1}
+            allowFontScaling={!!allowFontScaling}
+          >
+            {finalLabelText}
+          </Animated.Text>
+        ) : null}
       </View>
     );
 
@@ -175,6 +189,9 @@ export function HeaderBackButton({
   );
 }
 
+const ICON_WIDTH = Platform.OS === 'ios' ? 13 : 24;
+const ICON_MARGIN_END = Platform.OS === 'ios' ? 22 : 3;
+
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 0,
@@ -198,25 +215,12 @@ const styles = StyleSheet.create({
     // Otherwise it messes with the measurement of the label
     flexDirection: 'row',
     alignItems: 'flex-start',
-    ...Platform.select({
-      ios: { marginEnd: 8 },
-      default: { marginEnd: 3 },
-    }),
+    marginEnd: ICON_MARGIN,
+  },
+  icon: {
+    width: ICON_WIDTH,
+    marginEnd: ICON_MARGIN_END,
   },
-  icon: Platform.select({
-    ios: {
-      height: 21,
-      width: 13,
-      marginStart: 8,
-      marginEnd: 22,
-      marginVertical: 8,
-    },
-    default: {
-      height: 24,
-      width: 24,
-      margin: 3,
-    },
-  }),
   iconWithLabel:
     Platform.OS === 'ios'
       ? {

package/src/Header/HeaderIcon.tsx

@@ -0,0 +1,36 @@
+import { useLocale, useTheme } from '@react-navigation/native';
+import { Image, type ImageProps, Platform, StyleSheet } from 'react-native';
+
+export function HeaderIcon({ source, style, ...rest }: ImageProps) {
+  const { colors } = useTheme();
+  const { direction } = useLocale();
+
+  return (
+    <Image
+      source={source}
+      resizeMode="contain"
+      fadeDuration={0}
+      style={[
+        styles.icon,
+        direction === 'rtl' && styles.flip,
+        { tintColor: colors.text },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+export const ICON_SIZE = Platform.OS === 'ios' ? 21 : 24;
+export const ICON_MARGIN = Platform.OS === 'ios' ? 8 : 3;
+
+const styles = StyleSheet.create({
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    margin: ICON_MARGIN,
+  },
+  flip: {
+    transform: 'scaleX(-1)',
+  },
+});