@react-navigation/native 8.0.0-alpha.5 → 8.0.0-alpha.51

package/src/NavigationContainer.tsx

@@ -6,17 +6,21 @@ import {
   type InitialState,
   type NavigationContainerProps,
   type NavigationContainerRef,
-  type ParamListBase,
+  type NavigationState,
+  type PartialState,
   type RootParamList,
   ThemeProvider,
   validatePathConfig,
 } from '@react-navigation/core';
 import * as React from 'react';
-import { I18nManager, Platform } from 'react-native';
+import warnOnce from 'warn-once';
 
+import { checkSerializable } from './checkSerializable';
+import { DEFAULT_DIRECTION, IS_NATIVE } from './constants';
+import { getStateBreadcrumb } from './getStateBreadcrumb';
 import { LinkingContext } from './LinkingContext';
 import { LocaleDirContext } from './LocaleDirContext';
-import { DefaultTheme } from './theming/DefaultTheme';
+import { LightTheme } from './theming/LightTheme';
 import type {
   DocumentTitleOptions,
   LinkingOptions,
@@ -30,8 +34,17 @@ import { type Thenable, useThenable } from './useThenable';
 
 declare global {
   var REACT_NAVIGATION_DEVTOOLS: WeakMap<
-    NavigationContainerRef<any>,
-    { readonly linking: LinkingOptions<any> }
+    object,
+    {
+      readonly linking: LinkingOptions<any>;
+      readonly listeners: Set<
+        (data: {
+          type: 'link';
+          url: string;
+          state: PartialState<NavigationState> | undefined;
+        }) => void
+      >;
+    }
   >;
 }
 
@@ -47,16 +60,17 @@ type Props<ParamList extends {}> = NavigationContainerProps & {
    */
   initialState?: NavigationContainerProps['initialState'];
   /**
-   * Text direction of the components. Defaults to `'ltr'`.
+   * Text direction of the components.
+   * Defaults to `I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'` on native and `'ltr'` on Web.
    */
-  direction?: LocaleDirection;
+  direction?: LocaleDirection | undefined;
   /**
    * Options for deep linking.
    *
    * Deep link handling is enabled when this prop is provided,
    * unless `linking.enabled` is `false`.
    */
-  linking?: LinkingOptions<ParamList>;
+  linking?: LinkingOptions<ParamList> | undefined;
   /**
    * Persistor object to persist and restore navigation state.
    *
@@ -68,57 +82,71 @@ type Props<ParamList extends {}> = NavigationContainerProps & {
    * ```ts
    * const persistor = {
    *   async persist(state) {
-   *     await AsyncStorage.setItem('state-key-v1', JSON.stringify(state));
+   *     if (state == null) {
+   *       await AsyncStorage.removeItem('state-key-v1');
+   *     } else {
+   *       await AsyncStorage.setItem('state-key-v1', state);
+   *     }
    *   },
    *   async restore() {
    *     const state = await AsyncStorage.getItem('state-key-v1');
    *
-   *     return state ? JSON.parse(state) : undefined;
+   *     return state ?? undefined;
    *   },
    * };
    *
    * <NavigationContainer persistor={persistor}>...</NavigationContainer>
    * ```
    */
-  persistor?: Persistor;
+  persistor?: Persistor | undefined;
   /**
    * Fallback element to render until initial state is resolved.
    * Used when deep link or persisted state is being restored asynchronously.
    *
    * Defaults to `null`.
    */
-  fallback?: React.ReactElement | null;
+  fallback?: React.ReactElement | null | undefined;
   /**
    * Options to configure the document title on Web.
    *
    * Updating document title is handled by default,
    * unless `documentTitle.enabled` is `false`.
    */
-  documentTitle?: DocumentTitleOptions;
+  documentTitle?: DocumentTitleOptions | undefined;
+  /**
+   * Ref object which refers to the navigation object containing helper methods.
+   */
+  ref?: React.Ref<NavigationContainerRef<ParamList>> | undefined;
 };
 
 const RESTORE_STATE_ERROR =
   'Failed to restore navigation state. The state will be initialized based on the navigation tree.';
 
-function NavigationContainerInner(
-  {
-    direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
-    theme = DefaultTheme,
-    linking,
-    persistor,
-    fallback = null,
-    documentTitle,
-    onStateChange,
-    ...rest
-  }: Props<ParamListBase>,
-  ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
-) {
-  if (linking?.config) {
-    validatePathConfig(linking.config);
-  }
+const PARSE_STATE_ERROR =
+  'Failed to parse the restored navigation state. The state will be initialized based on the navigation tree.';
+
+const PERSIST_STATE_ERROR = 'Failed to persist the navigation state.';
+
+const STRINGIFY_STATE_ERROR =
+  'Failed to stringify the navigation state. The state will not be persisted.';
 
-  const refContainer =
-    React.useRef<NavigationContainerRef<ParamListBase>>(null);
+/**
+ * Container component that manages the navigation state.
+ *
+ * This should be rendered at the root wrapping the whole app.
+ */
+export function NavigationContainer<ParamList extends {} = RootParamList>({
+  direction = DEFAULT_DIRECTION,
+  theme = LightTheme,
+  linking,
+  persistor,
+  fallback = null,
+  documentTitle,
+  onStateChange,
+  ref,
+  ...rest
+}: Props<ParamList>) {
+  const refContainer = React.useRef<NavigationContainerRef<ParamList>>(null);
 
   useBackButton(refContainer);
   useDocumentTitle(refContainer, documentTitle);
@@ -132,6 +160,10 @@ function NavigationContainerInner(
       };
     }
 
+    if (linking?.config) {
+      validatePathConfig(linking.config);
+    }
+
     return {
       options: {
         ...linking,
@@ -150,10 +182,16 @@ function NavigationContainerInner(
   // This will be used by the devtools
   React.useEffect(() => {
     if (refContainer.current) {
+      const previous = REACT_NAVIGATION_DEVTOOLS.get(refContainer.current);
+      const listeners = previous?.listeners ?? new Set();
+
       REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
         get linking() {
           return linkingConfig.options;
         },
+        get listeners() {
+          return listeners;
+        },
       });
     }
   });
@@ -166,11 +204,10 @@ function NavigationContainerInner(
     return getInitialState();
   });
 
-  const isPersistenceSupported =
-    Platform.OS === 'web' ? !linkingConfig.options.enabled : true;
+  const isPersistenceSupported = IS_NATIVE || !linkingConfig.options.enabled;
 
   const [isPersistedStateResolved, initialStateFromPersisted] = useThenable(
-    () => {
+    (): InitialState | undefined | Thenable<InitialState | undefined> => {
       if (
         isPersistenceSupported === false ||
         rest.initialState != null ||
@@ -179,42 +216,88 @@ function NavigationContainerInner(
         return undefined;
       }
 
-      let restoredState;
+      const parse = (
+        serializedState: string | undefined
+      ): InitialState | undefined => {
+        if (serializedState == null) {
+          return undefined;
+        }
+
+        try {
+          return persistor.parse
+            ? persistor.parse(serializedState)
+            : JSON.parse(serializedState);
+        } catch (e) {
+          console.error(PARSE_STATE_ERROR, e);
+
+          return undefined;
+        }
+      };
 
       try {
-        restoredState = persistor.restore();
+        const result = persistor.restore();
+
+        return result != null && typeof result === 'object' && 'then' in result
+          ? result.then(parse, (e) => {
+              console.error(RESTORE_STATE_ERROR, e);
+
+              return undefined;
+            })
+          : parse(result);
       } catch (e) {
         console.error(RESTORE_STATE_ERROR, e);
 
         return undefined;
       }
+    }
+  );
 
-      if (restoredState == null) {
-        return undefined;
-      }
+  const onPersistState = (state: Readonly<NavigationState> | undefined) => {
+    if (persistor == null) {
+      return;
+    }
 
-      if ('then' in restoredState) {
-        return restoredState.then(
-          (state) => state,
-          (error) => {
-            console.error(RESTORE_STATE_ERROR, error);
+    let serializedState: string | undefined;
 
-            return undefined;
-          }
-        );
+    try {
+      serializedState = persistor.stringify
+        ? persistor.stringify(state)
+        : JSON.stringify(state);
+    } catch (e) {
+      console.error(STRINGIFY_STATE_ERROR, e);
+
+      return;
+    }
+
+    try {
+      const value = persistor.persist(serializedState);
+
+      if (value != null && typeof value === 'object' && 'then' in value) {
+        // eslint-disable-next-line promise/catch-or-return
+        value.then(undefined, (e) => {
+          console.error(PERSIST_STATE_ERROR, e);
+        });
       }
+    } catch (e) {
+      console.error(PERSIST_STATE_ERROR, e);
+    }
+  };
 
-      const thenable: Thenable<InitialState | undefined> = {
-        then(onfulfilled) {
-          return Promise.resolve(
-            onfulfilled ? onfulfilled(restoredState) : restoredState
-          );
-        },
-      };
+  const onSerializableCheck = (
+    state: Readonly<NavigationState> | undefined
+  ) => {
+    if (process.env.NODE_ENV !== 'production' && state != null) {
+      const result = checkSerializable(state);
 
-      return thenable;
+      if (!result.serializable) {
+        const breadcrumb = getStateBreadcrumb(state, result.location);
+
+        const message = `Non-serializable values were found in the navigation state. Check:\n\n${breadcrumb} (${result.reason})\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`;
+
+        warnOnce(true, message);
+      }
     }
-  );
+  };
 
   // FIXME
   // @ts-expect-error not sure why this is not working
@@ -245,7 +328,8 @@ function NavigationContainerInner(
           }
           onStateChange={(state) => {
             onStateChange?.(state);
-            persistor?.persist(state);
+            onPersistState(state);
+            onSerializableCheck(state);
           }}
           ref={refContainer}
         />
@@ -253,16 +337,3 @@ function NavigationContainerInner(
     </LocaleDirContext.Provider>
   );
 }
-
-/**
- * Container component that manages the navigation state.
- *
- * This should be rendered at the root wrapping the whole app.
- */
-export const NavigationContainer = React.forwardRef(
-  NavigationContainerInner
-) as <ParamList extends {} = RootParamList>(
-  props: Props<ParamList> & {
-    ref?: React.Ref<NavigationContainerRef<ParamList>>;
-  }
-) => React.ReactElement;

package/src/__stubs__/createStackNavigator.tsx

@@ -1,11 +1,10 @@
 import {
   createNavigatorFactory,
   type DefaultNavigatorOptions,
-  type NavigationListBase,
+  type NavigatorTypeBagBase,
   type ParamListBase,
   type StackNavigationState,
   StackRouter,
-  type TypedNavigator,
   useNavigationBuilder,
 } from '@react-navigation/core';
 
@@ -18,27 +17,30 @@ const StackNavigator = (
     unknown
   >
 ) => {
-  const { state, descriptors, NavigationContent } = useNavigationBuilder(
+  const { state, descriptors, render } = useNavigationBuilder(
     StackRouter,
     props
   );
 
-  return (
-    <NavigationContent>
-      {descriptors[state.routes[state.index].key].render()}
-    </NavigationContent>
-  );
+  const route = state.routes[state.index];
+
+  if (route == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const descriptor = descriptors[route.key];
+
+  if (descriptor == null) {
+    throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+  }
+
+  return render(descriptor.render());
 };
 
-export function createStackNavigator<
-  ParamList extends ParamListBase,
->(): TypedNavigator<{
-  ParamList: ParamList;
-  State: StackNavigationState<ParamList>;
-  ScreenOptions: {};
-  EventMap: {};
-  NavigationList: NavigationListBase<ParamList>;
+interface StubStackTypeBag extends NavigatorTypeBagBase {
+  State: StackNavigationState<this['ParamList']>;
   Navigator: typeof StackNavigator;
-}> {
-  return createNavigatorFactory(StackNavigator)();
 }
+
+export const createStackNavigator =
+  createNavigatorFactory<StubStackTypeBag>(StackNavigator);

package/src/checkSerializable.tsx

@@ -0,0 +1,246 @@
+type Success = { serializable: true };
+
+type Failure = {
+  serializable: false;
+  location: (string | number)[];
+  reason: string;
+};
+
+type Result = Success | Failure;
+
+const SERIALIZABLE: Success = { serializable: true };
+
+const isPlainObject = (o: object): o is Record<string, unknown> => {
+  const prototype = Object.getPrototypeOf(o);
+
+  return (
+    prototype === null ||
+    prototype === Object.prototype ||
+    Object.getPrototypeOf(prototype) === null
+  );
+};
+
+const isSerializablePrimitive = (o: unknown) =>
+  typeof o === 'boolean' ||
+  typeof o === 'string' ||
+  (typeof o === 'number' && Number.isFinite(o) && !Object.is(o, -0));
+
+const checkValue = (o: unknown, ancestors: object[]): Failure | undefined => {
+  switch (typeof o) {
+    case 'boolean':
+    case 'string':
+      return undefined;
+
+    case 'number':
+      if (Number.isFinite(o) && !Object.is(o, -0)) {
+        return undefined;
+      }
+
+      return {
+        serializable: false,
+        location: [],
+        reason: Object.is(o, -0) ? 'Negative zero' : String(o),
+      };
+
+    case 'function':
+      return {
+        serializable: false,
+        location: [],
+        reason: 'Function',
+      };
+
+    case 'bigint':
+      return {
+        serializable: false,
+        location: [],
+        reason: 'BigInt',
+      };
+
+    case 'undefined':
+      return {
+        serializable: false,
+        location: [],
+        reason: 'Undefined',
+      };
+
+    case 'object':
+      if (o === null) {
+        return undefined;
+      }
+
+      break;
+
+    default:
+      return {
+        serializable: false,
+        location: [],
+        reason: String(o),
+      };
+  }
+
+  const isArray = Array.isArray(o);
+  const isPlainArray =
+    isArray &&
+    (Object.getPrototypeOf(o) === Array.prototype ||
+      Array.isArray(Object.getPrototypeOf(o)));
+
+  if ((isArray && !isPlainArray) || (!isArray && !isPlainObject(o))) {
+    const objectType = Object.prototype.toString.call(o).slice(8, -1);
+    let reason = objectType;
+
+    if (isArray) {
+      reason = 'Array subclass';
+    } else if (objectType === 'Object') {
+      reason = 'Object with a custom prototype';
+    }
+
+    return {
+      serializable: false,
+      location: [],
+      reason,
+    };
+  }
+
+  if (ancestors.includes(o)) {
+    return {
+      serializable: false,
+      reason: 'Circular reference',
+      location: [],
+    };
+  }
+
+  ancestors.push(o);
+
+  if (isArray) {
+    const keys = Object.keys(o);
+
+    const isClean =
+      keys.length === o.length &&
+      (o.length === 0 || keys[o.length - 1] === String(o.length - 1));
+
+    if (isClean) {
+      const symbols = Object.getOwnPropertySymbols(o);
+
+      if (symbols.length > 0) {
+        return {
+          serializable: false,
+          location: [String(symbols[0])],
+          reason: 'Extra array property',
+        };
+      }
+    } else {
+      const names = Object.getOwnPropertyNames(o);
+      const symbols = Object.getOwnPropertySymbols(o);
+
+      if (names.length + symbols.length > o.length + 1) {
+        for (const key of names) {
+          if (key === 'length') {
+            continue;
+          }
+
+          const index = Number(key);
+
+          if (
+            !Number.isInteger(index) ||
+            index < 0 ||
+            index >= o.length ||
+            String(index) !== key
+          ) {
+            return {
+              serializable: false,
+              location: [key],
+              reason: 'Extra array property',
+            };
+          }
+        }
+
+        if (symbols.length > 0) {
+          return {
+            serializable: false,
+            location: [String(symbols[0])],
+            reason: 'Extra array property',
+          };
+        }
+      }
+    }
+
+    for (let i = 0; i < o.length; i++) {
+      if (!isClean && !Object.hasOwn(o, i)) {
+        return {
+          serializable: false,
+          location: [i],
+          reason: 'Sparse array',
+        };
+      }
+
+      const value = o[i];
+
+      if (value === null || isSerializablePrimitive(value)) {
+        continue;
+      }
+
+      const childResult = checkValue(value, ancestors);
+
+      if (childResult) {
+        childResult.location.push(i);
+        return childResult;
+      }
+    }
+  } else {
+    const keys = Object.keys(o);
+    const names = Object.getOwnPropertyNames(o);
+
+    if (keys.length !== names.length) {
+      for (const key of names) {
+        if (!Object.prototype.propertyIsEnumerable.call(o, key)) {
+          return {
+            serializable: false,
+            location: [key],
+            reason: 'Non-enumerable property',
+          };
+        }
+      }
+    }
+
+    const symbols = Object.getOwnPropertySymbols(o);
+
+    if (symbols.length > 0) {
+      return {
+        serializable: false,
+        location: [String(symbols[0])],
+        reason: 'Symbol key',
+      };
+    }
+
+    for (const key of keys) {
+      const value = o[key];
+
+      if (value == null || isSerializablePrimitive(value)) {
+        continue;
+      }
+
+      const childResult = checkValue(value, ancestors);
+
+      if (childResult) {
+        childResult.location.push(key);
+        return childResult;
+      }
+    }
+  }
+
+  ancestors.pop();
+
+  return undefined;
+};
+
+export function checkSerializable(o: unknown): Result {
+  const result = checkValue(o, []);
+
+  if (!result) {
+    return SERIALIZABLE;
+  }
+
+  result.location.reverse();
+
+  return result;
+}

package/src/constants.native.tsx

@@ -0,0 +1,10 @@
+import { I18nManager } from 'react-native';
+
+import type { LocaleDirection } from './types';
+
+export const DEFAULT_DIRECTION: LocaleDirection = I18nManager.getConstants()
+  .isRTL
+  ? 'rtl'
+  : 'ltr';
+
+export const IS_NATIVE = true;

package/src/constants.tsx

@@ -0,0 +1,5 @@
+import type { LocaleDirection } from './types';
+
+export const DEFAULT_DIRECTION: LocaleDirection = 'ltr';
+
+export const IS_NATIVE = false;