@react-navigation/native 7.1.28 → 8.0.0-alpha.1

package/src/useLinking.tsx

@@ -14,9 +14,25 @@ import * as React from 'react';
 import { createMemoryHistory } from './createMemoryHistory';
 import { ServerContext } from './ServerContext';
 import type { LinkingOptions } from './types';
+import type { Thenable } from './useThenable';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
+/**
+ * Calculate total history length including both navigator history and route history
+ */
+const getTotalHistoryLength = (state: NavigationState): number => {
+  const baseHistoryLength = state.history
+    ? state.history.length
+    : state.routes.length;
+
+  const routeHistoryLength = state.routes.reduce((acc, r) => {
+    return acc + (r.history ? r.history.length : 0);
+  }, 0);
+
+  return baseHistoryLength + routeHistoryLength;
+};
+
 /**
  * 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
@@ -29,9 +45,8 @@ const findMatchingState = <T extends NavigationState>(
     return [undefined, undefined];
   }
 
-  // Tab and drawer will have `history` property, but stack will have history in `routes`
-  const aHistoryLength = a.history ? a.history.length : a.routes.length;
-  const bHistoryLength = b.history ? b.history.length : b.routes.length;
+  const aHistoryLength = getTotalHistoryLength(a);
+  const bHistoryLength = getTotalHistoryLength(b);
 
   const aRoute = a.routes[a.index];
   const bRoute = b.routes[b.index];
@@ -40,13 +55,15 @@ const findMatchingState = <T extends NavigationState>(
   const bChildState = bRoute.state as T | undefined;
 
   // Stop here if this is the state object that changed:
-  // - history length is different
+  // - total history length is different (including route.history)
   // - focused routes are different
+  // - route.history length is different
   // - one of them doesn't have child state
   // - child state keys are different
   if (
     aHistoryLength !== bHistoryLength ||
     aRoute.key !== bRoute.key ||
+    (aRoute.history?.length || 0) !== (bRoute.history?.length || 0) ||
     aChildState === undefined ||
     bChildState === undefined ||
     aChildState.key !== bChildState.key
@@ -69,7 +86,7 @@ export const series = (cb: () => Promise<void>) => {
   return callback;
 };
 
-const linkingHandlers: symbol[] = [];
+const linkingHandlers = new Set<symbol>();
 
 type Options = LinkingOptions<ParamListBase>;
 
@@ -81,8 +98,7 @@ export function useLinking(
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
+  }: Options
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -95,7 +111,7 @@ export function useLinking(
       return undefined;
     }
 
-    if (enabled !== false && linkingHandlers.length) {
+    if (enabled !== false && linkingHandlers.size) {
       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:',
@@ -110,15 +126,11 @@ export function useLinking(
     const handler = Symbol();
 
     if (enabled !== false) {
-      linkingHandlers.push(handler);
+      linkingHandlers.add(handler);
     }
 
     return () => {
-      const index = linkingHandlers.indexOf(handler);
-
-      if (index > -1) {
-        linkingHandlers.splice(index, 1);
-      }
+      linkingHandlers.delete(handler);
     };
   }, [enabled, independent]);
 
@@ -167,21 +179,15 @@ export function useLinking(
       if (path) {
         value = getStateFromPathRef.current(path, configRef.current);
       }
-
-      // If the link were handled, it gets cleared in NavigationContainer
-      onUnhandledLinking(path);
     }
 
-    const thenable = {
-      then(onfulfilled?: (state: ResultState | undefined) => void) {
+    const thenable: Thenable<ResultState | undefined> = {
+      then(onfulfilled) {
         return Promise.resolve(onfulfilled ? onfulfilled(value) : value);
       },
-      catch() {
-        return thenable;
-      },
     };
 
-    return thenable as PromiseLike<ResultState | undefined>;
+    return thenable;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -224,8 +230,6 @@ export 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
         if (validateRoutesNotExistInRootState(state)) {
@@ -263,13 +267,7 @@ export function useLinking(
         navigation.resetRoot(state);
       }
     });
-  }, [
-    enabled,
-    history,
-    onUnhandledLinking,
-    ref,
-    validateRoutesNotExistInRootState,
-  ]);
+  }, [enabled, history, ref, validateRoutesNotExistInRootState]);
 
   React.useEffect(() => {
     if (!enabled) {
@@ -381,12 +379,8 @@ export function useLinking(
         path !== pendingPath
       ) {
         const historyDelta =
-          (focusedState.history
-            ? focusedState.history.length
-            : focusedState.routes.length) -
-          (previousFocusedState.history
-            ? previousFocusedState.history.length
-            : previousFocusedState.routes.length);
+          getTotalHistoryLength(focusedState) -
+          getTotalHistoryLength(previousFocusedState);
 
         if (historyDelta > 0) {
           // If history length is increased, we should pushState

package/src/useScrollToTop.tsx

@@ -62,7 +62,9 @@ export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
 
   React.useEffect(() => {
     const tabNavigations: NavigationProp<ParamListBase>[] = [];
-    let currentNavigation = navigation;
+    let currentNavigation: NavigationProp<ParamListBase> | undefined =
+      navigation;
+
     // If the screen is nested inside multiple tab navigators, we should scroll to top for any of them
     // So we need to find all the parent tab navigators and add the listeners there
     while (currentNavigation) {

package/src/useThenable.tsx

@@ -1,15 +1,23 @@
 import * as React from 'react';
 
-export function useThenable<T>(create: () => PromiseLike<T>) {
+export type Thenable<T> = {
+  then(onfulfilled?: (value: T) => unknown): PromiseLike<unknown>;
+};
+
+export function useThenable<T>(create: () => Thenable<T> | undefined) {
   const [promise] = React.useState(create);
 
   let initialState: [boolean, T | undefined] = [false, undefined];
 
-  // Check if our thenable is synchronous
-  // eslint-disable-next-line promise/catch-or-return, promise/always-return
-  promise.then((result) => {
-    initialState = [true, result];
-  });
+  if (promise == null) {
+    initialState = [true, undefined];
+  } else {
+    // Check if our thenable is synchronous
+    // eslint-disable-next-line promise/catch-or-return, promise/always-return
+    promise.then((result) => {
+      initialState = [true, result];
+    });
+  }
 
   const [state, setState] = React.useState(initialState);
   const [resolved] = state;

package/lib/module/UnhandledLinkingContext.js

@@ -1,14 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-const MISSING_CONTEXT_ERROR = "Couldn't find an UnhandledLinkingContext context.";
-export const UnhandledLinkingContext = /*#__PURE__*/React.createContext({
-  get lastUnhandledLink() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get setLastUnhandledLink() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  }
-});
-UnhandledLinkingContext.displayName = 'UnhandledLinkingContext';
-//# sourceMappingURL=UnhandledLinkingContext.js.map

package/lib/module/UnhandledLinkingContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","MISSING_CONTEXT_ERROR","UnhandledLinkingContext","createContext","lastUnhandledLink","Error","setLastUnhandledLink","displayName"],"sourceRoot":"../../src","sources":["UnhandledLinkingContext.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,MAAMC,qBAAqB,GACzB,mDAAmD;AAErD,OAAO,MAAMC,uBAAuB,gBAAGF,KAAK,CAACG,aAAa,CAGvD;EACD,IAAIC,iBAAiBA,CAAA,EAAQ;IAC3B,MAAM,IAAIC,KAAK,CAACJ,qBAAqB,CAAC;EACxC,CAAC;EACD,IAAIK,oBAAoBA,CAAA,EAAQ;IAC9B,MAAM,IAAID,KAAK,CAACJ,qBAAqB,CAAC;EACxC;AACF,CAAC,CAAC;AAEFC,uBAAuB,CAACK,WAAW,GAAG,yBAAyB","ignoreList":[]}

package/lib/typescript/src/UnhandledLinkingContext.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export declare const UnhandledLinkingContext: React.Context<{
-    lastUnhandledLink: string | undefined;
-    setLastUnhandledLink: (lastUnhandledUrl: string | undefined) => void;
-}>;
-//# sourceMappingURL=UnhandledLinkingContext.d.ts.map

package/lib/typescript/src/UnhandledLinkingContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnhandledLinkingContext.d.ts","sourceRoot":"","sources":["../../../src/UnhandledLinkingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,uBAAuB;uBACf,MAAM,GAAG,SAAS;0BACf,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI;EAQpE,CAAC"}

package/src/UnhandledLinkingContext.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-const MISSING_CONTEXT_ERROR =
-  "Couldn't find an UnhandledLinkingContext context.";
-
-export const UnhandledLinkingContext = React.createContext<{
-  lastUnhandledLink: string | undefined;
-  setLastUnhandledLink: (lastUnhandledUrl: string | undefined) => void;
-}>({
-  get lastUnhandledLink(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get setLastUnhandledLink(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-});
-
-UnhandledLinkingContext.displayName = 'UnhandledLinkingContext';