@react-navigation/elements 2.0.0-rc.2 → 2.0.0-rc.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.21",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -18,11 +18,22 @@
     "url": "https://github.com/react-navigation/react-navigation/issues"
   },
   "homepage": "https://reactnavigation.org",
-  "main": "lib/commonjs/index.js",
-  "react-native": "src/index.tsx",
-  "source": "src/index.tsx",
-  "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
   "files": [
     "src",
     "lib",
@@ -40,35 +51,53 @@
     "color": "^4.2.3"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@react-native-masked-view/masked-view": "0.3.1",
-    "@react-navigation/native": "^7.0.0-rc.2",
+    "@react-navigation/native": "^7.0.0-rc.18",
     "@testing-library/react-native": "^12.4.3",
     "@types/react": "~18.2.79",
     "del-cli": "^5.1.0",
     "react": "18.2.0",
     "react-native": "0.74.2",
-    "react-native-builder-bob": "^0.23.2",
+    "react-native-builder-bob": "^0.29.0",
     "typescript": "^5.5.2"
   },
   "peerDependencies": {
-    "@react-navigation/native": "^7.0.0-rc.2",
+    "@react-native-masked-view/masked-view": ">= 0.2.0",
+    "@react-navigation/native": "^7.0.0-rc.18",
     "react": ">= 18.2.0",
     "react-native": ">= 0.72.0",
     "react-native-safe-area-context": ">= 4.0.0"
   },
+  "peerDependenciesMeta": {
+    "@react-native-masked-view/masked-view": {
+      "optional": true
+    }
+  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       [
         "typescript",
         {
-          "project": "tsconfig.build.json"
+          "project": "tsconfig.build.json",
+          "esm": true
         }
       ]
     ]
   },
-  "gitHead": "c840aaeeccc8b5fb4ebc317e3f658bc76e64a7ea"
+  "gitHead": "f1b77a90eee4444e990aa86d7feecffff85d020b"
 }

package/src/Button.tsx

@@ -89,15 +89,15 @@ function ButtonBase({
   return (
     <PlatformPressable
       {...rest}
-      pressOpacity={Platform.OS === 'ios' ? undefined : 1}
-      style={[{ backgroundColor }, styles.button, style]}
       android_ripple={{
         radius: BUTTON_RADIUS,
         color: Color(textColor).fade(0.85).string(),
         ...android_ripple,
       }}
+      pressOpacity={Platform.OS === 'ios' ? undefined : 1}
+      hoverEffect={{ color: textColor }}
+      style={[{ backgroundColor }, styles.button, style]}
     >
-      {Platform.OS === 'web' ? <HoverEffect color={textColor} /> : null}
       <Text style={[{ color: textColor }, fonts.regular, styles.text]}>
         {children}
       </Text>
@@ -105,43 +105,6 @@ function ButtonBase({
   );
 }
 
-const CLASS_NAME = '__react-navigation_elements_Button_hover';
-
-const css = String.raw;
-const cssText = css`
-  .${CLASS_NAME} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: ${BUTTON_RADIUS}px;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
-
-  button:hover > .${CLASS_NAME} {
-    opacity: 0.08;
-  }
-
-  button:active > .${CLASS_NAME} {
-    opacity: 0.15;
-  }
-`;
-
-const HoverEffect = ({ color }: { color: string }) => {
-  return (
-    <>
-      <style
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: cssText }}
-      />
-      <div className={CLASS_NAME} style={{ backgroundColor: color }} />
-    </>
-  );
-};
-
 const styles = StyleSheet.create({
   button: {
     paddingHorizontal: 24,

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 ? 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,
+                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,