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

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;

package/src/createMemoryHistory.tsx

@@ -10,6 +10,8 @@ type HistoryRecord = {
   path: string;
 };
 
+const getPathWithoutHash = (path: string) => path.split('#')[0] ?? '';
+
 export function createMemoryHistory() {
   let index = 0;
   let items: HistoryRecord[] = [];
@@ -48,11 +50,17 @@ export function createMemoryHistory() {
     },
 
     backIndex({ path }: { path: string }) {
+      const pathWithoutHash = getPathWithoutHash(path);
+
       // We need to find the index from the element before current to get closest path to go back to
       for (let i = index - 1; i >= 0; i--) {
         const item = items[i];
 
-        if (item.path === path) {
+        if (item == null) {
+          continue;
+        }
+
+        if (item.path === pathWithoutHash) {
           return i;
         }
       }
@@ -64,12 +72,13 @@ export function createMemoryHistory() {
       interrupt();
 
       const id = nanoid();
+      const pathWithoutHash = getPathWithoutHash(path);
 
       // When a new entry is pushed, all the existing entries after index will be inaccessible
       // So we remove any existing entries after the current index to clean them up
       items = items.slice(0, index + 1);
 
-      items.push({ path, state, id });
+      items.push({ path: pathWithoutHash, state, id });
       index = items.length - 1;
 
       // We pass empty string for title because it's ignored in all browsers except safari
@@ -83,6 +92,7 @@ export function createMemoryHistory() {
       interrupt();
 
       const id = window.history.state?.id ?? nanoid();
+      const pathWithoutHash = getPathWithoutHash(path);
 
       // Need to keep the hash part of the path if there was no previous history entry
       // or the previous history entry had the same path
@@ -98,13 +108,16 @@ export function createMemoryHistory() {
         //   So we need to push the entry as there's nothing to replace
 
         pathWithHash = pathWithHash + hash;
-        items = [{ path: pathWithHash, state, id }];
+        items = [{ path: pathWithoutHash, state, id }];
         index = 0;
       } else {
-        if (items[index].path === path) {
+        const item = items[index];
+
+        if (item?.path === pathWithoutHash) {
           pathWithHash = pathWithHash + hash;
         }
-        items[index] = { path, state, id };
+
+        items[index] = { path: pathWithoutHash, state, id };
       }
 
       window.history.replaceState({ id }, '', pathWithHash);
@@ -138,6 +151,8 @@ export function createMemoryHistory() {
         return;
       }
 
+      const targetId = items[index]?.id;
+
       // When we call `history.go`, `popstate` will fire when there's history to go back to
       // So we need to somehow handle following cases:
       // - There's history to go back, `history.go` is called, and `popstate` fires
@@ -147,7 +162,11 @@ export function createMemoryHistory() {
         const done = (interrupted?: boolean) => {
           clearTimeout(timer);
 
-          if (interrupted) {
+          // The current entry may not be the one we intended to land on:
+          // - The traversal didn't happen yet, e.g. it took longer than the timeout
+          // - The user navigated in the browser while our traversal was in-flight
+          // So we treat it the same as the operation being interrupted
+          if (interrupted || window.history.state?.id !== targetId) {
             reject(new Error('History was changed during navigation.'));
             return;
           }
@@ -170,21 +189,24 @@ export function createMemoryHistory() {
 
         pending.push({ ref: done, cb: done });
 
-        // If navigation didn't happen within 100ms, assume that it won't happen
+        // If navigation didn't happen within 1000ms, assume that it won't happen
         // This may not be accurate, but hopefully it won't take so much time
         // In Chrome, navigation seems to happen instantly in next microtask
-        // But on Firefox, it seems to take much longer, around 50ms from our testing
+        // But on Firefox, the traversal can take much longer when the main thread
+        // is busy, e.g. it was measured to take up to ~900ms while rendering a new screen
         // We're using a hacky timeout since there doesn't seem to be way to know for sure
         const timer = setTimeout(() => {
+          window.removeEventListener('popstate', onPopState);
+
           const foundIndex = pending.findIndex((it) => it.ref === done);
 
           if (foundIndex > -1) {
-            pending[foundIndex].cb();
+            pending[foundIndex]?.cb();
             pending.splice(foundIndex, 1);
           }
 
           index = this.index;
-        }, 100);
+        }, 1000);
 
         const onPopState = () => {
           // Fix createMemoryHistory.index variable's value

package/src/createStandardNavigationFactories.tsx

@@ -0,0 +1,217 @@
+import {
+  CommonActions,
+  createNavigatorFactory,
+  createScreenFactory,
+  type DefaultRouterOptions,
+  type EventMapBase,
+  type NavigationAction,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type RouterFactory,
+  useNavigationBuilder,
+} from '@react-navigation/core';
+import * as React from 'react';
+import type {
+  createStandardNavigator,
+  NavigatorArgs as StandardNavigationArgs,
+} from 'standard-navigation';
+
+import { useBuildHref } from './useLinkBuilder';
+import { useMemoArray } from './useMemoArray';
+
+type StandardEventMap<EventMap extends EventMapBase> = {
+  [EventName in keyof EventMap]: {
+    data: EventMap[EventName] extends { data?: infer Data }
+      ? Data extends object | undefined
+        ? Data
+        : object | undefined
+      : undefined;
+    canPreventDefault: EventMap[EventName] extends { canPreventDefault: true }
+      ? true
+      : false;
+  };
+};
+
+export interface StandardNavigationTypeBagBase extends NavigatorTypeBagBase {
+  RouterOptions: DefaultRouterOptions;
+  Navigator: React.ComponentType<{}>;
+}
+
+type StandardNavigationTypeBagFor<
+  TypeBag extends StandardNavigationTypeBagBase,
+  ParamList extends ParamListBase,
+> = TypeBag & { ParamList: ParamList };
+
+type StandardNavigationListFor<
+  TypeBag extends StandardNavigationTypeBagBase,
+  ParamList extends ParamListBase,
+> = StandardNavigationTypeBagFor<TypeBag, ParamList>['NavigationList'];
+
+type StandardNavigationMapperProps<
+  TypeBag extends StandardNavigationTypeBagBase,
+> = {
+  state: StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'];
+  navigation: StandardNavigationListFor<
+    TypeBag,
+    ParamListBase
+  >[keyof StandardNavigationListFor<TypeBag, ParamListBase>];
+};
+
+export function createStandardNavigationFactories<
+  TypeBag extends StandardNavigationTypeBagBase,
+  NavigatorProps extends object = {},
+  MapperProps extends object = {},
+>(
+  navigator: ReturnType<
+    typeof createStandardNavigator<
+      TypeBag['ScreenOptions'],
+      StandardEventMap<TypeBag['EventMap']>,
+      NavigatorProps & MapperProps
+    >
+  >,
+  router: RouterFactory<
+    StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'],
+    NavigationAction,
+    TypeBag['RouterOptions']
+  >,
+  mapper?: (props: StandardNavigationMapperProps<TypeBag>) => MapperProps
+) {
+  const { type, version, NavigatorContent } = navigator;
+
+  if (type !== 'standard') {
+    throw new Error(
+      `createStandardNavigationFactories only works with standard navigator objects, but got navigator of ${typeof type === 'string' ? `type "${type}".` : 'unknown type.'}`
+    );
+  }
+
+  if (version !== 1) {
+    throw new Error(
+      `createStandardNavigationFactories only works with version 1 of standard navigator objects, but got version ${version}.`
+    );
+  }
+
+  type StandardArgs = StandardNavigationArgs<
+    TypeBag['ScreenOptions'],
+    StandardEventMap<TypeBag['EventMap']>
+  >;
+
+  function StandardNavigationNavigator(props: any) {
+    const builder = useNavigationBuilder<
+      TypeBag['State'],
+      TypeBag['RouterOptions'],
+      TypeBag['ActionHelpers'],
+      TypeBag['ScreenOptions'],
+      TypeBag['EventMap']
+    >(router, props);
+
+    const buildHref = useBuildHref();
+
+    const routes = useMemoArray(
+      builder.state.routes.map((route) => {
+        const href = buildHref(route.name, route.params);
+
+        return [
+          {
+            key: route.key,
+            name: route.name,
+            params: route.params,
+            href,
+          },
+          [route.key, route.name, route.params, href],
+        ];
+      })
+    );
+
+    const state = React.useMemo(
+      (): StandardArgs['state'] => ({
+        index: builder.state.index,
+        routes,
+      }),
+      [builder.state.index, routes]
+    );
+
+    const descriptors: StandardArgs['descriptors'] = {};
+
+    for (const route of state.routes) {
+      const descriptor = builder.descriptors[route.key];
+
+      if (descriptor == null) {
+        throw new Error(
+          `No descriptor found for route "${route.name}" (${route.key}).`
+        );
+      }
+
+      descriptors[route.key] = {
+        options: descriptor.options,
+        render: descriptor.render,
+      };
+    }
+
+    const actions = React.useMemo<StandardArgs['actions']>(
+      () => ({
+        navigate(name, params) {
+          builder.navigation.dispatch({
+            ...CommonActions.navigate(name, params),
+            target: builder.state.key,
+          });
+        },
+        back() {
+          builder.navigation.goBack();
+        },
+      }),
+      [builder.navigation, builder.state.key]
+    );
+
+    const emitter = React.useMemo<StandardArgs['emitter']>(
+      () => ({
+        // @ts-expect-error - they are compatible
+        emit: builder.navigation.emit,
+      }),
+      [builder.navigation]
+    );
+
+    const mapped = mapper?.({
+      state: builder.state as TypeBag['State'],
+      navigation: builder.navigation as never,
+    });
+
+    // Omit props used by useNavigationBuilder and routers internally
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      children,
+      initialRouteName,
+      layout,
+      routeNamesChangeBehavior,
+      router: routerOverride,
+      screenLayout,
+      screenListeners,
+      screenOptions,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = props;
+
+    return builder.render(
+      <NavigatorContent
+        {...(rest as NavigatorProps & MapperProps)}
+        {...mapped}
+        state={state}
+        descriptors={descriptors}
+        actions={actions}
+        emitter={emitter}
+      />
+    );
+  }
+
+  const createNavigator = createNavigatorFactory<
+    TypeBag & {
+      Navigator: React.ComponentType<NavigatorProps>;
+    }
+  >(StandardNavigationNavigator);
+
+  const createScreen = createScreenFactory<TypeBag>();
+
+  return {
+    createNavigator,
+    createScreen,
+  };
+}

package/src/createStaticNavigation.tsx

@@ -1,8 +1,6 @@
 import {
-  createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
-  type NavigationContainerRef,
-  type ParamListBase,
+  type RootParamList,
   type StaticNavigation,
 } from '@react-navigation/core';
 import * as React from 'react';
@@ -10,31 +8,32 @@ import * as React from 'react';
 import { NavigationContainer } from './NavigationContainer';
 import type { LinkingOptions } from './types';
 
-type Props = Omit<
-  React.ComponentProps<typeof NavigationContainer>,
+type Props<ParamList extends {}> = Omit<
+  React.ComponentProps<typeof NavigationContainer<ParamList>>,
   'linking' | 'children'
 > & {
   /**
    * Options for deep linking.
    */
-  linking?: Omit<LinkingOptions<ParamListBase>, 'config' | 'enabled'> & {
-    /**
-     * Whether deep link handling should be enabled.
-     * Defaults to `auto`.
-     *
-     * When set to 'auto', all leaf screens will get autogenerated paths.
-     * The generated paths will be kebab-case versions of the screen names.
-     * This can be overridden for specific screens by specifying `linking` for the screen.
-     */
-    enabled?: 'auto' | true | false;
-    /**
-     * Additional configuration
-     */
-    config?: Omit<
-      NonNullable<LinkingOptions<ParamListBase>['config']>,
-      'screens'
-    >;
-  };
+  linking?:
+    | (Omit<LinkingOptions<ParamList>, 'config' | 'enabled'> & {
+        /**
+         * Whether deep link handling should be enabled.
+         * Defaults to `auto`.
+         *
+         * When set to 'auto', all leaf screens will get autogenerated paths.
+         * The generated paths will be kebab-case versions of the screen names.
+         * This can be overridden for specific screens by specifying `linking` for the screen.
+         */
+        enabled?: 'auto' | true | false | undefined;
+        /**
+         * Additional configuration
+         */
+        config?:
+          | Omit<NonNullable<LinkingOptions<ParamList>['config']>, 'screens'>
+          | undefined;
+      })
+    | undefined;
 };
 
 /**
@@ -44,13 +43,15 @@ type Props = Omit<
  * @param tree Static navigation config.
  * @returns Navigation component to use in your app.
  */
-export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
-  const Component = createComponentForStaticNavigation(tree, 'RootNavigator');
+export function createStaticNavigation(tree: StaticNavigation<any>) {
+  const Component = tree.getComponent();
+  const element = <Component />;
 
-  function Navigation(
-    { linking, ...rest }: Props,
-    ref: React.Ref<NavigationContainerRef<ParamListBase>>
-  ) {
+  function Navigation<ParamList extends {} = RootParamList>({
+    linking,
+    ref,
+    ...rest
+  }: Props<ParamList>) {
     const linkingConfig = React.useMemo(() => {
       const screens = createPathConfigForStaticNavigation(
         tree,
@@ -96,10 +97,10 @@ export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
 
     return (
       <NavigationContainer {...rest} ref={ref} linking={memoizedLinking}>
-        <Component />
+        {element}
       </NavigationContainer>
     );
   }
 
-  return React.forwardRef(Navigation);
+  return Navigation;
 }