@react-navigation/native 8.0.0-alpha.40 → 8.0.0-alpha.42

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/getStateBreadcrumb.tsx

@@ -0,0 +1,44 @@
+import type { NavigationState } from '@react-navigation/core';
+
+export function getStateBreadcrumb(
+  state: NavigationState,
+  location: (string | number)[]
+) {
+  let breadcrumb = '';
+  let pointer: Record<any, any> = state;
+  let params = false;
+
+  for (let i = 0; i < location.length; i++) {
+    const curr = location[i];
+    const prev = location[i - 1];
+
+    if (curr == null) {
+      continue;
+    }
+
+    pointer = pointer[curr];
+
+    if (!params && curr === 'state') {
+      continue;
+    } else if (!params && curr === 'routes') {
+      if (breadcrumb) {
+        breadcrumb += ' > ';
+      }
+    } else if (!params && typeof curr === 'number' && prev === 'routes') {
+      breadcrumb += pointer?.name;
+    } else if (!params) {
+      breadcrumb += ` > ${curr}`;
+      params = true;
+    } else {
+      if (typeof curr === 'number' || /^[0-9]+$/.test(curr)) {
+        breadcrumb += `[${curr}]`;
+      } else if (/^[a-z$_]+$/i.test(curr)) {
+        breadcrumb += `.${curr}`;
+      } else {
+        breadcrumb += `[${JSON.stringify(curr)}]`;
+      }
+    }
+  }
+
+  return breadcrumb;
+}

package/src/native/CornerInset.ios.tsx

@@ -17,7 +17,7 @@ export function CornerInset({ ref, ...rest }: Props) {
 
   const nativeRef =
     React.useRef<
-      React.ElementRef<typeof ReactNavigationCornerInsetViewNativeComponent>
+      React.ComponentRef<typeof ReactNavigationCornerInsetViewNativeComponent>
     >(null);
 
   const relayout = React.useCallback(() => {

package/src/native/CornerInset.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ViewProps } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 export type CornerInsetProps = {
   /**
@@ -17,7 +17,11 @@ export type CornerInsetProps = {
    * @default true
    */
   adaptive?: boolean;
-} & Omit<ViewProps, 'children'>;
+  /**
+   * Style object for the inset view.
+   */
+  style?: ViewStyle | undefined;
+};
 
 export type CornerInsetRef = {
   relayout(): void;

package/src/native/MaterialSymbol.android.tsx

@@ -2,7 +2,7 @@ import {
   type ImageSourcePropType,
   PixelRatio,
   processColor,
-  type ViewProps,
+  type ViewStyle,
 } from 'react-native';
 
 import { FONT_WEIGHTS } from './constants';
@@ -10,19 +10,25 @@ import MaterialSymbolViewNativeComponent from './MaterialSymbolViewNativeCompone
 import NativeMaterialSymbolModule from './NativeMaterialSymbolModule';
 import type { MaterialSymbolOptions } from './types';
 
-export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
+export type MaterialSymbolProps = MaterialSymbolOptions & {
+  /**
+   * Style object for the symbol.
+   */
+  style?: ViewStyle | undefined;
+};
 
 export function MaterialSymbol({
   name,
+  variant,
   weight,
   size = 24,
   color,
   style,
-  ...rest
 }: MaterialSymbolProps): React.ReactElement {
   return (
     <MaterialSymbolViewNativeComponent
       name={name}
+      variant={variant}
       weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
       size={size}
       color={color}
@@ -33,7 +39,6 @@ export function MaterialSymbol({
         },
         style,
       ]}
-      {...rest}
     />
   );
 }

package/src/native/MaterialSymbol.tsx

@@ -1,8 +1,13 @@
-import type { ImageSourcePropType, ViewProps } from 'react-native';
+import type { ImageSourcePropType, ViewStyle } from 'react-native';
 
 import type { MaterialSymbolOptions } from './types';
 
-export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
+export type MaterialSymbolProps = MaterialSymbolOptions & {
+  /**
+   * Style object for the symbol.
+   */
+  style?: ViewStyle | undefined;
+};
 
 export function MaterialSymbol(_: MaterialSymbolProps): React.ReactElement {
   throw new Error('MaterialSymbol is only supported on Android.');

package/src/native/MaterialSymbolData.tsx

@@ -1231,6 +1231,7 @@ export type MaterialSymbolName =
   | 'drone'
   | 'drone_2'
   | 'dropdown'
+  | 'dropdown_menu'
   | 'dropper_eye'
   | 'dry'
   | 'dry_cleaning'
@@ -1387,6 +1388,7 @@ export type MaterialSymbolName =
   | 'eyeglasses'
   | 'eyeglasses_2'
   | 'eyeglasses_2_sound'
+  | 'eyeglasses_3'
   | 'face'
   | 'face_2'
   | 'face_3'
@@ -1858,6 +1860,7 @@ export type MaterialSymbolName =
   | 'high_chair'
   | 'high_density'
   | 'high_quality'
+  | 'high_quality_off'
   | 'high_res'
   | 'highlight'
   | 'highlight_alt'
@@ -2015,6 +2018,7 @@ export type MaterialSymbolName =
   | 'japanese_curry'
   | 'japanese_flag'
   | 'javascript'
+  | 'jewelry'
   | 'join'
   | 'join_full'
   | 'join_inner'
@@ -3100,6 +3104,7 @@ export type MaterialSymbolName =
   | 'request_page'
   | 'request_quote'
   | 'reset_brightness'
+  | 'reset_colors'
   | 'reset_exposure'
   | 'reset_focus'
   | 'reset_image'
@@ -3234,8 +3239,10 @@ export type MaterialSymbolName =
   | 'seat_cool_right'
   | 'seat_heat_left'
   | 'seat_heat_right'
+  | 'seat_read'
   | 'seat_vent_left'
   | 'seat_vent_right'
+  | 'seat_window'
   | 'security'
   | 'security_key'
   | 'security_update'
@@ -3309,6 +3316,7 @@ export type MaterialSymbolName =
   | 'settings_photo_camera'
   | 'settings_power'
   | 'settings_remote'
+  | 'settings_screen'
   | 'settings_seating'
   | 'settings_slow_motion'
   | 'settings_suggest'
@@ -3377,6 +3385,7 @@ export type MaterialSymbolName =
   | 'side_navigation'
   | 'sign_language'
   | 'sign_language_2'
+  | 'sign_language_off'
   | 'signal_cellular_0_bar'
   | 'signal_cellular_1_bar'
   | 'signal_cellular_2_bar'
@@ -3410,6 +3419,7 @@ export type MaterialSymbolName =
   | 'sim_card_alert'
   | 'sim_card_download'
   | 'simulation'
+  | 'single_arrow'
   | 'single_bed'
   | 'sip'
   | 'siren'
@@ -3446,6 +3456,7 @@ export type MaterialSymbolName =
   | 'smoking_rooms'
   | 'sms'
   | 'sms_failed'
+  | 'snail'
   | 'snippet_folder'
   | 'snooze'
   | 'snowboarding'

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -2,7 +2,7 @@
 
 import {
   codegenNativeComponent,
-  CodegenTypes,
+  type CodegenTypes,
   type ColorValue,
   type ViewProps,
 } from 'react-native';

package/src/native/ReactNavigationCornerInsetViewNativeComponent.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   codegenNativeCommands,
   codegenNativeComponent,
-  CodegenTypes,
+  type CodegenTypes,
   type HostComponent,
   type ViewProps,
 } from 'react-native';
@@ -15,9 +15,7 @@ export interface NativeProps extends ViewProps {
 }
 
 interface NativeCommands {
-  // FIXME: codegen fails with ComponentRef
-  // so we currently use the deprecated ElementRef
-  relayout(viewRef: React.ElementRef<HostComponent<NativeProps>>): void;
+  relayout(viewRef: React.ComponentRef<HostComponent<NativeProps>>): void;
 }
 
 export const Commands = codegenNativeCommands<NativeCommands>({

package/src/native/SFSymbol.ios.tsx

@@ -1,4 +1,4 @@
-import type { ViewProps } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 import { FONT_WEIGHTS } from './constants';
 import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
@@ -16,7 +16,12 @@ import type {
   SFSymbolReplaceTransitionVariant,
 } from './types';
 
-export type SFSymbolProps = SFSymbolOptions & ViewProps;
+export type SFSymbolProps = SFSymbolOptions & {
+  /**
+   * Style object for the symbol.
+   */
+  style?: ViewStyle | undefined;
+};
 
 type NativeEffectConfig = {
   type: SFSymbolEffectName;
@@ -54,7 +59,6 @@ export function SFSymbol({
   effect,
   contentTransition,
   style,
-  ...rest
 }: SFSymbolProps): React.ReactElement {
   const effectConfig: NativeEffectConfig | undefined =
     typeof effect === 'string' ? { type: effect } : effect;
@@ -106,7 +110,6 @@ export function SFSymbol({
         },
         style,
       ]}
-      {...rest}
     />
   );
 }

package/src/native/SFSymbol.tsx

@@ -1,8 +1,13 @@
-import type { ViewProps } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 import type { SFSymbolOptions } from './types';
 
-export type SFSymbolProps = SFSymbolOptions & ViewProps;
+export type SFSymbolProps = SFSymbolOptions & {
+  /**
+   * Style object for the symbol.
+   */
+  style?: ViewStyle | undefined;
+};
 
 export function SFSymbol(_: SFSymbolProps): React.ReactElement {
   throw new Error('SFSymbol is only supported on iOS.');

package/src/native/SFSymbolViewNativeComponent.ts

@@ -2,7 +2,7 @@
 
 import {
   codegenNativeComponent,
-  CodegenTypes,
+  type CodegenTypes,
   type ColorValue,
   type ViewProps,
 } from 'react-native';

package/src/types.tsx

@@ -214,14 +214,23 @@ export type DocumentTitleOptions = {
 
 export type Persistor = {
   /**
-   * Callback to persist the navigation state.
+   * Callback to persist the serialized navigation state.
    */
-  persist(state: NavigationState | undefined): void;
+  persist: (state: string | undefined) => void | PromiseLike<void>;
   /**
-   * Callback to restore the navigation state.
-   * Should return the restored state or a Promise which resolves to the restored state.
+   * Callback to restore the serialized navigation state.
+   *
+   * Should return the serialized state or a Promise which resolves to the serialized state.
    *
    * If a Promise is returned, providing a `fallback` component is recommended.
    */
-  restore(): PromiseLike<InitialState | undefined> | InitialState | undefined;
+  restore: () => PromiseLike<string | undefined> | string | undefined;
+  /**
+   * Optional callback to serialize the navigation state.
+   */
+  stringify?: (state: NavigationState | undefined) => string | undefined;
+  /**
+   * Optional callback to parse the serialized navigation state.
+   */
+  parse?: (state: string | undefined) => InitialState | undefined;
 };

package/src/useLinkBuilder.tsx

@@ -1,11 +1,9 @@
 import {
   CommonActions,
-  findFocusedRoute,
   getActionFromState,
   getPathFromState,
+  IsScreenContext,
   NavigationContainerRefContext,
-  NavigationHelpersContext,
-  NavigationRouteContext,
   useStateForPath,
 } from '@react-navigation/core';
 import * as React from 'react';
@@ -27,8 +25,7 @@ type MinimalState = {
  * Helper to build a href for a screen based on the linking options.
  */
 export function useBuildHref() {
-  const navigation = React.use(NavigationHelpersContext);
-  const route = React.use(NavigationRouteContext);
+  const isScreen = React.use(IsScreenContext);
 
   const { options } = React.use(LinkingContext);
 
@@ -42,17 +39,6 @@ export function useBuildHref() {
         return undefined;
       }
 
-      // Check that we're inside:
-      // - navigator's context
-      // - route context of the navigator (could be a screen, tab, etc.)
-      // - route matches the state for path (from the screen's context)
-      // This ensures that we're inside a screen
-      const isScreen =
-        navigation && route?.key && focusedRouteState
-          ? route.key === findFocusedRoute(focusedRouteState)?.key &&
-            navigation.getState().routes.some((r) => r.key === route.key)
-          : false;
-
       const stateForRoute: MinimalState = {
         routes: [{ name, params }],
       };
@@ -96,8 +82,7 @@ export function useBuildHref() {
     [
       options?.enabled,
       options?.config,
-      route?.key,
-      navigation,
+      isScreen,
       focusedRouteState,
       getPathFromStateHelper,
     ]

package/src/useScrollToTop.tsx

@@ -18,7 +18,6 @@ type ScrollableView =
 
 type ScrollableWrapper =
   | { getScrollResponder(): React.ReactNode | ScrollView }
-  | { getNode(): ScrollableView }
   | ScrollableView
   | null;
 
@@ -39,12 +38,6 @@ function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
     // If the view is a wrapper like FlatList, SectionList etc.
     // We need to use `getScrollResponder` to get access to the scroll responder
     return ref.current.getScrollResponder();
-  } else if ('getNode' in ref.current) {
-    // When a `ScrollView` is wrapped in `Animated.createAnimatedComponent`
-    // we need to use `getNode` to get the ref to the actual scrollview.
-    // Note that `getNode` is deprecated in newer versions of react-native
-    // this is why we check if we already have a scrollable node above.
-    return ref.current.getNode();
   } else {
     return ref.current;
   }