@react-navigation/core 6.1.0 → 6.2.1

package/src/useNavigationBuilder.tsx

@@ -199,13 +199,19 @@ const getRouteConfigsFromChildren = <
           );
         }
 
-        if (typeof component === 'function' && component.name === 'component') {
-          // Inline anonymous functions passed in the `component` prop will have the name of the prop
-          // It's relatively safe to assume that it's not a component since it should also have PascalCase name
-          // We won't catch all scenarios here, but this should catch a good chunk of incorrect use.
-          console.warn(
-            `Looks like you're passing an inline function for 'component' prop for the screen '${name}' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.`
-          );
+        if (typeof component === 'function') {
+          if (component.name === 'component') {
+            // Inline anonymous functions passed in the `component` prop will have the name of the prop
+            // It's relatively safe to assume that it's not a component since it should also have PascalCase name
+            // We won't catch all scenarios here, but this should catch a good chunk of incorrect use.
+            console.warn(
+              `Looks like you're passing an inline function for 'component' prop for the screen '${name}' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.`
+            );
+          } else if (/^[a-z]/.test(component.name)) {
+            console.warn(
+              `Got a component with the name '${component.name}' for the screen '${name}'. React Components must start with an uppercase letter. If you're passing a regular function and not a component, pass it as children to 'Screen' instead. Otherwise capitalize your component's name.`
+            );
+          }
         }
       } else {
         throw new Error(
@@ -260,8 +266,11 @@ export default function useNavigationBuilder<
     })
   );
 
-  const routeConfigs =
-    getRouteConfigsFromChildren<State, ScreenOptions, EventMap>(children);
+  const routeConfigs = getRouteConfigsFromChildren<
+    State,
+    ScreenOptions,
+    EventMap
+  >(children);
 
   const screens = routeConfigs.reduce<
     Record<string, ScreenConfigWithParent<State, ScreenOptions, EventMap>>
@@ -636,6 +645,7 @@ export default function useNavigationBuilder<
     NavigationAction,
     EventMap
   >({
+    id: options.id,
     onAction,
     getState,
     emitter,

package/src/useNavigationCache.tsx

@@ -32,7 +32,14 @@ type NavigationCache<
   EventMap extends Record<string, any>
 > = Record<
   string,
-  NavigationProp<ParamListBase, string, State, ScreenOptions, EventMap>
+  NavigationProp<
+    ParamListBase,
+    string,
+    string | undefined,
+    State,
+    ScreenOptions,
+    EventMap
+  >
 >;
 
 /**
@@ -133,6 +140,15 @@ export default function useNavigationCache<
         // FIXME: too much work to fix the types for now
         ...(emitter.create(route.key) as any),
         dispatch: (thunk: Thunk) => withStack(() => dispatch(thunk)),
+        getParent: (id?: string) => {
+          if (id !== undefined && id === rest.getId()) {
+            // If the passed id is the same as the current navigation id,
+            // we return the cached navigation object for the relevant route
+            return acc[route.key];
+          }
+
+          return rest.getParent(id);
+        },
         setOptions: (options: object) =>
           setOptions((o) => ({
             ...o,

package/src/useNavigationHelpers.tsx

@@ -8,7 +8,7 @@ import {
 import * as React from 'react';
 
 import NavigationContext from './NavigationContext';
-import { NavigationHelpers, NavigationProp, PrivateValueStore } from './types';
+import { NavigationHelpers, PrivateValueStore } from './types';
 import UnhandledActionContext from './UnhandledActionContext';
 import type { NavigationEventEmitter } from './useEventEmitter';
 
@@ -17,6 +17,7 @@ import type { NavigationEventEmitter } from './useEventEmitter';
 PrivateValueStore;
 
 type Options<State extends NavigationState, Action extends NavigationAction> = {
+  id: string | undefined;
   onAction: (action: NavigationAction) => boolean;
   getState: () => State;
   emitter: NavigationEventEmitter<any>;
@@ -32,7 +33,13 @@ export default function useNavigationHelpers<
   ActionHelpers extends Record<string, () => void>,
   Action extends NavigationAction,
   EventMap extends Record<string, any>
->({ onAction, getState, emitter, router }: Options<State, Action>) {
+>({
+  id: navigatorId,
+  onAction,
+  getState,
+  emitter,
+  router,
+}: Options<State, Action>) {
   const onUnhandledAction = React.useContext(UnhandledActionContext);
   const parentNavigationHelpers = React.useContext(NavigationContext);
 
@@ -52,16 +59,13 @@ export default function useNavigationHelpers<
       ...CommonActions,
     };
 
-    const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
-      (acc, name) => {
-        // @ts-expect-error: name is a valid key, but TypeScript is dumb
-        acc[name] = (...args: any) => dispatch(actions[name](...args));
-        return acc;
-      },
-      {}
-    );
+    const helpers = Object.keys(actions).reduce((acc, name) => {
+      // @ts-expect-error: name is a valid key, but TypeScript is dumb
+      acc[name] = (...args: any) => dispatch(actions[name](...args));
+      return acc;
+    }, {} as ActionHelpers);
 
-    return {
+    const navigationHelpers = {
       ...parentNavigationHelpers,
       ...helpers,
       dispatch,
@@ -82,12 +86,26 @@ export default function useNavigationHelpers<
           false
         );
       },
-      getParent: () => parentNavigationHelpers as any,
+      getId: () => navigatorId,
+      getParent: (id?: string) => {
+        if (id !== undefined) {
+          let current = navigationHelpers;
+
+          while (current && id !== current.getId()) {
+            current = current.getParent();
+          }
+
+          return current;
+        }
+
+        return parentNavigationHelpers;
+      },
       getState,
-    } as NavigationHelpers<ParamListBase, EventMap> &
-      (NavigationProp<ParamListBase, string, any, any, any> | undefined) &
-      ActionHelpers;
+    } as NavigationHelpers<ParamListBase, EventMap> & ActionHelpers;
+
+    return navigationHelpers;
   }, [
+    navigatorId,
     emitter.emit,
     getState,
     onAction,