@react-navigation/native 8.0.0-alpha.11 → 8.0.0-alpha.12

package/src/native/types.tsx

@@ -30,7 +30,7 @@ export type MaterialSymbolOptions = {
    *
    * @default 'outlined'
    */
-  variant?: 'outlined' | 'rounded' | 'sharp';
+  variant?: 'outlined' | 'rounded' | 'sharp' | undefined;
   /**
    * The weight of the symbol.
    *
@@ -69,19 +69,20 @@ export type MaterialSymbolOptions = {
     | 400
     | 500
     | 600
-    | 700;
+    | 700
+    | undefined;
   /**
    * The size of the symbol.
    *
    * @default 24
    */
-  size?: number;
+  size?: number | undefined;
   /**
    * The color of the symbol.
    *
    * @default 'black'
    */
-  color?: ColorValue;
+  color?: ColorValue | undefined;
 };
 
 export type SFSymbolScale = 'small' | 'medium' | 'large';
@@ -112,43 +113,43 @@ export type SFSymbolAnimationConfig = {
    *
    * @default false
    */
-  repeating?: boolean;
+  repeating?: boolean | undefined;
   /**
    * Number of times to repeat the animation.
    * Ignored if `repeating` is `true`.
    */
-  repeatCount?: number;
+  repeatCount?: number | undefined;
   /**
    * Speed multiplier for the animation.
    *
    * @default 1
    */
-  speed?: number;
+  speed?: number | undefined;
   /**
    * Whether to animate the whole symbol at once or layer by layer.
    *
    * @default false
    */
-  wholeSymbol?: boolean;
+  wholeSymbol?: boolean | undefined;
   /**
    * Direction of the animation.
    * Applicable to `bounce` and `wiggle`.
    */
-  direction?: 'up' | 'down';
+  direction?: 'up' | 'down' | undefined;
   /**
    * Whether the variable color effect reverses with each cycle.
    * Only applicable to `variableColor`.
    *
    * @default false
    */
-  reversing?: boolean;
+  reversing?: boolean | undefined;
   /**
    * Whether each layer remains changed until the end of the cycle.
    * Only applicable to `variableColor`.
    *
    * @default false
    */
-  cumulative?: boolean;
+  cumulative?: boolean | undefined;
 };
 
 export type SFSymbolAnimation =
@@ -164,7 +165,7 @@ export type SFSymbolOptions = {
    * The size of the symbol.
    * @default 24
    */
-  size?: number;
+  size?: number | undefined;
   /**
    * The color of the symbol.
    * Used as the tint color in monochrome mode, and as the fallback for
@@ -172,7 +173,7 @@ export type SFSymbolOptions = {
    *
    * @default 'black'
    */
-  color?: ColorValue;
+  color?: ColorValue | undefined;
   /**
    * The weight of the symbol.
    *
@@ -180,13 +181,14 @@ export type SFSymbolOptions = {
    */
   weight?:
     | keyof typeof FONT_WEIGHTS
-    | (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS];
+    | (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS]
+    | undefined;
   /**
    * The scale of the symbol relative to the font size.
    *
    * @default 'medium'
    */
-  scale?: SFSymbolScale;
+  scale?: SFSymbolScale | undefined;
   /**
    * The rendering mode of the symbol.
    * - `monochrome`: Single color tint (default).
@@ -196,7 +198,7 @@ export type SFSymbolOptions = {
    *
    * @default 'monochrome'
    */
-  mode?: SFSymbolMode;
+  mode?: SFSymbolMode | undefined;
   /**
    * The colors for non-monochrome rendering modes.
    * - `hierarchical`: uses `primary` as the base color.
@@ -205,14 +207,16 @@ export type SFSymbolOptions = {
    *
    * Falls back to `color` for `primary` if not specified.
    */
-  colors?: {
-    primary?: ColorValue;
-    secondary?: ColorValue;
-    tertiary?: ColorValue;
-  };
+  colors?:
+    | {
+        primary?: ColorValue | undefined;
+        secondary?: ColorValue | undefined;
+        tertiary?: ColorValue | undefined;
+      }
+    | undefined;
   /**
    * The animation effect to apply to the symbol.
    * Requires iOS 17+. Ignored on earlier versions.
    */
-  animation?: SFSymbolAnimation;
+  animation?: SFSymbolAnimation | undefined;
 };

package/src/types.tsx

@@ -68,7 +68,7 @@ export type LinkingOptions<ParamList extends {}> = {
    *
    * Defaults to `true` when a linking config is specified.
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * The prefixes to match to determine whether to handle a URL.
    *
@@ -96,7 +96,7 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  prefixes?: LinkingPrefix[];
+  prefixes?: LinkingPrefix[] | undefined;
   /**
    * Optional function which takes an incoming URL returns a boolean
    * indicating whether React Navigation should handle it.
@@ -114,7 +114,7 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  filter?: (url: string) => boolean;
+  filter?: ((url: string) => boolean) | undefined;
   /**
    * Config to fine-tune how to parse the path.
    *
@@ -128,23 +128,25 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  config?: {
-    /**
-     * Path string to match against for the whole navigation tree.
-     * It's not possible to specify params here since this doesn't belong to a screen.
-     * This is useful when the whole app is under a specific path.
-     * e.g. all of the screens are under `/admin` in `https://example.com/admin`
-     */
-    path?: string;
-    /**
-     * Path configuration for child screens.
-     */
-    screens: PathConfigMap<ParamList>;
-    /**
-     * Name of the initial route to use for the root navigator.
-     */
-    initialRouteName?: keyof ParamList;
-  };
+  config?:
+    | {
+        /**
+         * Path string to match against for the whole navigation tree.
+         * It's not possible to specify params here since this doesn't belong to a screen.
+         * This is useful when the whole app is under a specific path.
+         * e.g. all of the screens are under `/admin` in `https://example.com/admin`
+         */
+        path?: string | undefined;
+        /**
+         * Path configuration for child screens.
+         */
+        screens: PathConfigMap<ParamList>;
+        /**
+         * Name of the initial route to use for the root navigator.
+         */
+        initialRouteName?: keyof ParamList | undefined;
+      }
+    | undefined;
   /**
    * Custom function to get the initial URL used for linking.
    * Uses `Linking.getInitialURL()` by default.
@@ -158,11 +160,9 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  getInitialURL?: () =>
-    | string
-    | null
-    | undefined
-    | Promise<string | null | undefined>;
+  getInitialURL?:
+    | (() => string | null | undefined | Promise<string | null | undefined>)
+    | undefined;
   /**
    * Custom function to get subscribe to URL updates.
    * Uses `Linking.addEventListener('url', callback)` by default.
@@ -184,30 +184,32 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  subscribe?: (
-    listener: (url: string) => void
-  ) => undefined | void | (() => void);
+  subscribe?:
+    | ((listener: (url: string) => void) => undefined | void | (() => void))
+    | undefined;
   /**
    * Custom function to parse the URL to a valid navigation state (advanced).
    */
-  getStateFromPath?: typeof getStateFromPathDefault;
+  getStateFromPath?: typeof getStateFromPathDefault | undefined;
   /**
    * Custom function to convert the state object to a valid URL (advanced).
    * Only applicable on Web.
    */
-  getPathFromState?: typeof getPathFromStateDefault;
+  getPathFromState?: typeof getPathFromStateDefault | undefined;
   /**
    * Custom function to convert the state object to a valid action (advanced).
    */
-  getActionFromState?: typeof getActionFromStateDefault;
+  getActionFromState?: typeof getActionFromStateDefault | undefined;
 };
 
 export type DocumentTitleOptions = {
-  enabled?: boolean;
-  formatter?: (
-    options: Record<string, any> | undefined,
-    route: Route<string> | undefined
-  ) => string;
+  enabled?: boolean | undefined;
+  formatter?:
+    | ((
+        options: Record<string, any> | undefined,
+        route: Route<string> | undefined
+      ) => string)
+    | undefined;
 };
 
 export type Persistor = {

package/src/useLinkBuilder.tsx

@@ -13,7 +13,13 @@ import { getStateFromHref } from './getStateFromHref';
 import { LinkingContext } from './LinkingContext';
 
 type MinimalState = {
-  routes: [{ name: string; params?: object; state?: MinimalState }];
+  routes: [
+    {
+      name: string;
+      params?: object | undefined;
+      state?: MinimalState | undefined;
+    },
+  ];
 };
 
 /**

package/src/useLinkProps.tsx

@@ -3,11 +3,8 @@ import {
   type NavigationAction,
   NavigationContainerRefContext,
   NavigationHelpersContext,
-  type NavigatorScreenParams,
-  type ParamListBase,
   type RootParamList,
 } from '@react-navigation/core';
-import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as React from 'react';
 import { type GestureResponderEvent, Platform } from 'react-native';
 
@@ -32,35 +29,6 @@ export type LinkProps<
       params?: undefined;
     };
 
-const getStateFromParams = (
-  params: NavigatorScreenParams<ParamListBase> | undefined
-): PartialState<NavigationState> | NavigationState | undefined => {
-  if (params?.state) {
-    return params.state;
-  }
-
-  if (params?.screen) {
-    return {
-      routes: [
-        {
-          name: params.screen,
-          params: params.params,
-          // @ts-expect-error this is fine 🔥
-          state: params.screen
-            ? getStateFromParams(
-                params.params as
-                  | NavigatorScreenParams<ParamListBase>
-                  | undefined
-              )
-            : undefined,
-        },
-      ],
-    };
-  }
-
-  return undefined;
-};
-
 /**
  * Hook to get props for an anchor tag so it can work with in page navigation.
  *
@@ -162,17 +130,16 @@ export function useLinkProps<
   return {
     href:
       href ??
-      (Platform.OS === 'web' && screen != null
+      (Platform.OS === 'web' && typeof screen === 'string'
         ? getPathFromStateHelper(
             {
               routes: [
                 {
-                  // @ts-expect-error this is fine 🔥
                   name: screen,
-                  // @ts-expect-error this is fine 🔥
-                  params: params,
-                  // @ts-expect-error this is fine 🔥
-                  state: getStateFromParams(params),
+                  params:
+                    typeof params === 'object' && params != null
+                      ? params
+                      : undefined,
                 },
               ],
             },