one 1.1.5 → 1.1.270

package/src/fork/NavigationContainer.native.tsx

@@ -0,0 +1,147 @@
+// Forked from React Navigation in order to use a custom `useLinking` -> `extractPathFromURL` function.
+// https://github.com/react-navigation/react-navigation/blob/main/packages/native/src/NavigationContainer.tsx
+import {
+  BaseNavigationContainer,
+  type NavigationContainerProps,
+  type NavigationContainerRef,
+  type ParamListBase,
+  getActionFromState,
+  getPathFromState,
+  getStateFromPath,
+  validatePathConfig,
+} from '@react-navigation/core'
+import {
+  DefaultTheme,
+  type DocumentTitleOptions,
+  LinkingContext,
+  type LinkingOptions,
+  type Theme,
+  ThemeProvider,
+} from '@react-navigation/native'
+// import useBackButton from '@react-navigation/native/lib/module/useBackButton.native.js'
+import useDocumentTitle from '@react-navigation/native/lib/module/useDocumentTitle.native.js'
+import useThenable from '@react-navigation/native/lib/module/useThenable.js'
+import * as React from 'react'
+
+import useLinking from './useLinking'
+
+global.REACT_NAVIGATION_DEVTOOLS = new WeakMap()
+
+type Props<ParamList extends object> = NavigationContainerProps & {
+  theme?: Theme
+  linking?: LinkingOptions<ParamList>
+  fallback?: React.ReactNode
+  documentTitle?: DocumentTitleOptions
+  onReady?: () => void
+}
+
+/**
+ * Container component which holds the navigation state designed for React Native apps.
+ * This should be rendered at the root wrapping the whole app.
+ *
+ * @param props.initialState Initial state object for the navigation tree. When deep link handling is enabled, this will override deep links when specified. Make sure that you don't specify an `initialState` when there's a deep link (`Linking.getInitialURL()`).
+ * @param props.onReady Callback which is called after the navigation tree mounts.
+ * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.theme Theme object for the navigators.
+ * @param props.linking Options for deep linking. Deep link handling is enabled when this prop is provided, unless `linking.enabled` is `false`.
+ * @param props.fallback Fallback component to render until we have finished getting initial state when linking is enabled. Defaults to `null`.
+ * @param props.documentTitle Options to configure the document title on Web. Updating document title is handled by default unless `documentTitle.enabled` is `false`.
+ * @param props.children Child elements to render the content.
+ * @param props.ref Ref object which refers to the navigation object containing helper methods.
+ */
+function NavigationContainerInner(
+  {
+    theme = DefaultTheme,
+    linking,
+    fallback = null,
+    documentTitle,
+    onReady,
+    ...rest
+  }: Props<ParamListBase>,
+  ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
+) {
+  const isLinkingEnabled = linking ? linking.enabled !== false : false
+
+  if (linking?.config) {
+    validatePathConfig(linking.config)
+  }
+
+  const refContainer = React.useRef<NavigationContainerRef<ParamListBase>>(null)
+
+  // useBackButton(refContainer)
+  useDocumentTitle(refContainer, documentTitle)
+
+  const { getInitialState } = useLinking(refContainer, {
+    // independent: rest.independent,
+    enabled: isLinkingEnabled,
+    prefixes: [],
+    ...linking,
+  })
+
+  // Add additional linking related info to the ref
+  // This will be used by the devtools
+  React.useEffect(() => {
+    if (refContainer.current) {
+      global.REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
+        get linking() {
+          return {
+            ...linking,
+            enabled: isLinkingEnabled,
+            prefixes: linking?.prefixes ?? [],
+            getStateFromPath: linking?.getStateFromPath ?? getStateFromPath,
+            getPathFromState: linking?.getPathFromState ?? getPathFromState,
+            getActionFromState: linking?.getActionFromState ?? getActionFromState,
+          }
+        },
+      })
+    }
+  })
+
+  const [isResolved, initialState] = useThenable(getInitialState)
+
+  React.useImperativeHandle(ref, () => refContainer.current)
+
+  const linkingContext = React.useMemo(() => ({ options: linking }), [linking])
+
+  const isReady = rest.initialState != null || !isLinkingEnabled || isResolved
+
+  const onReadyRef = React.useRef(onReady)
+
+  React.useEffect(() => {
+    onReadyRef.current = onReady
+  })
+
+  React.useEffect(() => {
+    if (isReady) {
+      onReadyRef.current?.()
+    }
+  }, [isReady])
+
+  if (!isReady) {
+    // This is temporary until we have Suspense for data-fetching
+    // Then the fallback will be handled by a parent `Suspense` component
+    return fallback as React.ReactElement
+  }
+
+  return (
+    <LinkingContext.Provider value={linkingContext}>
+      <ThemeProvider value={theme}>
+        <BaseNavigationContainer
+          {...rest}
+          initialState={rest.initialState == null ? initialState : rest.initialState}
+          ref={refContainer}
+        />
+      </ThemeProvider>
+    </LinkingContext.Provider>
+  )
+}
+
+const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
+  RootParamList extends object = ReactNavigation.RootParamList,
+>(
+  props: Props<RootParamList> & {
+    ref?: React.Ref<NavigationContainerRef<RootParamList>>
+  }
+) => React.ReactElement
+
+export default NavigationContainer

package/src/fork/NavigationContainer.tsx

@@ -0,0 +1,149 @@
+// Forked from React Navigation in order to use a custom `useLinking` function.
+// https://github.com/react-navigation/react-navigation/blob/6.x/packages/native/src/NavigationContainer.tsx
+import {
+  BaseNavigationContainer,
+  getActionFromState,
+  getPathFromState,
+  getStateFromPath,
+  type NavigationContainerProps,
+  type NavigationContainerRef,
+  type ParamListBase,
+  validatePathConfig,
+} from '@react-navigation/core'
+import {
+  DefaultTheme,
+  ThemeProvider,
+  type DocumentTitleOptions,
+  type LinkingOptions,
+  LinkingContext,
+  type Theme,
+} from '@react-navigation/native'
+// import useBackButton from '@react-navigation/native/src/useBackButton'
+// import useDocumentTitle from '@react-navigation/native/src/useDocumentTitle'
+// import useThenable from '@react-navigation/native/src/useThenable'
+import * as React from 'react'
+
+import useLinking from './useLinking'
+
+global.REACT_NAVIGATION_DEVTOOLS = new WeakMap()
+
+type Props<ParamList extends object> = NavigationContainerProps & {
+  theme?: Theme
+  linking?: LinkingOptions<ParamList>
+  fallback?: React.ReactNode
+  documentTitle?: DocumentTitleOptions
+  onReady?: () => void
+}
+
+/**
+ * Container component which holds the navigation state designed for React Native apps.
+ * This should be rendered at the root wrapping the whole app.
+ *
+ * @param props.initialState Initial state object for the navigation tree. When deep link handling is enabled, this will override deep links when specified. Make sure that you don't specify an `initialState` when there's a deep link (`Linking.getInitialURL()`).
+ * @param props.onReady Callback which is called after the navigation tree mounts.
+ * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.theme Theme object for the navigators.
+ * @param props.linking Options for deep linking. Deep link handling is enabled when this prop is provided, unless `linking.enabled` is `false`.
+ * @param props.fallback Fallback component to render until we have finished getting initial state when linking is enabled. Defaults to `null`.
+ * @param props.documentTitle Options to configure the document title on Web. Updating document title is handled by default unless `documentTitle.enabled` is `false`.
+ * @param props.children Child elements to render the content.
+ * @param props.ref Ref object which refers to the navigation object containing helper methods.
+ */
+function NavigationContainerInner(
+  {
+    theme = DefaultTheme,
+    linking,
+    fallback = null,
+    documentTitle,
+    onReady,
+    ...rest
+  }: Props<ParamListBase>,
+  ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
+) {
+  const isLinkingEnabled = linking ? linking.enabled !== false : false
+
+  if (linking?.config) {
+    validatePathConfig(linking.config)
+  }
+
+  const refContainer = React.useRef<NavigationContainerRef<ParamListBase>>(null)
+
+  // useBackButton(refContainer)
+  // useDocumentTitle(refContainer, documentTitle)
+
+  const { getInitialState } = useLinking(refContainer, {
+    independent: rest.independent,
+    enabled: isLinkingEnabled,
+    prefixes: [],
+    ...linking,
+  })
+
+  // Add additional linking related info to the ref
+  // This will be used by the devtools
+  React.useEffect(() => {
+    if (refContainer.current) {
+      REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
+        get linking() {
+          return {
+            ...linking,
+            enabled: isLinkingEnabled,
+            prefixes: linking?.prefixes ?? [],
+            getStateFromPath: linking?.getStateFromPath ?? getStateFromPath,
+            getPathFromState: linking?.getPathFromState ?? getPathFromState,
+            getActionFromState: linking?.getActionFromState ?? getActionFromState,
+          }
+        },
+      })
+    }
+  })
+
+  if (cache.val === 0) {
+    cache.promise = new Promise<void>((res) => {
+      getInitialState().then((val) => {
+        cache.val = val
+        cache.done = true
+        res()
+      })
+    })
+  }
+  if (!cache.done) {
+    throw cache.promise
+  }
+  const initialState = cache.val!
+
+  React.useImperativeHandle(ref, () => refContainer.current)
+
+  const linkingContext = React.useMemo(() => ({ options: linking }), [linking])
+
+  React.useEffect(() => {
+    onReady?.()
+  }, [onReady])
+
+  return (
+    <LinkingContext.Provider value={linkingContext}>
+      <ThemeProvider value={theme}>
+        <BaseNavigationContainer
+          {...rest}
+          initialState={rest.initialState == null ? initialState : rest.initialState}
+          ref={refContainer}
+        />
+      </ThemeProvider>
+    </LinkingContext.Provider>
+  )
+}
+
+const cache = {
+  done: false,
+  promise: null as any,
+  val: 0 as any,
+}
+
+const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
+  RootParamList extends object = ReactNavigation.RootParamList,
+>(
+  props: Props<RootParamList> & {
+    ref?: React.Ref<NavigationContainerRef<RootParamList>>
+  }
+) => React.ReactElement
+
+export default NavigationContainer

package/src/fork/createMemoryHistory.tsx

@@ -0,0 +1,234 @@
+import type { NavigationState } from '@react-navigation/core'
+import { nanoid } from 'nanoid/non-secure'
+
+// forked from @react-navigation/native/src/createMemoryHistory.tsx
+// NOTE there was a change we made for search params, but we've fixed it upstream
+// we can revert this back to the react-navigation one if we want
+
+type HistoryRecord = {
+  // Unique identifier for this record to match it with window.history.state
+  id: string
+  // Navigation state object for the history entry
+  state: NavigationState
+  // Path of the history entry
+  path: string
+}
+
+export default function createMemoryHistory() {
+  let index = 0
+  let items: HistoryRecord[] = []
+
+  // Pending callbacks for `history.go(n)`
+  // We might modify the callback stored if it was interrupted, so we have a ref to identify it
+  const pending: { ref: unknown; cb: (interrupted?: boolean) => void }[] = []
+
+  const interrupt = () => {
+    // If another history operation was performed we need to interrupt existing ones
+    // This makes sure that calls such as `history.replace` after `history.go` don't happen
+    // Since otherwise it won't be correct if something else has changed
+    pending.forEach((it) => {
+      const cb = it.cb
+      it.cb = () => cb(true)
+    })
+  }
+
+  const history = {
+    get index(): number {
+      // We store an id in the state instead of an index
+      // Index could get out of sync with in-memory values if page reloads
+      const id = window.history.state?.id
+
+      if (id) {
+        const index = items.findIndex((item) => item.id === id)
+
+        return index > -1 ? index : 0
+      }
+
+      return 0
+    },
+
+    get(index: number) {
+      return items[index]
+    },
+
+    backIndex({ path }: { path: string }) {
+      // We need to find the index from the element before current to get closest path to go back to
+      for (let i = index - 1; i >= 0; i--) {
+        const item = items[i]
+
+        if (item.path === path) {
+          return i
+        }
+      }
+
+      return -1
+    },
+
+    push({ path, state }: { path: string; state: NavigationState }) {
+      interrupt()
+
+      const id = nanoid()
+
+      // When a new entry is pushed, all the existing entries after index will be inaccessible
+      // So we remove any existing entries after the current index to clean them up
+      items = items.slice(0, index + 1)
+
+      items.push({ path, state, id })
+      index = items.length - 1
+
+      // We pass empty string for title because it's ignored in all browsers except safari
+      // We don't store state object in history.state because:
+      // - browsers have limits on how big it can be, and we don't control the size
+      // - while not recommended, there could be non-serializable data in state
+      window.history.pushState({ id }, '', path)
+    },
+
+    replace({ path, state }: { path: string; state: NavigationState }) {
+      interrupt()
+
+      const id = window.history.state?.id ?? nanoid()
+
+      // Need to keep the hash part of the path if there was no previous history entry
+      // or the previous history entry had the same path
+      let pathWithHash = path
+
+      // NOTE: this was the wrong fix
+      // if (window.location.search) {
+      //   console.log('replacing!')
+      //   pathWithHash = pathWithHash + window.location.search
+      // }
+
+      if (!items.length || items.findIndex((item) => item.id === id) < 0) {
+        // There are two scenarios for creating an array with only one history record:
+        // - When loaded id not found in the items array, this function by default will replace
+        //   the first item. We need to keep only the new updated object, otherwise it will break
+        //   the page when navigating forward in history.
+        // - This is the first time any state modifications are done
+        //   So we need to push the entry as there's nothing to replace
+        pathWithHash = pathWithHash + location.hash
+        items = [{ path: pathWithHash, state, id }]
+        index = 0
+      } else {
+        if (items[index].path === path) {
+          pathWithHash = pathWithHash + location.hash
+        }
+        items[index] = { path, state, id }
+      }
+
+      window.history.replaceState({ id }, '', pathWithHash)
+    },
+
+    // `history.go(n)` is asynchronous, there are couple of things to keep in mind:
+    // - it won't do anything if we can't go `n` steps, the `popstate` event won't fire.
+    // - each `history.go(n)` call will trigger a separate `popstate` event with correct location.
+    // - the `popstate` event fires before the next frame after calling `history.go(n)`.
+    // This method differs from `history.go(n)` in the sense that it'll go back as many steps it can.
+    go(n: number) {
+      interrupt()
+
+      // To guard against unexpected navigation out of the app we will assume that browser history is only as deep as the length of our memory
+      // history. If we don't have an item to navigate to then update our index and navigate as far as we can without taking the user out of the app.
+      const nextIndex = index + n
+      const lastItemIndex = items.length - 1
+      if (n < 0 && !items[nextIndex]) {
+        // Attempted to navigate beyond the first index. Negating the current index will align the browser history with the first item.
+        n = -index
+        index = 0
+      } else if (n > 0 && nextIndex > lastItemIndex) {
+        // Attempted to navigate past the last index. Calculate how many indices away from the last index and go there.
+        n = lastItemIndex - index
+        index = lastItemIndex
+      } else {
+        index = nextIndex
+      }
+
+      if (n === 0) {
+        return
+      }
+
+      // When we call `history.go`, `popstate` will fire when there's history to go back to
+      // So we need to somehow handle following cases:
+      // - There's history to go back, `history.go` is called, and `popstate` fires
+      // - `history.go` is called multiple times, we need to resolve on respective `popstate`
+      // - No history to go back, but `history.go` was called, browser has no API to detect it
+      return new Promise<void>((resolve, reject) => {
+        const done = (interrupted?: boolean) => {
+          clearTimeout(timer)
+
+          if (interrupted) {
+            reject(new Error('History was changed during navigation.'))
+            return
+          }
+
+          // There seems to be a bug in Chrome regarding updating the title
+          // If we set a title just before calling `history.go`, the title gets lost
+          // However the value of `document.title` is still what we set it to
+          // It's just not displayed in the tab bar
+          // To update the tab bar, we need to reset the title to something else first (e.g. '')
+          // And set the title to what it was before so it gets applied
+          // It won't work without setting it to empty string coz otherwise title isn't changing
+          // Which means that the browser won't do anything after setting the title
+          const { title } = window.document
+
+          window.document.title = ''
+          window.document.title = title
+
+          resolve()
+        }
+
+        pending.push({ ref: done, cb: done })
+
+        // If navigation didn't happen within 100ms, assume that it won't happen
+        // This may not be accurate, but hopefully it won't take so much time
+        // In Chrome, navigation seems to happen instantly in next microtask
+        // But on Firefox, it seems to take much longer, around 50ms from our testing
+        // We're using a hacky timeout since there doesn't seem to be way to know for sure
+        const timer = setTimeout(() => {
+          const index = pending.findIndex((it) => it.ref === done)
+
+          if (index > -1) {
+            pending[index].cb()
+            pending.splice(index, 1)
+          }
+        }, 100)
+
+        const onPopState = () => {
+          const id = window.history.state?.id
+          const currentIndex = items.findIndex((item) => item.id === id)
+
+          // Fix createMemoryHistory.index variable's value
+          // as it may go out of sync when navigating in the browser.
+          index = Math.max(currentIndex, 0)
+
+          const last = pending.pop()
+
+          window.removeEventListener('popstate', onPopState)
+          last?.cb()
+        }
+
+        window.addEventListener('popstate', onPopState)
+        window.history.go(n)
+      })
+    },
+
+    // The `popstate` event is triggered when history changes, except `pushState` and `replaceState`
+    // If we call `history.go(n)` ourselves, we don't want it to trigger the listener
+    // Here we normalize it so that only external changes (e.g. user pressing back/forward) trigger the listener
+    listen(listener: () => void) {
+      const onPopState = () => {
+        if (pending.length) {
+          // This was triggered by `history.go(n)`, we shouldn't call the listener
+          return
+        }
+
+        listener()
+      }
+
+      window.addEventListener('popstate', onPopState)
+
+      return () => window.removeEventListener('popstate', onPopState)
+    },
+  }
+
+  return history
+}

package/src/fork/extractPathFromURL.ts

@@ -0,0 +1,95 @@
+import URL from 'url-parse'
+
+// This is only run on native.
+function extractExactPathFromURL(url: string): string {
+  if (
+    // If a universal link / app link / web URL is used, we should use the path
+    // from the URL, while stripping the origin.
+    url.match(/^https?:\/\//)
+  ) {
+    const { origin, href } = new URL(url)
+    return href.replace(origin, '')
+  }
+
+  // Handle special URLs used in Expo Go: `/--/pathname` -> `pathname`
+  // if (
+  //   Constants.executionEnvironment === ExecutionEnvironment.StoreClient &&
+  //   // while not exhaustive, `exp` and `exps` are the only two schemes which
+  //   // are passed through to other apps in Expo Go.
+  //   url.match(/^exp(s)?:\/\//)
+  // ) {
+  //   const pathname = url.match(/exps?:\/\/.*?\/--\/(.*)/)?.[1]
+  //   if (pathname) {
+  //     return fromDeepLink('a://' + pathname)
+  //   }
+
+  //   const res = Linking.parse(url)
+
+  //   const qs = !res.queryParams
+  //     ? ''
+  //     : Object.entries(res.queryParams)
+  //         .map(([k, v]) => `${k}=${v}`)
+  //         .join('&')
+  //   return (
+  //     adjustPathname({ hostname: res.hostname, pathname: res.path || '' }) + (qs ? '?' + qs : '')
+  //   )
+  // }
+
+  // TODO: Support dev client URLs
+
+  return fromDeepLink(url)
+}
+
+/** Major hack to support the makeshift expo-development-client system. */
+function isExpoDevelopmentClient(url: URL<Record<string, string | undefined>>): boolean {
+  return !!url.hostname.match(/^expo-development-client$/)
+}
+
+function fromDeepLink(url: string): string {
+  // This is for all standard deep links, e.g. `foobar://` where everything
+  // after the `://` is the path.
+  const res = new URL(url, true)
+
+  if (isExpoDevelopmentClient(res)) {
+    if (!res.query || !res.query.url) {
+      return ''
+    }
+    const incomingUrl = res.query.url
+    return extractExactPathFromURL(decodeURI(incomingUrl))
+  }
+
+  const qs = !res.query
+    ? ''
+    : Object.entries(res.query as Record<string, string>)
+        .map(([k, v]) => `${k}=${decodeURIComponent(v)}`)
+        .join('&')
+
+  let results = ''
+
+  if (res.host) {
+    results += res.host
+  }
+
+  if (res.pathname) {
+    results += res.pathname
+  }
+
+  if (qs) {
+    results += '?' + qs
+  }
+
+  return results
+}
+
+export function extractExpoPathFromURL(url = '') {
+  // TODO: We should get rid of this, dropping specificities is not good
+  return extractExactPathFromURL(url).replace(/^\//, '')
+}
+
+export function adjustPathname(url: { hostname?: string | null; pathname: string }) {
+  if (url.hostname === 'exp.host' || url.hostname === 'u.expo.dev') {
+    // drop the first two segments from pathname:
+    return url.pathname.split('/').slice(2).join('/')
+  }
+  return url.pathname
+}

package/src/fork/findFocusedRoute.tsx

@@ -0,0 +1,15 @@
+// Forked so we can access without importing any React Native code in Node.js environments.
+
+import type { InitialState } from '@react-navigation/routers'
+
+export function findFocusedRoute(state: InitialState) {
+  let current: InitialState | undefined = state
+
+  while (current?.routes[current.index ?? 0].state != null) {
+    current = current.routes[current.index ?? 0].state
+  }
+
+  const route = current?.routes[current?.index ?? 0]
+
+  return route
+}