@react-navigation/core 6.2.0 → 6.3.0

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

@@ -50,8 +50,8 @@ export default function useDescriptors<State extends NavigationState, ActionHelp
         source?: string | undefined;
         target?: string | undefined;
     }>)): void;
-    navigate<RouteName extends string>(...args: [screen: RouteName] | [screen: RouteName, params: object | undefined]): void;
-    navigate<RouteName_1 extends string>(options: {
+    navigate<RouteName extends string>(...args: RouteName extends unknown ? [screen: RouteName] | [screen: RouteName, params: object | undefined] : never): void;
+    navigate<RouteName_1 extends string>(options: RouteName_1 extends unknown ? {
         key: string;
         params?: object | undefined;
         merge?: boolean | undefined;
@@ -60,7 +60,7 @@ export default function useDescriptors<State extends NavigationState, ActionHelp
         key?: string | undefined;
         params: object | undefined;
         merge?: boolean | undefined;
-    }): void;
+    } : never): void;
     reset(state: State | import("@react-navigation/routers").PartialState<State>): void;
     goBack(): void;
     isFocused(): boolean;

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

@@ -38,8 +38,8 @@ export default function useNavigationBuilder<State extends NavigationState, Rout
             source?: string | undefined;
             target?: string | undefined;
         }>)): void;
-        navigate<RouteName extends string>(...args: [screen: RouteName] | [screen: RouteName, params: object | undefined]): void;
-        navigate<RouteName_1 extends string>(options: {
+        navigate<RouteName extends string>(...args: RouteName extends unknown ? [screen: RouteName] | [screen: RouteName, params: object | undefined] : never): void;
+        navigate<RouteName_1 extends string>(options: RouteName_1 extends unknown ? {
             key: string;
             params?: object | undefined;
             merge?: boolean | undefined;
@@ -48,7 +48,7 @@ export default function useNavigationBuilder<State extends NavigationState, Rout
             key?: string | undefined;
             params: object | undefined;
             merge?: boolean | undefined;
-        }): void;
+        } : never): void;
         reset(state: Readonly<{
             key: string;
             index: number;
@@ -119,8 +119,8 @@ export default function useNavigationBuilder<State extends NavigationState, Rout
             source?: string | undefined;
             target?: string | undefined;
         }>)): void;
-        navigate<RouteName extends string>(...args: [screen: RouteName] | [screen: RouteName, params: object | undefined]): void;
-        navigate<RouteName_1 extends string>(options: {
+        navigate<RouteName extends string>(...args: RouteName extends unknown ? [screen: RouteName] | [screen: RouteName, params: object | undefined] : never): void;
+        navigate<RouteName_1 extends string>(options: RouteName_1 extends unknown ? {
             key: string;
             params?: object | undefined;
             merge?: boolean | undefined;
@@ -129,7 +129,7 @@ export default function useNavigationBuilder<State extends NavigationState, Rout
             key?: string | undefined;
             params: object | undefined;
             merge?: boolean | undefined;
-        }): void;
+        } : never): void;
         reset(state: State | PartialState<State>): void;
         goBack(): void;
         isFocused(): boolean;
@@ -158,5 +158,7 @@ export default function useNavigationBuilder<State extends NavigationState, Rout
         setParams(params: Partial<object | undefined>): void;
         setOptions(options: Partial<ScreenOptions>): void;
     } & import("./types").EventConsumer<EventMap & EventMapCore<State>> & PrivateValueStore<[ParamListBase, string, EventMap]> & ActionHelpers, import("./types").RouteProp<ParamListBase, string>>>;
-    NavigationContent: (rest: Omit<React.ProviderProps<import("./types").NavigationHelpers<ParamListBase, {}> | undefined>, "value">) => JSX.Element;
+    NavigationContent: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
 };

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

@@ -40,8 +40,8 @@ export default function useNavigationHelpers<State extends NavigationState, Acti
         source?: string | undefined;
         target?: string | undefined;
     }>)): void;
-    navigate<RouteName extends string>(...args: [screen: RouteName] | [screen: RouteName, params: object | undefined]): void;
-    navigate<RouteName_1 extends string>(options: {
+    navigate<RouteName extends string>(...args: RouteName extends unknown ? [screen: RouteName] | [screen: RouteName, params: object | undefined] : never): void;
+    navigate<RouteName_1 extends string>(options: RouteName_1 extends unknown ? {
         key: string;
         params?: object | undefined;
         merge?: boolean | undefined;
@@ -50,7 +50,7 @@ export default function useNavigationHelpers<State extends NavigationState, Acti
         key?: string | undefined;
         params: object | undefined;
         merge?: boolean | undefined;
-    }): void;
+    } : never): void;
     reset(state: Readonly<{
         key: string;
         index: number;

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

@@ -0,0 +1,12 @@
+import type { NavigationAction } from '@react-navigation/routers';
+/**
+ * Hook to prevent screen from being removed. Can be used to prevent users from leaving the screen.
+ *
+ * @param preventRemove Boolean indicating whether to prevent screen from being removed.
+ * @param callback Function which is executed when screen was prevented from being removed.
+ */
+export default function usePreventRemove(preventRemove: boolean, callback: (options: {
+    data: {
+        action: NavigationAction;
+    };
+}) => void): void;

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

@@ -0,0 +1,4 @@
+export default function usePreventRemoveContext(): {
+    preventedRoutes: import("./PreventRemoveContext").PreventedRoutes;
+    setPreventRemove: (id: string, routeKey: string, preventRemove: boolean) => void;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "keywords": [
     "react",
     "react-native",
@@ -31,26 +31,27 @@
     "access": "public"
   },
   "scripts": {
-    "prepare": "bob build",
+    "prepack": "bob build",
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^6.1.0",
+    "@react-navigation/routers": "^6.1.2",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.23",
     "query-string": "^7.0.0",
-    "react-is": "^16.13.0"
+    "react-is": "^16.13.0",
+    "use-latest-callback": "^0.1.5"
   },
   "devDependencies": {
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.9",
+    "@types/react": "^17.0.47",
     "@types/react-is": "^17.0.0",
     "del-cli": "^3.0.1",
     "immer": "^9.0.2",
-    "react": "17.0.1",
+    "react": "17.0.2",
     "react-native-builder-bob": "^0.18.1",
-    "react-test-renderer": "17.0.1",
-    "typescript": "^4.3.2"
+    "react-test-renderer": "17.0.2",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "*"
@@ -69,5 +70,5 @@
       ]
     ]
   },
-  "gitHead": "c5ef6b5e88426e658123ea8590da583314b9001e"
+  "gitHead": "83aa392f1e13796d609c9df0afa44699ce4bacae"
 }

package/src/PreventRemoveContext.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+/**
+ * A type of an object that have a route key as an object key
+ * and a value whether to prevent that route.
+ */
+export type PreventedRoutes = Record<string, { preventRemove: boolean }>;
+
+const PreventRemoveContext = React.createContext<
+  | {
+      preventedRoutes: PreventedRoutes;
+      setPreventRemove: (
+        id: string,
+        routeKey: string,
+        preventRemove: boolean
+      ) => void;
+    }
+  | undefined
+>(undefined);
+
+export default PreventRemoveContext;

package/src/PreventRemoveProvider.tsx

@@ -0,0 +1,126 @@
+import { nanoid } from 'nanoid/non-secure';
+import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
+
+import NavigationHelpersContext from './NavigationHelpersContext';
+import NavigationRouteContext from './NavigationRouteContext';
+import PreventRemoveContext, { PreventedRoutes } from './PreventRemoveContext';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+type PreventedRoutesMap = Map<
+  string,
+  {
+    routeKey: string;
+    preventRemove: boolean;
+  }
+>;
+
+/**
+ * Util function to transform map of prevented routes to a simpler object.
+ */
+const transformPreventedRoutes = (
+  preventedRoutesMap: PreventedRoutesMap
+): PreventedRoutes => {
+  const preventedRoutesToTransform = [...preventedRoutesMap.values()];
+
+  const preventedRoutes = preventedRoutesToTransform.reduce<PreventedRoutes>(
+    (acc, { routeKey, preventRemove }) => {
+      acc[routeKey] = {
+        preventRemove: acc[routeKey]?.preventRemove || preventRemove,
+      };
+      return acc;
+    },
+    {}
+  );
+
+  return preventedRoutes;
+};
+
+/**
+ * Component used for managing which routes have to be prevented from removal in native-stack.
+ */
+export default function PreventRemoveProvider({ children }: Props) {
+  const [parentId] = React.useState(() => nanoid());
+  const [preventedRoutesMap, setPreventedRoutesMap] =
+    React.useState<PreventedRoutesMap>(new Map());
+
+  const navigation = React.useContext(NavigationHelpersContext);
+  const route = React.useContext(NavigationRouteContext);
+
+  const preventRemoveContextValue = React.useContext(PreventRemoveContext);
+  // take `setPreventRemove` from parent context - if exist it means we're in a nested context
+  const setParentPrevented = preventRemoveContextValue?.setPreventRemove;
+
+  const setPreventRemove = useLatestCallback(
+    (id: string, routeKey: string, preventRemove: boolean): void => {
+      if (
+        preventRemove &&
+        (navigation == null ||
+          navigation
+            ?.getState()
+            .routes.every((route) => route.key !== routeKey))
+      ) {
+        throw new Error(
+          `Couldn't find a route with the key ${routeKey}. Is your component inside NavigationContent?`
+        );
+      }
+
+      setPreventedRoutesMap((prevPrevented) => {
+        // values haven't changed - do nothing
+        if (
+          routeKey === prevPrevented.get(id)?.routeKey &&
+          preventRemove === prevPrevented.get(id)?.preventRemove
+        ) {
+          return prevPrevented;
+        }
+
+        const nextPrevented = new Map(prevPrevented);
+
+        if (preventRemove) {
+          nextPrevented.set(id, {
+            routeKey,
+            preventRemove,
+          });
+        } else {
+          nextPrevented.delete(id);
+        }
+
+        return nextPrevented;
+      });
+    }
+  );
+
+  const isPrevented = [...preventedRoutesMap.values()].some(
+    ({ preventRemove }) => preventRemove
+  );
+
+  React.useEffect(() => {
+    if (route?.key !== undefined && setParentPrevented !== undefined) {
+      // when route is defined (and setParentPrevented) it means we're in a nested stack
+      // route.key then will be the route key of parent
+      setParentPrevented(parentId, route.key, isPrevented);
+      return () => {
+        setParentPrevented(parentId, route.key, false);
+      };
+    }
+
+    return;
+  }, [parentId, isPrevented, route?.key, setParentPrevented]);
+
+  const value = React.useMemo(
+    () => ({
+      setPreventRemove,
+      preventedRoutes: transformPreventedRoutes(preventedRoutesMap),
+    }),
+    [setPreventRemove, preventedRoutesMap]
+  );
+
+  return (
+    <PreventRemoveContext.Provider value={value}>
+      {children}
+    </PreventRemoveContext.Provider>
+  );
+}

package/src/getStateFromPath.tsx

@@ -565,7 +565,10 @@ const parseQueryParams = (
 
   if (parseConfig) {
     Object.keys(params).forEach((name) => {
-      if (parseConfig[name] && typeof params[name] === 'string') {
+      if (
+        Object.hasOwnProperty.call(parseConfig, name) &&
+        typeof params[name] === 'string'
+      ) {
         params[name] = parseConfig[name](params[name] as string);
       }
     });

package/src/index.tsx

@@ -11,6 +11,8 @@ export { default as NavigationContainerRefContext } from './NavigationContainerR
 export { default as NavigationContext } from './NavigationContext';
 export { default as NavigationHelpersContext } from './NavigationHelpersContext';
 export { default as NavigationRouteContext } from './NavigationRouteContext';
+export { default as PreventRemoveContext } from './PreventRemoveContext';
+export { default as PreventRemoveProvider } from './PreventRemoveProvider';
 export * from './types';
 export { default as useFocusEffect } from './useFocusEffect';
 export { default as useIsFocused } from './useIsFocused';
@@ -18,6 +20,8 @@ export { default as useNavigation } from './useNavigation';
 export { default as useNavigationBuilder } from './useNavigationBuilder';
 export { default as useNavigationContainerRef } from './useNavigationContainerRef';
 export { default as useNavigationState } from './useNavigationState';
+export { default as UNSTABLE_usePreventRemove } from './usePreventRemove';
+export { default as usePreventRemoveContext } from './usePreventRemoveContext';
 export { default as useRoute } from './useRoute';
 export { default as validatePathConfig } from './validatePathConfig';
 export * from '@react-navigation/routers';

package/src/types.tsx

@@ -192,9 +192,18 @@ type NavigationHelpersCommon<
    * @param [params] Params object for the route.
    */
   navigate<RouteName extends keyof ParamList>(
-    ...args: undefined extends ParamList[RouteName]
-      ? [screen: RouteName] | [screen: RouteName, params: ParamList[RouteName]]
-      : [screen: RouteName, params: ParamList[RouteName]]
+    ...args: // this first condition allows us to iterate over a union type
+    // This is to avoid getting a union of all the params from `ParamList[RouteName]`,
+    // which will get our types all mixed up if a union RouteName is passed in.
+    RouteName extends unknown
+      ? // This condition checks if the params are optional,
+        // which means it's either undefined or a union with undefined
+        undefined extends ParamList[RouteName]
+        ?
+            | [screen: RouteName] // if the params are optional, we don't have to provide it
+            | [screen: RouteName, params: ParamList[RouteName]]
+        : [screen: RouteName, params: ParamList[RouteName]]
+      : never
   ): void;
 
   /**
@@ -203,14 +212,16 @@ type NavigationHelpersCommon<
    * @param route Object with `key` or `name` for the route to navigate to, and a `params` object.
    */
   navigate<RouteName extends keyof ParamList>(
-    options:
-      | { key: string; params?: ParamList[RouteName]; merge?: boolean }
-      | {
-          name: RouteName;
-          key?: string;
-          params: ParamList[RouteName];
-          merge?: boolean;
-        }
+    options: RouteName extends unknown
+      ?
+          | { key: string; params?: ParamList[RouteName]; merge?: boolean }
+          | {
+              name: RouteName;
+              key?: string;
+              params: ParamList[RouteName];
+              merge?: boolean;
+            }
+      : never
   ): void;
 
   /**
@@ -325,7 +336,11 @@ export type NavigationProp<
    *
    * @param params Params object for the current route.
    */
-  setParams(params: Partial<ParamList[RouteName]>): void;
+  setParams(
+    params: ParamList[RouteName] extends undefined
+      ? undefined
+      : Partial<ParamList[RouteName]>
+  ): void;
 
   /**
    * Update the options for the route.
@@ -436,6 +451,16 @@ export type ScreenListeners<
   >;
 }>;
 
+type ScreenComponentType<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList
+> =
+  | React.ComponentType<{
+      route: RouteProp<ParamList, RouteName>;
+      navigation: any;
+    }>
+  | React.ComponentType<{}>;
+
 export type RouteConfigComponent<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList
@@ -444,7 +469,7 @@ export type RouteConfigComponent<
       /**
        * React component to render for this screen.
        */
-      component: React.ComponentType<any>;
+      component: ScreenComponentType<ParamList, RouteName>;
       getComponent?: never;
       children?: never;
     }
@@ -452,7 +477,7 @@ export type RouteConfigComponent<
       /**
        * Lazily get a React component to render for this screen.
        */
-      getComponent: () => React.ComponentType<any>;
+      getComponent: () => ScreenComponentType<ParamList, RouteName>;
       component?: never;
       children?: never;
     }

package/src/useChildListeners.tsx

@@ -15,14 +15,16 @@ export default function useChildListeners() {
 
   const addListener = React.useCallback(
     <T extends keyof ListenerMap>(type: T, listener: ListenerMap[T]) => {
-      // @ts-expect-error: listener should be correct type according to `type`
       listeners[type].push(listener);
 
+      let removed = false;
       return () => {
-        // @ts-expect-error: listener should be correct type according to `type`
         const index = listeners[type].indexOf(listener);
 
-        listeners[type].splice(index, 1);
+        if (!removed && index > -1) {
+          removed = true;
+          listeners[type].splice(index, 1);
+        }
       };
     },
     [listeners]

package/src/useComponent.tsx

@@ -1,30 +1,37 @@
 import * as React from 'react';
 
-export default function useComponent<
-  T extends React.ComponentType<any>,
-  P extends {}
->(Component: T, props: P) {
-  const propsRef = React.useRef<P | null>(props);
+type Render = (children: React.ReactNode) => JSX.Element;
+
+type Props = {
+  render: Render;
+  children: React.ReactNode;
+};
+
+const NavigationContent = ({ render, children }: Props) => {
+  return render(children);
+};
+
+export default function useComponent(render: Render) {
+  const renderRef = React.useRef<Render | null>(render);
 
   // Normally refs shouldn't be mutated in render
   // But we return a component which will be rendered
   // So it's just for immediate consumption
-  propsRef.current = props;
+  renderRef.current = render;
 
   React.useEffect(() => {
-    propsRef.current = null;
+    renderRef.current = null;
   });
 
-  return React.useRef((rest: Omit<React.ComponentProps<T>, keyof P>) => {
-    const props = propsRef.current;
+  return React.useRef(({ children }: { children: React.ReactNode }) => {
+    const render = renderRef.current;
 
-    if (props === null) {
+    if (render === null) {
       throw new Error(
         'The returned component must be rendered in the same render phase as the hook.'
       );
     }
 
-    // @ts-expect-error: the props should be fine here
-    return <Component {...props} {...rest} />;
+    return <NavigationContent render={render}>{children}</NavigationContent>;
   }).current;
 }

package/src/useEventEmitter.tsx

@@ -21,7 +21,9 @@ export default function useEventEmitter<T extends Record<string, any>>(
     listenRef.current = listen;
   });
 
-  const listeners = React.useRef<Record<string, Record<string, Listeners>>>({});
+  const listeners = React.useRef<Record<string, Record<string, Listeners>>>(
+    Object.create(null)
+  );
 
   const create = React.useCallback((target: string) => {
     const removeListener = (type: string, callback: (data: any) => void) => {
@@ -35,7 +37,9 @@ export default function useEventEmitter<T extends Record<string, any>>(
 
       const index = callbacks.indexOf(callback);
 
-      callbacks.splice(index, 1);
+      if (index > -1) {
+        callbacks.splice(index, 1);
+      }
     };
 
     const addListener = (type: string, callback: (data: any) => void) => {
@@ -43,7 +47,14 @@ export default function useEventEmitter<T extends Record<string, any>>(
       listeners.current[type][target] = listeners.current[type][target] || [];
       listeners.current[type][target].push(callback);
 
-      return () => removeListener(type, callback);
+      let removed = false;
+      return () => {
+        // Prevent removing other listeners when unsubscribing same listener multiple times
+        if (!removed) {
+          removed = true;
+          removeListener(type, callback);
+        }
+      };
     };
 
     return {

package/src/useFocusEffect.tsx

@@ -52,7 +52,7 @@ export default function useFocusEffect(effect: EffectCallback) {
             'Instead, write the async function inside your effect ' +
             'and call it immediately:\n\n' +
             'useFocusEffect(\n' +
-            '  React.useCallback() => {\n' +
+            '  React.useCallback(() => {\n' +
             '    async function fetchData() {\n' +
             '      // You can await here\n' +
             '      const response = await MyAPI.getData(someId);\n' +

package/src/useKeyedChildListeners.tsx

@@ -11,10 +11,12 @@ export default function useKeyedChildListeners() {
       string,
       KeyedListenerMap[K] | undefined
     >;
-  }>({
-    getState: {},
-    beforeRemove: {},
-  });
+  }>(
+    Object.assign(Object.create(null), {
+      getState: {},
+      beforeRemove: {},
+    })
+  );
 
   const addKeyedListener = React.useCallback(
     <T extends keyof KeyedListenerMap>(
@@ -22,9 +24,11 @@ export default function useKeyedChildListeners() {
       key: string,
       listener: KeyedListenerMap[T]
     ) => {
+      // @ts-expect-error: according to ref stated above you can use `key` to index type
       keyedListeners[type][key] = listener;
 
       return () => {
+        // @ts-expect-error: according to ref stated above you can use `key` to index type
         keyedListeners[type][key] = undefined;
       };
     },

package/src/useNavigationBuilder.tsx

@@ -19,6 +19,7 @@ import isRecordEqual from './isRecordEqual';
 import NavigationHelpersContext from './NavigationHelpersContext';
 import NavigationRouteContext from './NavigationRouteContext';
 import NavigationStateContext from './NavigationStateContext';
+import PreventRemoveProvider from './PreventRemoveProvider';
 import Screen from './Screen';
 import {
   DefaultNavigatorOptions,
@@ -690,9 +691,11 @@ export default function useNavigationBuilder<
     descriptors,
   });
 
-  const NavigationContent = useComponent(NavigationHelpersContext.Provider, {
-    value: navigation,
-  });
+  const NavigationContent = useComponent((children: React.ReactNode) => (
+    <NavigationHelpersContext.Provider value={navigation}>
+      <PreventRemoveProvider>{children}</PreventRemoveProvider>
+    </NavigationHelpersContext.Provider>
+  ));
 
   return {
     state,

package/src/useNavigationHelpers.tsx

@@ -95,12 +95,6 @@ export default function useNavigationHelpers<
             current = current.getParent();
           }
 
-          if (current == null) {
-            throw new Error(
-              `Couldn't find a parent navigator with the ID "${id}". Is this navigator nested under another navigator with this ID?`
-            );
-          }
-
           return current;
         }