feat: pass href to headerLeft function

react-navigation · Mar 25, 2024 · ce6d885 · ce6d885
1 parent bee29a9
commit ce6d885
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 3 deletions.
diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx
@@ -42,6 +42,7 @@ export type HeaderOptions = {
     pressColor?: string;
     pressOpacity?: number;
     labelVisible?: boolean;
+    href?: undefined;
   }) => React.ReactNode;
   /**
    * Whether a label is visible in the left button. Used to add extra padding.

diff --git a/packages/native-stack/src/types.tsx b/packages/native-stack/src/types.tsx
@@ -123,6 +123,10 @@ export type NativeStackHeaderLeftProps = NativeStackHeaderRightProps & {
    * By default, this is only shown on iOS.
    */
   label?: string;
+  /**
+   * The `href` to use for the anchor tag on web
+   */
+  href?: string;
 };
 
 export type NativeStackNavigationOptions = {

diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -130,6 +130,8 @@ export function HeaderConfig({
     tintColor,
     canGoBack,
     label: headerBackTitle,
+    // `href` is only applicable to web
+    href: undefined,
   });
   const headerRightElement = headerRight?.({
     tintColor,

diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
@@ -119,6 +119,7 @@ export function NativeStackView({ state, descriptors }: Props) {
                             tintColor,
                             canGoBack,
                             label: headerBackTitle,
+                            href: headerBack?.href,
                           })
                       : headerLeft === undefined && canGoBack
                         ? ({ tintColor }) => (

diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
@@ -264,6 +264,10 @@ export type StackHeaderRightProps = {
 };
 
 export type StackHeaderLeftProps = HeaderBackButtonProps & {
+  /**
+   * The `href` to use for the anchor tag on web
+   */
+  href?: string;
   /**
    * Whether it's possible to navigate back in stack.
    */

diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -109,9 +109,7 @@ export function HeaderSegment(props: Props) {
     backHref,
     headerTitle: title,
     headerLeft: left = onGoBack
-      ? (props: HeaderBackButtonProps) => (
-          <HeaderBackButton {...props} href={backHref} />
-        )
+      ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
       : undefined,
     headerRight: right,
     headerBackImage,
@@ -162,6 +160,7 @@ export function HeaderSegment(props: Props) {
     ? (props) =>
         left({
           ...props,
+          href: backHref,
           backImage: headerBackImage,
           accessibilityLabel: headerBackAccessibilityLabel,
           testID: headerBackTestID,