@react-navigation/core 6.2.2 → 6.3.0

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/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) => {

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>(

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/usePreventRemove.tsx

@@ -0,0 +1,51 @@
+import type { NavigationAction } from '@react-navigation/routers';
+import { nanoid } from 'nanoid/non-secure';
+import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
+
+import type { EventListenerCallback, EventMapCore } from './types';
+import useNavigation from './useNavigation';
+import usePreventRemoveContext from './usePreventRemoveContext';
+import useRoute from './useRoute';
+
+/**
+ * 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
+) {
+  const [id] = React.useState(() => nanoid());
+
+  const navigation = useNavigation();
+  const { key: routeKey } = useRoute();
+
+  const { setPreventRemove } = usePreventRemoveContext();
+
+  React.useEffect(() => {
+    setPreventRemove(id, routeKey, preventRemove);
+    return () => {
+      setPreventRemove(id, routeKey, false);
+    };
+  }, [setPreventRemove, id, routeKey, preventRemove]);
+
+  const beforeRemoveListener = useLatestCallback<
+    EventListenerCallback<EventMapCore<any>, 'beforeRemove'>
+  >((e) => {
+    if (!preventRemove) {
+      return;
+    }
+
+    e.preventDefault();
+
+    callback({ data: e.data });
+  });
+
+  React.useEffect(
+    () => navigation?.addListener('beforeRemove', beforeRemoveListener),
+    [navigation, beforeRemoveListener]
+  );
+}

package/src/usePreventRemoveContext.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import PreventRemoveContext from './PreventRemoveContext';
+
+export default function usePreventRemoveContext() {
+  const value = React.useContext(PreventRemoveContext);
+
+  if (value == null) {
+    throw new Error(
+      "Couldn't find the prevent remove context. Is your component inside NavigationContent?"
+    );
+  }
+
+  return value;
+}