@react-navigation/core 8.0.0-alpha.34 → 8.0.0-alpha.36

package/src/NavigationProvider.tsx

@@ -1,8 +1,13 @@
 import type { ParamListBase, Route } from '@react-navigation/routers';
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import type { NavigationProp } from './types';
-import { FocusedRouteKeyContext, IsFocusedContext } from './useIsFocused';
+import {
+  FocusedRouteKeyContext,
+  IsFocusedContext,
+  IsFocusedGetterContext,
+} from './useIsFocused';
 import { useLazyValue } from './useLazyValue';
 import { NamedNavigationStateListenerProvider } from './useNavigationState';
 
@@ -62,6 +67,8 @@ export function NavigationProvider({ route, navigation, children }: Props) {
       ? focusedRouteKey === route.key
       : false;
 
+  const getIsFocused = useLatestCallback(() => isFocused);
+
   return (
     <NamedNavigationStateListenerProvider name={route.name}>
       <NamedRouteContextListContext.Provider value={NamedRouteContextList}>
@@ -69,9 +76,11 @@ export function NavigationProvider({ route, navigation, children }: Props) {
           <NavigationRouteContext.Provider value={route}>
             <NavigationContext.Provider value={navigation}>
               <IsFocusedContext.Provider value={isFocused}>
-                <IsScreenContext.Provider value={true}>
-                  {children}
-                </IsScreenContext.Provider>
+                <IsFocusedGetterContext.Provider value={getIsFocused}>
+                  <IsScreenContext.Provider value={true}>
+                    {children}
+                  </IsScreenContext.Provider>
+                </IsFocusedGetterContext.Provider>
               </IsFocusedContext.Provider>
             </NavigationContext.Provider>
           </NavigationRouteContext.Provider>

package/src/PreventRemoveProvider.tsx

@@ -50,15 +50,9 @@ export function PreventRemoveProvider({ children }: Props) {
 
   const setPreventRemove = useLatestCallback(
     (id: string, routeKey: string, preventRemove: boolean): void => {
-      if (
-        preventRemove &&
-        (navigation == null ||
-          navigation
-            ?.getState()
-            .routes.every((route) => route.key !== routeKey))
-      ) {
+      if (preventRemove && navigation == null) {
         throw new Error(
-          `Couldn't find a route with the key ${routeKey}. Is your component inside NavigationContent?`
+          "Couldn't find a navigation object. This is likely a bug in the navigator.\n\nIf you're using a custom navigator, make sure that the navigator content is wrapped by the 'render' function returned by 'useNavigationBuilder'."
         );
       }
 

package/src/SceneView.tsx

@@ -22,6 +22,7 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
   navigation: NavigationProp<ParamListBase, string, State, ScreenOptions>;
   route: Route<string>;
   routeState: NavigationState | PartialState<NavigationState> | undefined;
+  getFocusedRouteKey: () => string | undefined;
   getState: () => State;
   setState: (state: State) => void;
   subscribe: (callback: () => void) => () => void;
@@ -41,6 +42,7 @@ export function SceneView<
   route,
   navigation,
   routeState,
+  getFocusedRouteKey,
   getState,
   setState,
   subscribe,
@@ -53,7 +55,7 @@ export function SceneView<
   const { addOptionsGetter } = useOptionsGetters({
     key: route.key,
     options,
-    navigation,
+    getFocusedRouteKey,
   });
 
   const setKey = React.useCallback((key: string) => {

package/src/getPathFromState.tsx

@@ -1,5 +1,4 @@
 import type { NavigationState, PartialState } from '@react-navigation/routers';
-import queryString from 'query-string';
 
 import {
   combinePatternParts,
@@ -7,6 +6,7 @@ import {
   type PatternPart,
 } from './getPatternParts';
 import { getStateFromRouteParams } from './getStateFromRouteParams';
+import * as queryString from './queryString';
 import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
@@ -226,7 +226,9 @@ export function getPathFromState<ParamList extends {}>(
       if (route.params) {
         const options = config;
         const params = route.params as Record<string, unknown>;
-        const currentParams: Record<string, SerializedParamValue> = {};
+        const currentParams: Record<string, SerializedParamValue> = {
+          __proto__: null,
+        };
 
         for (const key in params) {
           const value = params[key];
@@ -270,7 +272,7 @@ export function getPathFromState<ParamList extends {}>(
           // If this is the focused route, keep the params for later use
           // We save it here since it's been stringified already
           // Params claimed by the pattern shouldn't be repeated in the query string
-          focusedParams = {};
+          focusedParams = { __proto__: null };
 
           for (const key in currentParams) {
             const value = currentParams[key];
@@ -405,7 +407,7 @@ export function getPathFromState<ParamList extends {}>(
     }
 
     if (!focusedParams && focusedRoute.params) {
-      focusedParams = {};
+      focusedParams = { __proto__: null };
 
       const params = focusedRoute.params as Record<string, unknown>;
 
@@ -421,7 +423,7 @@ export function getPathFromState<ParamList extends {}>(
     if (routeState) {
       path += '/';
     } else if (focusedParams) {
-      const query = queryString.stringify(focusedParams, { sort: false });
+      const query = queryString.stringify(focusedParams);
 
       if (query) {
         path += `?${query}`;

package/src/getStateFromPath.tsx

@@ -1,5 +1,4 @@
 import type { NavigationState, PartialState } from '@react-navigation/routers';
-import queryString from 'query-string';
 
 import { arrayStartsWith } from './arrayStartsWith';
 import {
@@ -8,6 +7,7 @@ import {
   type PatternPartRepeat,
 } from './getPatternParts';
 import { isArrayEqual } from './isArrayEqual';
+import * as queryString from './queryString';
 import type { PathConfig, PathConfigMap } from './types';
 import type {
   StandardSchemaV1,

package/src/queryString.ts

@@ -0,0 +1,109 @@
+type QueryValue = string | null | (string | null)[];
+
+// Match complete UTF-8 sequences so malformed input can be decoded partially
+// without repeatedly splitting and retrying an arbitrarily long byte sequence.
+const ENCODED_UTF8 = new RegExp(
+  [
+    '%[0-7][\\dA-F]',
+    '%(?:C[2-9A-F]|D[\\dA-F])%[89AB][\\dA-F]',
+    '%E0%[AB][\\dA-F]%[89AB][\\dA-F]',
+    '%E[1-9A-CEF](?:%[89AB][\\dA-F]){2}',
+    '%ED%[89][\\dA-F]%[89AB][\\dA-F]',
+    '%F0%[9AB][\\dA-F](?:%[89AB][\\dA-F]){2}',
+    '%F[1-3](?:%[89AB][\\dA-F]){3}',
+    '%F4%8[\\dA-F](?:%[89AB][\\dA-F]){2}',
+  ].join('|'),
+  'gi'
+);
+
+const decode = (value: string) => {
+  if (!value.includes('%')) {
+    return value;
+  }
+
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value.replace(ENCODED_UTF8, (sequence) =>
+      decodeURIComponent(sequence)
+    );
+  }
+};
+
+const encode = (value: string) => {
+  if (/^[A-Za-z0-9_.~-]*$/.test(value)) {
+    return value;
+  }
+
+  return encodeURIComponent(value).replace(
+    /[!'()*]/g,
+    (char) => `%${char.charCodeAt(0).toString(16).toUpperCase()}`
+  );
+};
+
+export function parse(query: string): Record<string, QueryValue> {
+  const params: Record<string, QueryValue> = Object.create(null);
+
+  query = query.trim().replace(/^[?#&]/, '');
+
+  let start = 0;
+
+  while (start < query.length) {
+    if (query[start] === '&') {
+      start++;
+      continue;
+    }
+
+    const end = query.indexOf('&', start);
+    const index = end === -1 ? query.length : end;
+    const part = query.slice(start, index).replace(/\+/g, ' ');
+    const separator = part.indexOf('=');
+    const key = decode(separator === -1 ? part : part.slice(0, separator));
+    const value = separator === -1 ? null : decode(part.slice(separator + 1));
+    const previous = params[key];
+
+    if (previous === undefined) {
+      params[key] = value;
+    } else if (Array.isArray(previous)) {
+      previous.push(value);
+    } else {
+      params[key] = [previous, value];
+    }
+
+    start = index + 1;
+  }
+
+  return params;
+}
+
+export function stringify(
+  params: Record<string, string | string[] | null>
+): string {
+  const parts: string[] = [];
+
+  for (const [key, value] of Object.entries(params)) {
+    if (Array.isArray(value)) {
+      let encodedKey: string | undefined;
+
+      value.forEach((item) => {
+        encodedKey ??= encode(key);
+
+        parts.push(`${encodedKey}=${encode(item)}`);
+      });
+
+      continue;
+    }
+
+    const encodedKey = encode(key);
+
+    if (value === null) {
+      if (encodedKey) {
+        parts.push(encodedKey);
+      }
+    } else {
+      parts.push(`${encodedKey}=${encode(value)}`);
+    }
+  }
+
+  return parts.join('&');
+}

package/src/useDescriptors.tsx

@@ -6,6 +6,7 @@ import type {
   Router,
 } from '@react-navigation/routers';
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import {
   type AddKeyedListener,
@@ -68,11 +69,11 @@ type Options<
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 > = {
-  routes: State['routes'];
   screens: Record<
     string,
     ScreenConfigWithParent<State, ScreenOptions, EventMap>
   >;
+  state: State;
   navigation: NavigationHelpers<ParamListBase>;
   screenOptions: ScreenOptionsOrCallback<ScreenOptions> | undefined;
   screenLayout: ScreenLayout<ScreenOptions> | undefined;
@@ -101,8 +102,8 @@ export function useDescriptors<
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 >({
-  routes,
   screens,
+  state,
   navigation,
   screenOptions,
   screenLayout,
@@ -117,6 +118,7 @@ export function useDescriptors<
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
   const theme = React.use(ThemeContext);
+
   const [options, setOptions] = React.useState<
     Record<string, Partial<ScreenOptions> | undefined>
   >({});
@@ -167,7 +169,7 @@ export function useDescriptors<
     EventMap,
     ActionHelpers
   >({
-    routes,
+    routes: state.routes,
     getState,
     navigation,
     setOptions,
@@ -175,7 +177,11 @@ export function useDescriptors<
     emitter,
   });
 
-  const cachedRoutes = useRouteCache(routes);
+  const cachedRoutes = useRouteCache(state.routes);
+
+  const getFocusedRouteKey = useLatestCallback(
+    () => state.routes[state.index]?.key
+  );
 
   const getOptions = (
     route: RouteProp<ParamListBase, string>,
@@ -258,6 +264,7 @@ export function useDescriptors<
         route={route}
         screen={screen}
         routeState={routeState}
+        getFocusedRouteKey={getFocusedRouteKey}
         getState={getState}
         setState={setState}
         subscribe={subscribe}
@@ -313,7 +320,13 @@ export function useDescriptors<
     }
 
     const customOptions = getOptions(route, navigation, overrides);
-    const element = render(route, navigation, customOptions, routes[i]?.state);
+
+    const element = render(
+      route,
+      navigation,
+      customOptions,
+      state.routes[i]?.state
+    );
 
     acc[route.key] = {
       route,

package/src/useFocusEffect.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { IsFocusedGetterContext } from './useIsFocused';
 import { useNavigation } from './useNavigation';
 
 type EffectCallback = () => undefined | void | (() => void);
@@ -14,6 +15,8 @@ type EffectCallback = () => undefined | void | (() => void);
 export function useFocusEffect(effect: EffectCallback) {
   const navigation = useNavigation();
 
+  const getIsFocused = React.use(IsFocusedGetterContext);
+
   // eslint-disable-next-line prefer-rest-params
   if (arguments[1] !== undefined) {
     const message =
@@ -72,7 +75,7 @@ export function useFocusEffect(effect: EffectCallback) {
     };
 
     // We need to run the effect on initial render/dep changes if the screen is focused
-    if (navigation.isFocused()) {
+    if (getIsFocused?.() ?? true) {
       cleanup = callback();
       isFocused = true;
     }
@@ -109,5 +112,5 @@ export function useFocusEffect(effect: EffectCallback) {
       unsubscribeFocus();
       unsubscribeBlur();
     };
-  }, [effect, navigation]);
+  }, [effect, navigation, getIsFocused]);
 }

package/src/useFocusEvents.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { NavigationContext } from './NavigationProvider';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
+import { IsFocusedGetterContext } from './useIsFocused';
 
 type Options<State extends NavigationState> = {
   state: State;
@@ -18,6 +19,8 @@ export function useFocusEvents<State extends NavigationState>({
   emitter,
 }: Options<State>) {
   const navigation = React.use(NavigationContext);
+  const getIsFocused = React.use(IsFocusedGetterContext);
+
   const lastFocusedKeyRef = React.useRef<string | undefined>(undefined);
 
   const currentFocusedRoute = state.routes[state.index];
@@ -51,7 +54,7 @@ export function useFocusEvents<State extends NavigationState>({
   React.useEffect(() => {
     const lastFocusedKey = lastFocusedKeyRef.current;
 
-    const isFocused = navigation ? navigation.isFocused() : true;
+    const isFocused = getIsFocused?.() ?? true;
 
     if (isFocused) {
       // Remember the current route as focused if the navigator is focused
@@ -77,5 +80,5 @@ export function useFocusEvents<State extends NavigationState>({
 
     emitter.emit({ type: 'blur', target: lastFocusedKey });
     emitter.emit({ type: 'focus', target: currentFocusedKey });
-  }, [currentFocusedKey, emitter, navigation]);
+  }, [currentFocusedKey, emitter, navigation, getIsFocused]);
 }

package/src/useIsFocused.tsx

@@ -8,6 +8,10 @@ export const IsFocusedContext = React.createContext<boolean | undefined>(
   undefined
 );
 
+export const IsFocusedGetterContext = React.createContext<
+  (() => boolean) | undefined
+>(undefined);
+
 /**
  * Hook to get the current focus state of the screen. Returns a `true` if screen is focused, otherwise `false`.
  * This can be used if a component needs to render something based on the focus state.

package/src/useNavigationBuilder.tsx

@@ -36,7 +36,6 @@ import {
 } from './types';
 import { UnhandledActionContext } from './UnhandledActionContext';
 import { useChildListeners } from './useChildListeners';
-import { useComponent } from './useComponent';
 import { type ScreenConfigWithParent, useDescriptors } from './useDescriptors';
 import { useEventEmitter } from './useEventEmitter';
 import { useFocusedListenersChildrenAdapter } from './useFocusedListenersChildrenAdapter';
@@ -462,16 +461,20 @@ export function useNavigationBuilder<
 
   const { onEmitEvent, getIsStateEmitted } = useNavigationBuilderContext();
 
-  const stateCleanupRef = React.useRef<boolean>(false);
-  const lastStateRef = React.useRef<State | PartialState<State> | undefined>(
+  const mountStateRef = React.useRef<'initial' | 'mounted' | 'unmounted'>(
+    'initial'
+  );
+
+  const previousStateRef = React.useRef(currentState);
+  const savedStateRef = React.useRef<State | PartialState<State> | undefined>(
     undefined
   );
 
   const setState = useLatestCallback(
     (state: State | PartialState<State> | undefined) => {
-      if (stateCleanupRef.current) {
+      if (mountStateRef.current === 'unmounted') {
         // Store the state locally in case the current navigator is in `Activity`
-        lastStateRef.current = state;
+        savedStateRef.current = state;
 
         // State might have been already cleaned up due to unmount
         // We don't want to update `route.state` in parent
@@ -483,6 +486,19 @@ export function useNavigationBuilder<
     }
   );
 
+  const lastState =
+    (mountStateRef.current !== 'mounted' ||
+      !isStateInitialized(currentState)) &&
+    // If the state object differs from previously committed state, we have new state
+    // e.g. because of a reset
+    // So we need to use it before checking if we should reuse the saved state.
+    (currentState === previousStateRef.current ||
+      (mountStateRef.current === 'unmounted' && currentState === undefined))
+      ? // If the navigator is hidden with `Activity`, its state gets cleaned up due to effect cleanup.
+        // So we reuse the saved state to avoid remounting screens when the navigator is shown again.
+        savedStateRef.current
+      : undefined;
+
   const [
     stateBeforeInitialization,
     initializedState,
@@ -494,17 +510,10 @@ export function useNavigationBuilder<
     boolean,
     object | undefined,
   ] => {
-    // If the state was already cleaned up, but we have it stored in ref,
-    // It likely got cleaned up due to `<Activity mode="hidden">`
-    // We should reuse this state to avoid remounting screens
-    if (
-      stateCleanupRef.current &&
-      lastStateRef.current &&
-      isStateValid(lastStateRef.current)
-    ) {
-      const state: State = isStateInitialized(lastStateRef.current)
-        ? lastStateRef.current
-        : router.getRehydratedState(lastStateRef.current, {
+    if (lastState && isStateValid(lastState)) {
+      const state: State = isStateInitialized(lastState)
+        ? lastState
+        : router.getRehydratedState(lastState, {
             routeNames,
             routeParamList,
             routeGetIdList,
@@ -605,7 +614,7 @@ export function useNavigationBuilder<
     // that some changes to routeConfigs are explicitly ignored, such as changes
     // to initialParams
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentState, router, isStateValid]);
+  }, [currentState, lastState, router, isStateValid]);
 
   const previousRouteKeyListRef = React.useRef(routeKeyList);
 
@@ -645,7 +654,7 @@ export function useNavigationBuilder<
     // If the state isn't initialized, or stale, use the state we initialized instead
     // The state won't update until there's a change needed in the state we have initialized locally
     // So it'll be `undefined` or stale until the first navigation event happens
-    isStateInitialized(currentState)
+    lastState === undefined && isStateInitialized(currentState)
       ? (currentState as State)
       : (initializedState as State);
 
@@ -770,7 +779,7 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     if (
       consumedParams &&
       didConsumeNestedParams &&
@@ -799,24 +808,29 @@ export function useNavigationBuilder<
   // So we override the state object we return to use the latest state as soon as possible
   state = nextState;
 
-  // Last state to reuse if component gets cleaned up due to `<Activity mode="hidden">`
-  React.useEffect(() => {
-    lastStateRef.current = state;
+  React.useInsertionEffect(() => {
+    savedStateRef.current = state;
+    previousStateRef.current = currentState;
   });
 
-  const lastNotifiedStateRef = React.useRef<State | null>(null);
+  React.useInsertionEffect(() => {
+    return () => {
+      // An initially hidden Activity doesn't run passive effects or their cleanup.
+      // We mark actual unmount here so queued updates can't write state into a replacement navigator.
+      mountStateRef.current = 'unmounted';
+    };
+  }, []);
 
   React.useEffect(() => {
+    const savedState = savedStateRef.current ?? state;
+
     // In strict mode, React will double-invoke effects.
-    // So we need to reset the flag if component was not unmounted
-    stateCleanupRef.current = false;
+    // So we need to reset the status if component was not unmounted
+    mountStateRef.current = 'mounted';
 
     setKey(navigatorKey);
 
-    if (
-      (!getIsInitial() || getIsStateEmitted()) &&
-      lastNotifiedStateRef.current !== state
-    ) {
+    if (!getIsInitial() || getIsStateEmitted()) {
       // We need to notify the state update in these scenarios:
       // 1. If it's not the initial render of the component containing the navigator
       // 2. If the container has already emitted state before the navigator mounted
@@ -829,31 +843,25 @@ export function useNavigationBuilder<
       // So only checking for the initial render is not enough.
       // We also need to propagate the navigator's initial state when it mounts later,
       // so the container is notified that the nested state is now available.
-      //
-      // We only notify if the state is different from what we already notified
-      // Otherwise, this goes into a loop when inside `<Activity mode="hidden">`
-      setState(state);
-
-      lastNotifiedStateRef.current = state;
+      setState(savedState);
     }
 
     return () => {
       // We need to clean up state for this navigator on unmount
       if (getCurrentState() !== undefined && getKey() === navigatorKey) {
         setCurrentState(undefined);
-        stateCleanupRef.current = true;
       }
 
-      // Reset so that StrictMode's second mount re-propagates state correctly.
-      // Without this, the guard above sees the same reference and skips setState,
-      // causing the initial state to be lost after cleanup wipes the container state.
-      lastNotifiedStateRef.current = null;
+      mountStateRef.current = 'unmounted';
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const getState = useLatestCallback((): State => {
-    const currentState = getCurrentState();
+    const currentState =
+      mountStateRef.current === 'unmounted'
+        ? savedStateRef.current
+        : getCurrentState();
 
     return deepFreeze(
       (isStateInitialized(currentState)
@@ -1026,8 +1034,8 @@ export function useNavigationBuilder<
     ScreenOptions,
     EventMap
   >({
-    routes: state.routes,
     screens,
+    state,
     navigation,
     screenOptions,
     screenLayout,
@@ -1043,7 +1051,7 @@ export function useNavigationBuilder<
     emitter,
   });
 
-  const NavigationContent = useComponent((children: React.ReactNode) => {
+  const render = (children: React.ReactNode) => {
     const focusedRoute = state.routes[state.index];
 
     if (focusedRoute == null) {
@@ -1080,12 +1088,12 @@ export function useNavigationBuilder<
         </NavigationHelpersContext.Provider>
       </NavigationMetaContext.Provider>
     );
-  });
+  };
 
   return {
     state,
     navigation,
     descriptors,
-    NavigationContent,
+    render,
   };
 }