one 1.1.390 → 1.1.392

package/src/fork/useBackButton.native.tsx

@@ -1,20 +1,34 @@
-// No change just vendored to avoid import issue with RR7
+/**
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/native/src/useBackButton.native.tsx
+ *
+ * No changes are made except of formatting.
+ */
 
+import type { NavigationContainerRef, ParamListBase } from '@react-navigation/core'
 import * as React from 'react'
 import { BackHandler } from 'react-native'
-export function useBackButton(ref) {
+
+export function useBackButton(
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>
+) {
   React.useEffect(() => {
     const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
       const navigation = ref.current
+
       if (navigation == null) {
         return false
       }
+
       if (navigation.canGoBack()) {
         navigation.goBack()
+
         return true
       }
+
       return false
     })
+
     return () => subscription.remove()
   }, [ref])
 }

package/src/fork/useBackButton.tsx

@@ -1,5 +1,14 @@
-// No change just vendored to avoid import issue with RR7
+/**
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/native/src/useBackButton.tsx
+ *
+ * No changes are made except of formatting.
+ */
 
 import type { NavigationContainerRef, ParamListBase } from '@react-navigation/core'
 
-export function useBackButton(_: React.RefObject<NavigationContainerRef<ParamListBase>>) {}
+// eslint-disable-next-line @eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks
+export function useBackButton(_: React.RefObject<NavigationContainerRef<ParamListBase>>) {
+  // No-op
+  // BackHandler is not available on web
+}

package/src/fork/useDocumentTitle.native.tsx

@@ -1,6 +1,11 @@
-// No change just vendored to avoid import issue with RR7
-
 /**
- * Set the document title for the active screen
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/native/src/useDocumentTitle.native.tsx
+ *
+ * No changes are made except of formatting.
  */
-export function useDocumentTitle(ref) {}
+
+// eslint-disable-next-line @eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks
+export function useDocumentTitle() {
+  // Noop for native platforms
+}

package/src/fork/useDocumentTitle.tsx

@@ -1,12 +1,14 @@
-// No change just vendored to avoid import issue with RR7
+/**
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/native/src/useDocumentTitle.tsx
+ *
+ * No changes are made except of formatting and updating the imports.
+ */
 
-import type { NavigationContainerRef, ParamListBase, Route } from '@react-navigation/core'
+import type { NavigationContainerRef, ParamListBase } from '@react-navigation/core'
 import * as React from 'react'
 
-type DocumentTitleOptions = {
-  enabled?: boolean
-  formatter?: (options: Record<string, any> | undefined, route: Route<string> | undefined) => string
-}
+import type { DocumentTitleOptions } from '@react-navigation/native'
 
 /**
  * Set the document title for the active screen
@@ -26,7 +28,10 @@ export function useDocumentTitle(
     const navigation = ref.current
 
     if (navigation) {
-      const title = formatter(navigation.getCurrentOptions(), navigation.getCurrentRoute())
+      const title = formatter(
+        navigation.getCurrentOptions(),
+        navigation.getCurrentRoute()
+      )
 
       document.title = title
     }

package/src/fork/useLinking.native.ts

@@ -1,19 +1,23 @@
-// Forked from react-navigation with a custom `extractPathFromURL` that automatically
-// allows any prefix and parses Expo Go URLs.
-// For simplicity the following are disabled: enabled, prefixes, independent
-// https://github.com/react-navigation/react-navigation/blob/main/packages/native/src/useLinking.native.tsx
+/**
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/native/src/useLinking.native.tsx
+ *
+ * Please refrain from making changes to this file, as it will make merging updates from the upstream harder.
+ * All modifications except formatting should be marked with `// @modified` comment.
+ */
+
 import {
-  type NavigationContainerRef,
-  type ParamListBase,
   getActionFromState as getActionFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
+  type NavigationContainerRef,
+  type ParamListBase,
   useNavigationIndependentTree,
 } from '@react-navigation/core'
-import type { LinkingOptions } from '@react-navigation/native'
 import * as React from 'react'
 import { Linking, Platform } from 'react-native'
 
-import { extractExpoPathFromURL } from './extractPathFromURL'
+import { extractPathFromURL } from './extractPathFromURL'
+import type { LinkingOptions } from '@react-navigation/native' // @modified: import from @react-navigation/native
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>
 
@@ -21,21 +25,21 @@ type Options = LinkingOptions<ParamListBase>
 
 const linkingHandlers: symbol[] = []
 
-export default function useLinking(
+export function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
-    // enabled = true,
-    // prefixes,
+    enabled = true,
+    prefixes,
     filter,
     config,
     getInitialURL = () =>
       Promise.race([
         Linking.getInitialURL(),
-        new Promise<undefined>((resolve) =>
+        new Promise<undefined>((resolve) => {
           // Timeout in 150ms if `getInitialState` doesn't resolve
           // Workaround for https://github.com/facebook/react-native/issues/25675
           setTimeout(resolve, 150)
-        ),
+        }),
       ]),
     subscribe = (listener) => {
       const callback = ({ url }: { url: string }) => listener(url)
@@ -44,13 +48,23 @@ export default function useLinking(
         | { remove(): void }
         | undefined
 
+      // Storing this in a local variable stops Jest from complaining about import after teardown
+      // @ts-expect-error: removeEventListener is not present in newer RN versions
+      const removeEventListener = Linking.removeEventListener?.bind(Linking)
+
       return () => {
-        subscription?.remove()
+        // https://github.com/facebook/react-native/commit/6d1aca806cee86ad76de771ed3a1cc62982ebcd7
+        if (subscription?.remove) {
+          subscription.remove()
+        } else {
+          removeEventListener?.('url', callback)
+        }
       }
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: Options,
+  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
 ) {
   const independent = useNavigationIndependentTree()
 
@@ -60,13 +74,10 @@ export default function useLinking(
     }
 
     if (independent) {
-      return
+      return undefined
     }
 
-    if (
-      // enabled !== false &&
-      linkingHandlers.length
-    ) {
+    if (enabled !== false && linkingHandlers.length) {
       console.error(
         [
           'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
@@ -83,9 +94,9 @@ export default function useLinking(
 
     const handler = Symbol()
 
-    // if (enabled !== false) {
-    linkingHandlers.push(handler)
-    // }
+    if (enabled !== false) {
+      linkingHandlers.push(handler)
+    }
 
     return () => {
       const index = linkingHandlers.indexOf(handler)
@@ -94,16 +105,13 @@ export default function useLinking(
         linkingHandlers.splice(index, 1)
       }
     }
-  }, [
-    // enabled,
-    independent,
-  ])
+  }, [enabled, independent])
 
   // We store these options in ref to avoid re-creating getInitialState and re-subscribing listeners
   // This lets user avoid wrapping the items in `React.useCallback` or `React.useMemo`
   // Not re-creating `getInitialState` is important coz it makes it easier for the user to use in an effect
-  //   const enabledRef = React.useRef(enabled);
-  //   const prefixesRef = React.useRef(prefixes);
+  const enabledRef = React.useRef(enabled)
+  const prefixesRef = React.useRef(prefixes)
   const filterRef = React.useRef(filter)
   const configRef = React.useRef(config)
   const getInitialURLRef = React.useRef(getInitialURL)
@@ -111,8 +119,8 @@ export default function useLinking(
   const getActionFromStateRef = React.useRef(getActionFromState)
 
   React.useEffect(() => {
-    // enabledRef.current = enabled;
-    // prefixesRef.current = prefixes;
+    enabledRef.current = enabled
+    prefixesRef.current = prefixes
     filterRef.current = filter
     configRef.current = config
     getInitialURLRef.current = getInitialURL
@@ -125,33 +133,42 @@ export default function useLinking(
       return undefined
     }
 
-    // NOTE: This is the important part.
-    const path = extractExpoPathFromURL(url)
+    const path = extractPathFromURL(prefixesRef.current, url)
 
     return path !== undefined ? getStateFromPathRef.current(path, configRef.current) : undefined
   }, [])
 
   const getInitialState = React.useCallback(() => {
-    // let state: ResultState | undefined;
-    // if (enabledRef.current) {
-    const url = getInitialURLRef.current()
+    let state: ResultState | undefined
 
-    if (url != null && typeof url !== 'string') {
-      return url.then((url) => {
-        const state = getStateFromURL(url)
+    if (enabledRef.current) {
+      const url = getInitialURLRef.current()
 
-        return state
-      })
-    }
+      if (url != null) {
+        if (typeof url !== 'string') {
+          return url.then((url) => {
+            const state = getStateFromURL(url)
+
+            if (typeof url === 'string') {
+              // If the link were handled, it gets cleared in NavigationContainer
+              onUnhandledLinking(extractPathFromURL(prefixes, url))
+            }
+
+            return state
+          })
+          // biome-ignore lint/style/noUselessElse: don't check copied code
+        } else {
+          onUnhandledLinking(extractPathFromURL(prefixes, url))
+        }
+      }
 
-    const state = getStateFromURL(url)
-    // }
+      state = getStateFromURL(url)
+    }
 
     const thenable = {
-      // biome-ignore lint/suspicious/noThenProperty: <explanation>
+      // biome-ignore lint/suspicious/noThenProperty: don't check copied code
       then(onfulfilled?: (state: ResultState | undefined) => void) {
-        onfulfilled?.(state)
-        return thenable
+        return Promise.resolve(onfulfilled ? onfulfilled(state) : state)
       },
       catch() {
         return thenable
@@ -159,26 +176,22 @@ export default function useLinking(
     }
 
     return thenable as PromiseLike<ResultState | undefined>
-  }, [getStateFromURL])
+  }, [getStateFromURL, onUnhandledLinking, prefixes])
 
   React.useEffect(() => {
     const listener = (url: string) => {
-      //   if (!enabled) {
-      //     return;
-      //   }
+      if (!enabled) {
+        return
+      }
 
       const navigation = ref.current
       const state = navigation ? getStateFromURL(url) : undefined
 
       if (navigation && state) {
-        // Make sure that the routes in the state exist in the root navigator
-        // Otherwise there's an error in the linking configuration
+        // If the link were handled, it gets cleared in NavigationContainer
+        onUnhandledLinking(extractPathFromURL(prefixes, url))
         const rootState = navigation.getRootState()
-
         if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
-          console.warn(
-            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
-          )
           return
         }
 
@@ -203,12 +216,7 @@ export default function useLinking(
     }
 
     return subscribe(listener)
-  }, [
-    // enabled,
-    getStateFromURL,
-    ref,
-    subscribe,
-  ])
+  }, [enabled, getStateFromURL, onUnhandledLinking, prefixes, ref, subscribe])
 
   return {
     getInitialState,

package/src/fork/useLinking.ts

@@ -1,41 +1,34 @@
-/* eslint-disable */
-// Forked from react-navigation to add basePath functionality to web.
-// https://github.com/react-navigation/react-navigation/blob/6.x/packages/native/src/useLinking.tsx
+/**
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/native/src/useLinking.tsx
+ *
+ * Please refrain from making changes to this file, as it will make merging updates from the upstream harder.
+ * All modifications except formatting should be marked with `// @modified` comment.
+ */
 
 import {
   findFocusedRoute,
   getActionFromState as getActionFromStateDefault,
   getPathFromState as getPathFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
-  useNavigationIndependentTree,
   type NavigationContainerRef,
   type NavigationState,
   type ParamListBase,
+  useNavigationIndependentTree,
 } from '@react-navigation/core'
 import isEqual from 'fast-deep-equal'
 import * as React from 'react'
 
-/* Start of fork. Source: https://github.com/react-navigation/react-navigation/blob/13d4aa270b301faf07960b4cd861ffc91e9b2c46/packages/native/src/useLinking.tsx#L13  */
-// createMemoryHistory is a self-contained module with no side effects any only depends on `nanoid` and `tiny-warning`
-import createMemoryHistory from './createMemoryHistory'
-
-// This was removed as we don't use ServerContext
-// import ServerContext from './ServerContext';
+import { createMemoryHistory } from './createMemoryHistory'
+// @modified - start
+// import { ServerContext } from '@react-navigation/web';
 import { ServerLocationContext } from '../router/serverLocationContext'
-/* End of fork */
-import type { LinkingOptions } from '@react-navigation/native'
-import { appendBaseUrl } from './getPathFromState'
+// @modified - end
+import type { LinkingOptions } from '@react-navigation/native' // @modified: change import path
+import { appendBaseUrl } from './getPathFromState-mods'
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>
 
-const historyGlobal = createMemoryHistory()
-
-if (typeof window !== 'undefined') {
-  historyGlobal.listen(() => {
-    globalThis['__vxrntodopath'] = window.location.pathname
-  })
-}
-
 /**
  * Find the matching navigation state that changed between 2 navigation states
  * e.g.: a -> b -> c -> d and a -> b -> c -> e -> f, if history in b changed, b is the matching state
@@ -82,16 +75,17 @@ const findMatchingState = <T extends NavigationState>(
 export const series = (cb: () => Promise<void>) => {
   let queue = Promise.resolve()
   const callback = () => {
+    // eslint-disable-next-line promise/no-callback-in-promise
     queue = queue.then(cb)
   }
   return callback
 }
 
-let linkingHandlers: Symbol[] = []
+const linkingHandlers: symbol[] = []
 
 type Options = LinkingOptions<ParamListBase>
 
-export default function useLinking(
+export function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,
@@ -99,7 +93,8 @@ export default function useLinking(
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: Options,
+  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
 ) {
   const independent = useNavigationIndependentTree()
 
@@ -139,7 +134,7 @@ export default function useLinking(
     }
   }, [enabled, independent])
 
-  const [history] = React.useState(historyGlobal)
+  const [history] = React.useState(createMemoryHistory)
 
   // We store these options in ref to avoid re-creating getInitialState and re-subscribing listeners
   // This lets user avoid wrapping the items in `React.useCallback` or `React.useMemo`
@@ -158,12 +153,24 @@ export default function useLinking(
     getActionFromStateRef.current = getActionFromState
   })
 
-  /* Start of fork. Source: https://github.com/react-navigation/react-navigation/blob/13d4aa270b301faf07960b4cd861ffc91e9b2c46/packages/native/src/useLinking.tsx#L142 */
+  const validateRoutesNotExistInRootState = React.useCallback(
+    (state: ResultState) => {
+      const navigation = ref.current
+      const rootState = navigation?.getRootState()
+      // Make sure that the routes in the state exist in the root navigator
+      // Otherwise there's an error in the linking configuration
+      return state?.routes.some((r) => !rootState?.routeNames.includes(r.name))
+    },
+    [ref]
+  )
+
+  // @modified - start
   // ServerContext is used inside ServerContainer to set the location during SSR: https://github.com/react-navigation/react-navigation/blob/13d4aa270b301faf07960b4cd861ffc91e9b2c46/packages/native/src/ServerContainer.tsx#L50-L54
   // One uses the `initialLocation` prop to set the initial location during SSR:
+  // const server = React.useContext(ServerContext)
   const location = React.useContext(ServerLocationContext)
   const server = { location }
-  /* End of fork */
+  // @modified - end
 
   const getInitialState = React.useCallback(() => {
     let value: ResultState | undefined
@@ -177,10 +184,13 @@ export default function useLinking(
       if (path) {
         value = getStateFromPathRef.current(path, configRef.current)
       }
+
+      // If the link were handled, it gets cleared in NavigationContainer
+      onUnhandledLinking(path)
     }
 
     const thenable = {
-      // biome-ignore lint/suspicious/noThenProperty: <explanation>
+      // biome-ignore lint/suspicious/noThenProperty: don't check copied code
       then(onfulfilled?: (state: ResultState | undefined) => void) {
         return Promise.resolve(onfulfilled ? onfulfilled(value) : value)
       },
@@ -232,18 +242,19 @@ export default function useLinking(
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
       if (state) {
+        // If the link were handled, it gets cleared in NavigationContainer
+        onUnhandledLinking(path)
         // Make sure that the routes in the state exist in the root navigator
         // Otherwise there's an error in the linking configuration
-        const rootState = navigation.getRootState()
-
-        if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
-          console.warn(
-            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
-          )
+        if (validateRoutesNotExistInRootState(state)) {
           return
         }
 
-        if (index > previousIndex) {
+        // @modified: workaround to make react-navigation handle hash changes
+        if (
+          index > previousIndex ||
+          (index === previousIndex && (!record || `${record?.path}${location.hash}` === path))
+        ) {
           const action = getActionFromStateRef.current(state, configRef.current)
 
           if (action !== undefined) {
@@ -269,7 +280,7 @@ export default function useLinking(
         navigation.resetRoot(state)
       }
     })
-  }, [enabled, history, ref])
+  }, [enabled, history, onUnhandledLinking, ref, validateRoutesNotExistInRootState])
 
   React.useEffect(() => {
     if (!enabled) {
@@ -280,6 +291,8 @@ export default function useLinking(
       route: ReturnType<typeof findFocusedRoute>,
       state: NavigationState
     ): string => {
+      let path
+
       // If the `route` object contains a `path`, use that path as long as `route.name` and `params` still match
       // This makes sure that we preserve the original URL for wildcard routes
       if (route?.path) {
@@ -293,14 +306,36 @@ export default function useLinking(
             focusedRoute.name === route.name &&
             isEqual(focusedRoute.params, route.params)
           ) {
-            /* Start of fork. Source: https://github.com/react-navigation/react-navigation/blob/13d4aa270b301faf07960b4cd861ffc91e9b2c46/packages/native/src/useLinking.tsx#L280  */
-            return appendBaseUrl(route.path)
-            /* End of fork */
+            // @modified - start
+            // path = route.path
+            path = appendBaseUrl(route.path)
+            // @modified - end
           }
         }
       }
 
-      return getPathFromStateRef.current(state, configRef.current)
+      if (path == null) {
+        path = getPathFromStateRef.current(state, configRef.current)
+      }
+
+      // @modified - start: One will handle hashes itself, so these lines are not needed
+      // const previousRoute = previousStateRef.current
+      //   ? findFocusedRoute(previousStateRef.current)
+      //   : undefined
+
+      // // Preserve the hash if the route didn't change
+      // if (
+      //   previousRoute &&
+      //   route &&
+      //   'key' in previousRoute &&
+      //   'key' in route &&
+      //   previousRoute.key === route.key
+      // ) {
+      //   path = path + location.hash
+      // }
+      // @modified - end
+
+      return path
     }
 
     if (ref.current) {

package/src/fork/useThenable.tsx

@@ -1,4 +1,10 @@
-// No change just vendored to avoid import issue with RR7
+/**
+ * This file is copied from the react-navigation repo:
+ * https://github.com/react-navigation/react-navigation/blob/%40react-navigation/core%407.1.2/packages/native/src/useThenable.tsx
+ *
+ * No changes are made except of formatting.
+ */
+
 import * as React from 'react'
 
 export function useThenable<T>(create: () => PromiseLike<T>) {