@react-navigation/core 8.0.0-alpha.30 → 8.0.0-alpha.32

package/src/useNavigationHelpers.tsx

@@ -7,6 +7,7 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationContext } from './NavigationProvider';
 import { type NavigationHelpers, PrivateValueStore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -19,7 +20,6 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
   onAction: (action: NavigationAction) => boolean;
   onUnhandledAction: (action: NavigationAction) => void;
   getState: () => State;
-  state: State;
   emitter: NavigationEventEmitter<any>;
   router: Router<State, Action>;
 };
@@ -37,38 +37,23 @@ export function useNavigationHelpers<
   onAction,
   onUnhandledAction,
   getState,
-  state,
   emitter,
   router,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.use(NavigationContext);
-
-  // In some cases (e.g. route names change), internal state might have changed
-  // But it hasn't been committed yet, so hasn't propagated to any listeners
-  // During this time, we need to return the internal state in `getState`
-  // Otherwise it can return an inconsistent state during render in children
-  // This may affect hooks like `useNavigationState` that need to read the state during render
-  // To avoid this, we use a ref for render phase, and immediately clear it on commit
-  // The ref won't be cleared if the render is discarded, e.g. when interrupted
-  // So we also track the stored state the render was based on
-  // Then ignore the ref once the stored state changes due to another dispatch
-  const stateRef = React.useRef<{ state: State; base: State } | null>(null);
-
-  stateRef.current = { state, base: getState() };
-
-  React.useInsertionEffect(() => {
-    stateRef.current = null;
-  });
+  const { withStackTrace } = React.use(NavigationBuilderContext);
 
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {
-      const action = typeof op === 'function' ? op(getState()) : op;
+      withStackTrace(dispatch, () => {
+        const action = typeof op === 'function' ? op(getState()) : op;
 
-      const handled = onAction(action);
+        const handled = onAction(action);
 
-      if (!handled) {
-        onUnhandledAction?.(action);
-      }
+        if (!handled) {
+          onUnhandledAction?.(action);
+        }
+      });
     };
 
     const actions = {
@@ -77,8 +62,15 @@ export function useNavigationHelpers<
     };
 
     const helpers = Object.keys(actions).reduce((acc, name) => {
+      const helper = (...args: any) =>
+        withStackTrace(helper, () =>
+          // @ts-expect-error: name is a valid key, but TypeScript is dumb
+          dispatch(actions[name](...args))
+        );
+
       // @ts-expect-error: name is a valid key, but TypeScript is dumb
-      acc[name] = (...args: any) => dispatch(actions[name](...args));
+      acc[name] = helper;
+
       return acc;
     }, {} as ActionHelpers);
 
@@ -103,18 +95,7 @@ export function useNavigationHelpers<
           false
         );
       },
-      getState: (): State => {
-        const current = getState();
-        const pending = stateRef.current;
-
-        // FIXME: Workaround for when the state is read during render
-        // Apart from subscriptions, `getState` should never be called during render
-        if (pending != null && pending.base === current) {
-          return pending.state;
-        }
-
-        return current;
-      },
+      getState,
     } as NavigationHelpers<ParamListBase, EventMap> & ActionHelpers;
 
     return navigationHelpers;
@@ -125,6 +106,6 @@ export function useNavigationHelpers<
     getState,
     onAction,
     onUnhandledAction,
-    stateRef,
+    withStackTrace,
   ]);
 }

package/src/useNavigationState.tsx

@@ -1,12 +1,19 @@
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
-import useLatestCallback from 'use-latest-callback';
 
 import type { NavigationListForNested, RootNavigator } from './types';
 
+type NavigationStateEvent = 'update' | 'commit';
+
 type NavigationStateListener = {
   getState: () => NavigationState<ParamListBase>;
-  subscribe: (callback: () => void) => () => void;
+  getSnapshot: () => NavigationState<ParamListBase>;
+  subscribe: (callback: (event: NavigationStateEvent) => void) => () => void;
+};
+
+type NavigationStateEntry = {
+  listener: NavigationStateListener;
+  state: NavigationState<ParamListBase>;
 };
 
 type NavigationStateForNested<
@@ -74,68 +81,134 @@ export function useNavigationState(...args: unknown[]): unknown {
     }
   }
 
-  const { getState, subscribe } = listener;
+  const { getState, getSnapshot, subscribe } = listener;
+
+  // The store can contain state from a transition that hasn't committed yet.
+  // Reading it during render can show state that doesn't match the navigator in that render.
+  // The reducer lets React process state in the same render lane as the navigator.
+  const [entry, dispatch] = React.useReducer(
+    (previous: NavigationStateEntry, event: NavigationStateEvent) => {
+      // Navigation state can change between the dispatch and the reducer running.
+      // Reading here ensures the processed event uses the state for that render.
+      const state = event === 'update' ? getState() : getSnapshot();
+
+      if (
+        previous.listener === listener &&
+        (previous.state === state ||
+          (event === 'update' &&
+            Object.is(select(previous.state), select(state))))
+      ) {
+        return previous;
+      }
 
-  const [, forceUpdate] = React.useReducer((count: number) => count + 1, 0);
+      return { listener, state };
+    },
+    undefined,
+    () => ({ listener, state: getState() })
+  );
 
-  const selected = select(getState());
+  let state = entry.state;
 
-  const selectionRef = React.useRef({ select, selected });
+  const committedRef = React.useRef<{
+    entry: NavigationStateEntry | null;
+    state: NavigationState<ParamListBase>;
+    select: (state: NavigationState<ParamListBase>) => unknown;
+  }>({ entry: null, state, select });
 
-  React.useLayoutEffect(() => {
-    selectionRef.current = { select, selected };
+  React.useInsertionEffect(() => {
+    committedRef.current = { entry, state, select };
   });
 
-  React.useEffect(() => {
-    const checkForUpdates = () => {
-      const selection = selectionRef.current;
+  const snapshot = getSnapshot();
+
+  const behind =
+    state !== snapshot &&
+    // A different listener means the state belongs to another navigator.
+    // This can happen when the passed route name changes.
+    (entry.listener !== listener ||
+      // An entry that advanced past the last commit is at least as new as the snapshot.
+      // An entry that didn't advance while the committed state changed is older.
+      entry === committedRef.current.entry);
 
-      if (!Object.is(selection.selected, selection.select(getState()))) {
-        forceUpdate();
+  if (behind) {
+    state = snapshot;
+    dispatch('commit');
+  }
+
+  React.useLayoutEffect(() => {
+    const check = (event: NavigationStateEvent) => {
+      const { state, select } = committedRef.current;
+
+      // An 'update' event follows the latest state in the lane the update was made in.
+      // A 'commit' event syncs the reducer to the state committed by the navigator.
+      const target = event === 'update' ? getState() : getSnapshot();
+
+      if (state !== target && !Object.is(select(state), select(target))) {
+        dispatch(event);
       }
     };
 
-    const unsubscribe = subscribe(checkForUpdates);
+    const unsubscribe = subscribe(check);
 
-    // The state may have changed between the render and the subscription
-    checkForUpdates();
+    // The reducer may not match the committed state when the subscription starts.
+    // This happens on mount during a transition or an update before subscribing.
+    check('commit');
 
     return unsubscribe;
-  }, [getState, subscribe]);
+  }, [getState, getSnapshot, subscribe]);
 
-  return selected;
+  return select(state);
 }
 
 export function NavigationStateListenerProvider({
+  isSynced,
   state,
   getState,
+  subscribe,
   children,
 }: {
+  isSynced: boolean;
   state: NavigationState<ParamListBase>;
   getState: () => NavigationState<ParamListBase>;
+  subscribe: (callback: () => void) => () => void;
   children: React.ReactNode;
 }) {
-  const listeners = React.useRef<(() => void)[]>([]);
+  const [listeners] = React.useState(
+    () => new Set<(event: NavigationStateEvent) => void>()
+  );
 
-  const subscribe = useLatestCallback((callback: () => void) => {
-    listeners.current.push(callback);
+  React.useLayoutEffect(() => {
+    listeners.forEach((listener) => listener('commit'));
+  }, [listeners, state]);
 
-    return () => {
-      listeners.current = listeners.current.filter((cb) => cb !== callback);
-    };
-  });
+  const snapshotRef = React.useRef(state);
 
-  // Notify subscribers once the new state has committed
-  React.useLayoutEffect(() => {
-    listeners.current.forEach((callback) => callback());
+  React.useInsertionEffect(() => {
+    snapshotRef.current = state;
   }, [state]);
 
+  // Route config or nested params can produce new state during render.
+  // If the scheduled update hasn't synced that state to the store yet,
+  // We need to expose the rendered state so consumers match the navigator.
+  // We keep this `undefined` for other scenarios, so the context isn't recreated.
+  const nextState = isSynced ? undefined : state;
+
   const context = React.useMemo(
     () => ({
       getState,
-      subscribe,
+      getSnapshot: () => nextState ?? snapshotRef.current,
+      subscribe: (callback: (event: NavigationStateEvent) => void) => {
+        const unsubscribe = subscribe(() => callback('update'));
+
+        listeners.add(callback);
+
+        return () => {
+          listeners.delete(callback);
+          unsubscribe();
+        };
+      },
     }),
-    [getState, subscribe]
+    [getState, listeners, nextState, subscribe]
   );
 
   return (
@@ -177,7 +250,7 @@ export function NamedNavigationStateListenerProvider({
   );
 }
 
-const NavigationStateListenerContext = React.createContext<
+export const NavigationStateListenerContext = React.createContext<
   NavigationStateListener | undefined
 >(undefined);
 

package/src/useOnGetNavigation.tsx

@@ -0,0 +1,29 @@
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { NavigationRouteContext } from './NavigationProvider';
+import type { NavigationHelpers } from './types';
+
+type Options = {
+  navigation: NavigationHelpers<ParamListBase>;
+};
+
+/**
+ * Hook which lets the container access the navigation object of the root navigator.
+ * It's used for the navigation object returned by `useNavigation` outside a screen.
+ */
+export function useOnGetNavigation({ navigation }: Options) {
+  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const route = React.use(NavigationRouteContext);
+
+  React.useInsertionEffect(() => {
+    // We only register if this is the root navigator
+    // i.e. there is no parent route
+    if (route != null) {
+      return;
+    }
+
+    return addKeyedListener?.('getNavigation', 'root', () => navigation);
+  }, [addKeyedListener, navigation, route]);
+}

package/src/useSyncState.tsx

@@ -24,13 +24,29 @@ const createStore = <T,>(getInitialState: () => T) => {
   let isBatching = false;
   let didUpdate = false;
 
+  const notify = () => {
+    let error: { value: unknown } | undefined;
+
+    listeners.forEach((listener) => {
+      try {
+        listener();
+      } catch (e) {
+        error = error ?? { value: e };
+      }
+    });
+
+    if (error) {
+      throw error.value;
+    }
+  };
+
   const setState = (newState: T) => {
     state = deepFreeze(newState);
 
     if (isBatching) {
       didUpdate = true;
     } else {
-      listeners.forEach((listener) => listener());
+      notify();
     }
   };
 
@@ -44,12 +60,16 @@ const createStore = <T,>(getInitialState: () => T) => {
 
   const batchUpdates = (callback: () => void) => {
     isBatching = true;
-    callback();
-    isBatching = false;
 
-    if (didUpdate) {
-      didUpdate = false;
-      listeners.forEach((listener) => listener());
+    try {
+      callback();
+    } finally {
+      isBatching = false;
+
+      if (didUpdate) {
+        didUpdate = false;
+        notify();
+      }
     }
   };
 
@@ -119,6 +139,7 @@ export function useSyncState<T>(getInitialState: () => T) {
     state,
     getState: store.getState,
     setState: store.setState,
+    subscribe: store.subscribe,
     scheduleUpdate,
     flushUpdates,
   } as const;

package/lib/module/checkSerializable.js

@@ -1,51 +0,0 @@
-"use strict";
-
-const checkSerializableWithoutCircularReference = (o, seen, location) => {
-  if (o === undefined || o === null || typeof o === 'boolean' || typeof o === 'number' || typeof o === 'string') {
-    return undefined;
-  }
-  if (Object.prototype.toString.call(o) !== '[object Object]' && !Array.isArray(o)) {
-    return {
-      serializable: false,
-      location: location.slice(),
-      reason: typeof o === 'function' ? 'Function' : String(o)
-    };
-  }
-  if (seen.has(o)) {
-    return {
-      serializable: false,
-      reason: 'Circular reference',
-      location: location.slice()
-    };
-  }
-  seen.add(o);
-  if (Array.isArray(o)) {
-    for (let i = 0; i < o.length; i++) {
-      location.push(i);
-      const childResult = checkSerializableWithoutCircularReference(o[i], seen, location);
-      location.pop();
-      if (childResult) {
-        seen.delete(o);
-        return childResult;
-      }
-    }
-  } else {
-    for (const key in o) {
-      location.push(key);
-      const childResult = checkSerializableWithoutCircularReference(o[key], seen, location);
-      location.pop();
-      if (childResult) {
-        seen.delete(o);
-        return childResult;
-      }
-    }
-  }
-  seen.delete(o);
-  return undefined;
-};
-export function checkSerializable(o) {
-  return checkSerializableWithoutCircularReference(o, new Set(), []) ?? {
-    serializable: true
-  };
-}
-//# sourceMappingURL=checkSerializable.js.map

package/lib/module/checkSerializable.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkSerializableWithoutCircularReference","o","seen","location","undefined","Object","prototype","toString","call","Array","isArray","serializable","slice","reason","String","has","add","i","length","push","childResult","pop","delete","key","checkSerializable","Set"],"sourceRoot":"../../src","sources":["checkSerializable.tsx"],"mappings":";;AAUA,MAAMA,yCAAyC,GAAGA,CAChDC,CAAyB,EACzBC,IAAc,EACdC,QAA6B,KACL;EACxB,IACEF,CAAC,KAAKG,SAAS,IACfH,CAAC,KAAK,IAAI,IACV,OAAOA,CAAC,KAAK,SAAS,IACtB,OAAOA,CAAC,KAAK,QAAQ,IACrB,OAAOA,CAAC,KAAK,QAAQ,EACrB;IACA,OAAOG,SAAS;EAClB;EAEA,IACEC,MAAM,CAACC,SAAS,CAACC,QAAQ,CAACC,IAAI,CAACP,CAAC,CAAC,KAAK,iBAAiB,IACvD,CAACQ,KAAK,CAACC,OAAO,CAACT,CAAC,CAAC,EACjB;IACA,OAAO;MACLU,YAAY,EAAE,KAAK;MACnBR,QAAQ,EAAEA,QAAQ,CAACS,KAAK,CAAC,CAAC;MAC1BC,MAAM,EAAE,OAAOZ,CAAC,KAAK,UAAU,GAAG,UAAU,GAAGa,MAAM,CAACb,CAAC;IACzD,CAAC;EACH;EAEA,IAAIC,IAAI,CAACa,GAAG,CAACd,CAAC,CAAC,EAAE;IACf,OAAO;MACLU,YAAY,EAAE,KAAK;MACnBE,MAAM,EAAE,oBAAoB;MAC5BV,QAAQ,EAAEA,QAAQ,CAACS,KAAK,CAAC;IAC3B,CAAC;EACH;EAEAV,IAAI,CAACc,GAAG,CAACf,CAAC,CAAC;EAEX,IAAIQ,KAAK,CAACC,OAAO,CAACT,CAAC,CAAC,EAAE;IACpB,KAAK,IAAIgB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGhB,CAAC,CAACiB,MAAM,EAAED,CAAC,EAAE,EAAE;MACjCd,QAAQ,CAACgB,IAAI,CAACF,CAAC,CAAC;MAChB,MAAMG,WAAW,GAAGpB,yCAAyC,CAC3DC,CAAC,CAACgB,CAAC,CAAC,EACJf,IAAI,EACJC,QACF,CAAC;MACDA,QAAQ,CAACkB,GAAG,CAAC,CAAC;MAEd,IAAID,WAAW,EAAE;QACflB,IAAI,CAACoB,MAAM,CAACrB,CAAC,CAAC;QACd,OAAOmB,WAAW;MACpB;IACF;EACF,CAAC,MAAM;IACL,KAAK,MAAMG,GAAG,IAAItB,CAAC,EAAE;MACnBE,QAAQ,CAACgB,IAAI,CAACI,GAAG,CAAC;MAClB,MAAMH,WAAW,GAAGpB,yCAAyC,CAC3DC,CAAC,CAACsB,GAAG,CAAC,EACNrB,IAAI,EACJC,QACF,CAAC;MACDA,QAAQ,CAACkB,GAAG,CAAC,CAAC;MAEd,IAAID,WAAW,EAAE;QACflB,IAAI,CAACoB,MAAM,CAACrB,CAAC,CAAC;QACd,OAAOmB,WAAW;MACpB;IACF;EACF;EAEAlB,IAAI,CAACoB,MAAM,CAACrB,CAAC,CAAC;EAEd,OAAOG,SAAS;AAClB,CAAC;AAED,OAAO,SAASoB,iBAAiBA,CAACvB,CAAyB,EAAU;EACnE,OACED,yCAAyC,CAACC,CAAC,EAAE,IAAIwB,GAAG,CAAM,CAAC,EAAE,EAAE,CAAC,IAAI;IAClEd,YAAY,EAAE;EAChB,CAAC;AAEL","ignoreList":[]}

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

@@ -1,14 +0,0 @@
-type Success = {
-    serializable: true;
-};
-type Failure = {
-    serializable: false;
-    location: (string | number)[];
-    reason: string;
-};
-type Result = Success | Failure;
-export declare function checkSerializable(o: {
-    [key: string]: any;
-}): Result;
-export {};
-//# sourceMappingURL=checkSerializable.d.ts.map

package/lib/typescript/src/checkSerializable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkSerializable.d.ts","sourceRoot":"","sources":["../../../src/checkSerializable.tsx"],"names":[],"mappings":"AAAA,KAAK,OAAO,GAAG;IAAE,YAAY,EAAE,IAAI,CAAA;CAAE,CAAC;AAEtC,KAAK,OAAO,GAAG;IACb,YAAY,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AA2EhC,wBAAgB,iBAAiB,CAAC,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,MAAM,CAMnE"}

package/src/checkSerializable.tsx

@@ -1,90 +0,0 @@
-type Success = { serializable: true };
-
-type Failure = {
-  serializable: false;
-  location: (string | number)[];
-  reason: string;
-};
-
-type Result = Success | Failure;
-
-const checkSerializableWithoutCircularReference = (
-  o: { [key: string]: any },
-  seen: Set<any>,
-  location: (string | number)[]
-): Failure | undefined => {
-  if (
-    o === undefined ||
-    o === null ||
-    typeof o === 'boolean' ||
-    typeof o === 'number' ||
-    typeof o === 'string'
-  ) {
-    return undefined;
-  }
-
-  if (
-    Object.prototype.toString.call(o) !== '[object Object]' &&
-    !Array.isArray(o)
-  ) {
-    return {
-      serializable: false,
-      location: location.slice(),
-      reason: typeof o === 'function' ? 'Function' : String(o),
-    };
-  }
-
-  if (seen.has(o)) {
-    return {
-      serializable: false,
-      reason: 'Circular reference',
-      location: location.slice(),
-    };
-  }
-
-  seen.add(o);
-
-  if (Array.isArray(o)) {
-    for (let i = 0; i < o.length; i++) {
-      location.push(i);
-      const childResult = checkSerializableWithoutCircularReference(
-        o[i],
-        seen,
-        location
-      );
-      location.pop();
-
-      if (childResult) {
-        seen.delete(o);
-        return childResult;
-      }
-    }
-  } else {
-    for (const key in o) {
-      location.push(key);
-      const childResult = checkSerializableWithoutCircularReference(
-        o[key],
-        seen,
-        location
-      );
-      location.pop();
-
-      if (childResult) {
-        seen.delete(o);
-        return childResult;
-      }
-    }
-  }
-
-  seen.delete(o);
-
-  return undefined;
-};
-
-export function checkSerializable(o: { [key: string]: any }): Result {
-  return (
-    checkSerializableWithoutCircularReference(o, new Set<any>(), []) ?? {
-      serializable: true,
-    }
-  );
-}