feat: introduce href to back button

react-navigation · Oct 23, 2023 · 5561b2b · 5561b2b
1 parent e4815c5
commit 5561b2b
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 10 deletions.
diff --git a/packages/elements/src/Header/HeaderBackButton.tsx b/packages/elements/src/Header/HeaderBackButton.tsx
@@ -31,6 +31,7 @@ export function HeaderBackButton({
   accessibilityLabel = label && label !== 'Back' ? `${label}, back` : 'Go back',
   testID,
   style,
+  href,
 }: HeaderBackButtonProps) {
   const { colors, fonts } = useTheme();
   const { direction } = useLocale();
@@ -147,13 +148,24 @@ export function HeaderBackButton({
     );
   };
 
-  const handlePress = () => onPress && requestAnimationFrame(onPress);
+  const handlePress = (e: any) => {
+    const ignoreEvents =
+      !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+      (e.button == null || e.button === 0); // ignore everything but left clicks
+
+    if (Platform.OS === 'web' && href && ignoreEvents) {
+      e.preventDefault();
+    }
+
+    return onPress && requestAnimationFrame(onPress);
+  };
 
   return (
     <PlatformPressable
       disabled={disabled}
+      href={href}
       accessible
-      accessibilityRole="button"
+      accessibilityRole={Platform.OS === 'web' && href ? 'link' : 'button'}
       accessibilityLabel={accessibilityLabel}
       testID={testID}
       onPress={disabled ? undefined : handlePress}

diff --git a/packages/elements/src/Header/HeaderBackContext.tsx b/packages/elements/src/Header/HeaderBackContext.tsx
@@ -1,6 +1,5 @@
 import { getNamedContext } from '../getNamedContext';
 
-export const HeaderBackContext = getNamedContext<{ title: string } | undefined>(
-  'HeaderBackContext',
-  undefined
-);
+export const HeaderBackContext = getNamedContext<
+  { title: string; href?: string } | undefined
+>('HeaderBackContext', undefined);
diff --git a/packages/elements/src/PlatformPressable.tsx b/packages/elements/src/PlatformPressable.tsx
@@ -15,6 +15,7 @@ export type Props = Omit<PressableProps, 'style'> & {
   pressColor?: string;
   pressOpacity?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  href?: string;
   children: React.ReactNode;
 };
 

diff --git a/packages/elements/src/types.tsx b/packages/elements/src/types.tsx
@@ -179,6 +179,10 @@ export type HeaderBackButtonProps = HeaderButtonProps & {
    * Function which returns a React Element to display custom image in header's back button.
    */
   backImage?: (props: { tintColor: string }) => React.ReactNode;
+  /**
+   * The `href` to use for the anchor tag on web
+   */
+  href?: string;
   /**
    * Label text for the button. Usually the title of the previous screen.
    * By default, this is only shown on iOS.

diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
@@ -6,9 +6,10 @@ import {
   SafeAreaProviderCompat,
   Screen,
 } from '@react-navigation/elements';
-import type {
+import {
   ParamListBase,
   StackNavigationState,
+  useLinkTools,
 } from '@react-navigation/native';
 import * as React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
@@ -33,6 +34,7 @@ const TRANSPARENT_PRESENTATIONS = [
 
 export function NativeStackView({ state, descriptors }: Props) {
   const parentHeaderBack = React.useContext(HeaderBackContext);
+  const { buildHref } = useLinkTools();
 
   return (
     <SafeAreaProviderCompat>
@@ -53,6 +55,10 @@ export function NativeStackView({ state, descriptors }: Props) {
                   previousDescriptor.options,
                   previousDescriptor.route.name
                 ),
+                href: buildHref(
+                  previousDescriptor.route.name,
+                  previousDescriptor.route.params
+                ),
               }
             : parentHeaderBack;
 
@@ -125,7 +131,7 @@ export function NativeStackView({ state, descriptors }: Props) {
                                   : undefined
                               }
                               onPress={navigation.goBack}
-                              canGoBack={canGoBack}
+                              href={headerBack.href}
                             />
                           )
                         : headerLeft

diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
@@ -198,6 +198,10 @@ export type StackHeaderProps = {
      * Title of the previous screen.
      */
     title: string;
+    /**
+     * The `href` to use for the anchor tag on web
+     */
+    href?: string;
   };
   /**
    * Animated nodes representing the progress of the animation.

diff --git a/packages/stack/src/views/Header/Header.tsx b/packages/stack/src/views/Header/Header.tsx
@@ -66,6 +66,7 @@ export const Header = React.memo(function Header({
       }
       headerStatusBarHeight={statusBarHeight}
       onGoBack={back ? goBack : undefined}
+      href={back ? back.href : undefined}
       styleInterpolator={styleInterpolator}
     />
   );

diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -4,6 +4,7 @@ import {
   NavigationRouteContext,
   ParamListBase,
   Route,
+  useLinkTools,
 } from '@react-navigation/native';
 import * as React from 'react';
 import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
@@ -47,6 +48,7 @@ export function HeaderContainer({
 }: Props) {
   const focusedRoute = getFocusedRoute();
   const parentHeaderBack = React.useContext(HeaderBackContext);
+  const { buildHref } = useLinkTools();
 
   return (
     <Animated.View pointerEvents="box-none" style={style}>
@@ -78,7 +80,10 @@ export function HeaderContainer({
           const { options, route } = previousScene.descriptor;
 
           headerBack = previousScene
-            ? { title: getHeaderTitle(options, route.name) }
+            ? {
+                title: getHeaderTitle(options, route.name),
+                href: buildHref(route.name, route.params),
+              }
             : parentHeaderBack;
         }
 

diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -29,6 +29,7 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
   title: string;
   modal: boolean;
   onGoBack?: () => void;
+  href?: string;
   progress: SceneProgress;
   styleInterpolator: StackHeaderStyleInterpolator;
 };
@@ -105,9 +106,12 @@ export function HeaderSegment(props: Props) {
     layout,
     modal,
     onGoBack,
+    href,
     headerTitle: title,
     headerLeft: left = onGoBack
-      ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
+      ? (props: HeaderBackButtonProps) => (
+          <HeaderBackButton {...props} href={href} />
+        )
       : undefined,
     headerRight: right,
     headerBackImage,