@react-navigation/core 6.2.2 → 6.4.0

package/lib/module/usePreventRemoveContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePreventRemoveContext.tsx"],"names":["React","PreventRemoveContext","usePreventRemoveContext","value","useContext","Error"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,oBAAP,MAAiC,wBAAjC;AAEA,eAAe,SAASC,uBAAT,GAAmC;AAChD,QAAMC,KAAK,GAAGH,KAAK,CAACI,UAAN,CAAiBH,oBAAjB,CAAd;;AAEA,MAAIE,KAAK,IAAI,IAAb,EAAmB;AACjB,UAAM,IAAIE,KAAJ,CACJ,uFADI,CAAN;AAGD;;AAED,SAAOF,KAAP;AACD","sourcesContent":["import * as React from 'react';\n\nimport PreventRemoveContext from './PreventRemoveContext';\n\nexport default function usePreventRemoveContext() {\n  const value = React.useContext(PreventRemoveContext);\n\n  if (value == null) {\n    throw new Error(\n      \"Couldn't find the prevent remove context. Is your component inside NavigationContent?\"\n    );\n  }\n\n  return value;\n}\n"]}

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

@@ -0,0 +1,13 @@
+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 declare type PreventedRoutes = Record<string, {
+    preventRemove: boolean;
+}>;
+declare const PreventRemoveContext: React.Context<{
+    preventedRoutes: PreventedRoutes;
+    setPreventRemove: (id: string, routeKey: string, preventRemove: boolean) => void;
+} | undefined>;
+export default PreventRemoveContext;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+};
+/**
+ * Component used for managing which routes have to be prevented from removal in native-stack.
+ */
+export default function PreventRemoveProvider({ children }: Props): JSX.Element;
+export {};

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

@@ -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/lib/typescript/src/types.d.ts

@@ -142,13 +142,13 @@ declare type NavigationHelpersCommon<ParamList extends ParamListBase, State exte
      * @param name Name of the route to navigate to.
      * @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]]): void;
+    navigate<RouteName extends keyof ParamList>(...args: RouteName extends unknown ? undefined extends ParamList[RouteName] ? [screen: RouteName] | [screen: RouteName, params: ParamList[RouteName]] : [screen: RouteName, params: ParamList[RouteName]] : never): void;
     /**
      * Navigate to a route in current navigation tree.
      *
      * @param route Object with `key` or `name` for the route to navigate to, and a `params` object.
      */
-    navigate<RouteName extends keyof ParamList>(options: {
+    navigate<RouteName extends keyof ParamList>(options: RouteName extends unknown ? {
         key: string;
         params?: ParamList[RouteName];
         merge?: boolean;
@@ -157,7 +157,7 @@ declare type NavigationHelpersCommon<ParamList extends ParamListBase, State exte
         key?: string;
         params: ParamList[RouteName];
         merge?: boolean;
-    }): void;
+    } : never): void;
     /**
      * Reset the navigation state to the provided state.
      *
@@ -247,7 +247,7 @@ export declare type NavigationProp<ParamList extends {}, RouteName extends keyof
      *
      * @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.
      * The options object will be shallow merged with default options object.
@@ -316,18 +316,22 @@ export declare type Descriptor<ScreenOptions extends {}, Navigation extends Navi
 export declare type ScreenListeners<State extends NavigationState, EventMap extends EventMapBase> = Partial<{
     [EventName in keyof (EventMap & EventMapCore<State>)]: EventListenerCallback<EventMap, EventName>;
 }>;
+declare type ScreenComponentType<ParamList extends ParamListBase, RouteName extends keyof ParamList> = React.ComponentType<{
+    route: RouteProp<ParamList, RouteName>;
+    navigation: any;
+}> | React.ComponentType<{}>;
 export declare type RouteConfigComponent<ParamList extends ParamListBase, RouteName extends keyof ParamList> = {
     /**
      * React component to render for this screen.
      */
-    component: React.ComponentType<any>;
+    component: ScreenComponentType<ParamList, RouteName>;
     getComponent?: never;
     children?: never;
 } | {
     /**
      * Lazily get a React component to render for this screen.
      */
-    getComponent: () => React.ComponentType<any>;
+    getComponent: () => ScreenComponentType<ParamList, RouteName>;
     component?: never;
     children?: never;
 } | {

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

@@ -1,2 +1,6 @@
 import * as React from 'react';
-export default function useComponent<T extends React.ComponentType<any>, P extends {}>(Component: T, props: P): (rest: Omit<React.ComponentProps<T>, keyof P>) => JSX.Element;
+declare type Render = (children: React.ReactNode) => JSX.Element;
+export default function useComponent(render: Render): ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export {};

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.2",
+  "version": "6.4.0",
   "keywords": [
     "react",
     "react-native",
@@ -31,25 +31,26 @@
     "access": "public"
   },
   "scripts": {
-    "prepare": "bob build",
+    "prepack": "bob build",
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^6.1.1",
+    "@react-navigation/routers": "^6.1.3",
     "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.47",
+    "@types/react": "~18.0.0",
     "@types/react-is": "^17.0.0",
     "del-cli": "^3.0.1",
     "immer": "^9.0.2",
-    "react": "17.0.2",
+    "react": "18.0.0",
     "react-native-builder-bob": "^0.18.1",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.0.0",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
@@ -68,5 +69,6 @@
         }
       ]
     ]
-  }
+  },
+  "gitHead": "fc4c3a63ab156e17db7ba0cbd32ada319f78714e"
 }

package/src/BaseNavigationContainer.tsx

@@ -230,7 +230,7 @@ const BaseNavigationContainer = React.forwardRef(
     const lastEmittedOptionsRef = React.useRef<object | undefined>();
 
     const onOptionsChange = React.useCallback(
-      (options) => {
+      (options: object) => {
         if (lastEmittedOptionsRef.current === options) {
           return;
         }

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