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

package/src/native/types.tsx

@@ -1,5 +1,6 @@
 import type { ColorValue } from 'react-native';
 
+import type { LocaleDirection, SFSymbolNames } from '../types';
 import type { FONT_WEIGHTS } from './constants';
 import type { MaterialSymbolName } from './MaterialSymbolData';
 
@@ -15,12 +16,13 @@ export type MaterialSymbolOptions = {
    *
    * ```json
    * "react-navigation": {
-   *   "material-symbol": {
+   *   "material-symbols": {
    *     "fonts": [
    *       {
    *         "variant": "rounded",
-   *         "weight": 300,
-   *       },
+   *         "weights": [300],
+   *         "fills": [0, 1]
+   *       }
    *     ]
    *   }
    * }
@@ -30,7 +32,7 @@ export type MaterialSymbolOptions = {
    *
    * @default 'outlined'
    */
-  variant?: 'outlined' | 'rounded' | 'sharp';
+  variant?: 'outlined' | 'rounded' | 'sharp' | undefined;
   /**
    * The weight of the symbol.
    *
@@ -38,12 +40,13 @@ export type MaterialSymbolOptions = {
    *
    * ```json
    * "react-navigation": {
-   *   "material-symbol": {
+   *   "material-symbols": {
    *     "fonts": [
    *       {
    *         "variant": "rounded",
-   *         "weight": 300,
-   *       },
+   *         "weights": [300],
+   *         "fills": [0, 1]
+   *       }
    *     ]
    *   }
    * }
@@ -69,102 +72,349 @@ export type MaterialSymbolOptions = {
     | 400
     | 500
     | 600
-    | 700;
+    | 700
+    | undefined;
+  /**
+   * Whether to use the filled version of the symbol.
+   *
+   * Can be customized using `react-navigation` key in `package.json`:
+   *
+   * ```json
+   * "react-navigation": {
+   *   "material-symbols": {
+   *     "fonts": [
+   *       {
+   *         "variant": "rounded",
+   *         "weights": [300],
+   *         "fills": [0, 1]
+   *       }
+   *     ]
+   *   }
+   * }
+   * ```
+   *
+   * Here:
+   * - `0`: Unfilled version
+   * - `1`: Filled version
+   *
+   * Automatically set if a single fill is available.
+   *
+   * @default false
+   */
+  fill?: boolean | 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';
+export type MaterialSymbolImageSourceOptions = MaterialSymbolOptions & {
+  /**
+   * The layout direction to render the symbol for.
+   *
+   * Symbols that support auto-mirroring are flipped horizontally in RTL.
+   *
+   * @default I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
+   */
+  direction?: LocaleDirection | undefined;
+};
 
-export type SFSymbolMode =
+type SFSymbolScale = 'small' | 'medium' | 'large';
+
+type SFSymbolRenderingMode =
   | 'monochrome'
   | 'hierarchical'
   | 'palette'
   | 'multicolor';
 
-export type SFSymbolAnimationEffect =
+export type SFSymbolEffectName =
   | 'bounce'
   | 'pulse'
   | 'appear'
   | 'disappear'
   | 'variableColor'
+  | 'scale'
   | 'breathe'
   | 'wiggle'
-  | 'rotate';
+  | 'rotate'
+  | 'drawOn'
+  | 'drawOff';
+
+export type SFSymbolContentTransitionEffect = 'automatic' | 'replace';
+
+export type SFSymbolEffectRepeat =
+  | 'continuous'
+  | 'nonRepeating'
+  | {
+      /**
+       * Number of times to repeat the effect.
+       */
+      count?: number | undefined;
+      /**
+       * Delay in seconds between repeated effect cycles.
+       */
+      delay?: number | undefined;
+    };
+
+export type SFSymbolEffectScope = 'byLayer' | 'wholeSymbol' | 'individually';
+
+export type SFSymbolEffectDirection =
+  | 'up'
+  | 'down'
+  | 'left'
+  | 'right'
+  | 'forward'
+  | 'backward'
+  | 'clockwise'
+  | 'counterClockwise';
+
+export type SFSymbolBreatheVariant = 'plain' | 'pulse';
+
+export type SFSymbolDrawDirection = 'reversed' | 'nonReversed';
 
-export type SFSymbolAnimationConfig = {
+export type SFSymbolInactiveLayers = 'hide' | 'dim';
+
+type SFSymbolEffectBaseConfig = {
+  /**
+   * Speed multiplier for the effect.
+   *
+   * @default 1
+   */
+  speed?: number | undefined;
   /**
-   * The animation effect to apply.
+   * Repeat behavior for the effect. Use an object for periodic repeats.
    */
-  effect: SFSymbolAnimationEffect;
+  repeat?: SFSymbolEffectRepeat | undefined;
+};
+
+type SFSymbolScopedEffectConfig = SFSymbolEffectBaseConfig & {
   /**
-   * Whether the animation repeats continuously.
+   * Whether to animate the whole symbol at once or by layer.
    *
-   * @default false
+   * @default 'byLayer'
+   */
+  scope?: Extract<SFSymbolEffectScope, 'byLayer' | 'wholeSymbol'> | undefined;
+};
+
+type SFSymbolDirectionalEffectName = 'bounce' | 'appear' | 'disappear';
+
+type SFSymbolDirectionalEffectConfig = SFSymbolScopedEffectConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: SFSymbolDirectionalEffectName;
+  /**
+   * The direction the symbol moves during the effect.
+   */
+  direction?: 'up' | 'down' | undefined;
+};
+
+type SFSymbolScaleEffectConfig = SFSymbolScopedEffectConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'scale';
+  /**
+   * Whether the symbol scales up or down.
+   */
+  direction?: 'up' | 'down' | undefined;
+};
+
+type SFSymbolBasicScopedEffectConfig = SFSymbolScopedEffectConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'pulse';
+};
+
+type SFSymbolBreatheEffectConfig = SFSymbolScopedEffectConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'breathe';
+  /**
+   * The breathe effect variant.
+   */
+  variant?: SFSymbolBreatheVariant | undefined;
+};
+
+type SFSymbolWiggleEffectConfig = SFSymbolScopedEffectConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'wiggle';
+  /**
+   * The direction the symbol wiggles toward.
+   */
+  direction?: SFSymbolEffectDirection | undefined;
+  /**
+   * A custom wiggle angle in degrees. Overrides `direction` when set.
+   */
+  angle?: number | undefined;
+};
+
+type SFSymbolRotateEffectConfig = SFSymbolScopedEffectConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'rotate';
+  /**
+   * Which way the symbol rotates.
    */
-  repeating?: boolean;
+  direction?: 'clockwise' | 'counterClockwise' | undefined;
+};
+
+type SFSymbolDrawEffectConfig = SFSymbolEffectBaseConfig & {
   /**
-   * Number of times to repeat the animation.
-   * Ignored if `repeating` is `true`.
+   * The symbol effect to apply.
    */
-  repeatCount?: number;
+  type: 'drawOn';
   /**
-   * Speed multiplier for the animation.
+   * Whether to animate the whole symbol at once, by layer, or individually.
    *
-   * @default 1
+   * @default 'byLayer'
+   */
+  scope?: SFSymbolEffectScope | undefined;
+};
+
+type SFSymbolDrawOffEffectConfig = SFSymbolEffectBaseConfig & {
+  /**
+   * The symbol effect to apply.
    */
-  speed?: number;
+  type: 'drawOff';
   /**
-   * Whether to animate the whole symbol at once or layer by layer.
+   * Whether to animate the whole symbol at once, by layer, or individually.
    *
-   * @default false
+   * @default 'byLayer'
    */
-  wholeSymbol?: boolean;
+  scope?: SFSymbolEffectScope | undefined;
   /**
-   * Direction of the animation.
-   * Applicable to `bounce` and `wiggle`.
+   * Whether the draw-off animation follows the symbol's authored draw
+   * order or plays it in reverse.
+   * - `nonReversed`: follows the symbol's draw order.
+   * - `reversed`: plays it in reverse.
    */
-  direction?: 'up' | 'down';
+  drawDirection?: SFSymbolDrawDirection | undefined;
+};
+
+type SFSymbolVariableColorEffectConfig = SFSymbolEffectBaseConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'variableColor';
   /**
    * 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`.
+   * Whether layers light up cumulatively and stay active through the
+   * cycle, rather than one at a time.
    *
    * @default false
    */
-  cumulative?: boolean;
+  cumulative?: boolean | undefined;
+  /**
+   * How layers that aren't currently active are displayed.
+   * - `hide`: inactive layers are invisible.
+   * - `dim`: inactive layers stay visible but faded.
+   *
+   * Defaults to the symbol's standard appearance when unset.
+   */
+  inactiveLayers?: SFSymbolInactiveLayers | undefined;
 };
 
-export type SFSymbolAnimation =
-  | SFSymbolAnimationEffect
-  | SFSymbolAnimationConfig;
+type SFSymbolEffectConfig =
+  | SFSymbolDirectionalEffectConfig
+  | SFSymbolScaleEffectConfig
+  | SFSymbolBasicScopedEffectConfig
+  | SFSymbolBreatheEffectConfig
+  | SFSymbolWiggleEffectConfig
+  | SFSymbolRotateEffectConfig
+  | SFSymbolDrawEffectConfig
+  | SFSymbolDrawOffEffectConfig
+  | SFSymbolVariableColorEffectConfig;
+
+export type SFSymbolContentTransitionScope = 'byLayer' | 'wholeSymbol';
+
+export type SFSymbolReplaceTransitionVariant = 'downUp' | 'upUp' | 'offUp';
+
+type SFSymbolContentTransitionBaseConfig = {
+  /**
+   * Speed multiplier for the transition.
+   *
+   * @default 1
+   */
+  speed?: number | undefined;
+};
+
+type SFSymbolContentTransitionConfig =
+  | (SFSymbolContentTransitionBaseConfig & {
+      /**
+       * The transition effect to apply when the symbol `name` or `variableValue` changes.
+       */
+      type: 'automatic';
+    })
+  | (SFSymbolContentTransitionBaseConfig & {
+      /**
+       * The transition effect to apply when the symbol `name` or `variableValue` changes.
+       */
+      type: 'replace';
+      /**
+       * The direction the outgoing and incoming symbols move.
+       * - `downUp`: the old symbol slides down, the new one comes up.
+       * - `upUp`: both the old and new symbols move up.
+       * - `offUp`: the old symbol fades in place, the new one comes up.
+       */
+      variant?: SFSymbolReplaceTransitionVariant | undefined;
+      /**
+       * Whether to transition the whole symbol at once or by layer.
+       *
+       * @default 'byLayer'
+       */
+      scope?: SFSymbolContentTransitionScope | undefined;
+      /**
+       * Whether to prefer Magic Replace when possible.
+       *
+       * Falls back to regular Replace on iOS 17.
+       *
+       * @default false
+       */
+      magic?: boolean | undefined;
+    });
+
+type SFSymbolEffect = SFSymbolEffectName | SFSymbolEffectConfig;
+
+type SFSymbolContentTransition =
+  | SFSymbolContentTransitionEffect
+  | SFSymbolContentTransitionConfig;
+
+type SFSymbolVariableValueMode = 'automatic' | 'color' | 'draw';
+
+type SFSymbolColorRenderingMode = 'automatic' | 'flat' | 'gradient';
 
 export type SFSymbolOptions = {
   /**
    * The name of the SF Symbol to display.
    */
-  name: import('sf-symbols-typescript').SFSymbol;
+  name:
+    | import('sf-symbols-typescript').SFSymbol
+    | Extract<keyof SFSymbolNames, string>;
   /**
    * 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 +422,7 @@ export type SFSymbolOptions = {
    *
    * @default 'black'
    */
-  color?: ColorValue;
+  color?: ColorValue | undefined;
   /**
    * The weight of the symbol.
    *
@@ -180,13 +430,36 @@ 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.
+   * The symbol's scale variant (`small`, `medium`, or `large`).
    *
    * @default 'medium'
    */
-  scale?: SFSymbolScale;
+  scale?: SFSymbolScale | undefined;
+  /**
+   * The value used to customize variable symbols.
+   * Must be between `0` and `1`.
+   *
+   * Variable symbols (e.g. `wifi`, `speaker.wave.3`) have layers that
+   * activate progressively to represent a magnitude. This controls how
+   * many are shown: `0` renders the fewest, `1` the full symbol.
+   *
+   * Has no effect on symbols that aren't variable.
+   */
+  variableValue?: number | undefined;
+  /**
+   * How the partial state from `variableValue` is rendered.
+   * - `automatic`: the system chooses based on the symbol.
+   * - `color`: fades inactive layers using opacity.
+   * - `draw`: partially draws layers instead of fading them.
+   *
+   * Requires iOS 26+. Ignored on earlier versions.
+   *
+   * @default 'automatic'
+   */
+  variableValueMode?: SFSymbolVariableValueMode | undefined;
   /**
    * The rendering mode of the symbol.
    * - `monochrome`: Single color tint (default).
@@ -196,7 +469,7 @@ export type SFSymbolOptions = {
    *
    * @default 'monochrome'
    */
-  mode?: SFSymbolMode;
+  renderingMode?: SFSymbolRenderingMode | undefined;
   /**
    * The colors for non-monochrome rendering modes.
    * - `hierarchical`: uses `primary` as the base color.
@@ -205,14 +478,35 @@ 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.
+   * How color is applied across the symbol's layers.
+   * - `automatic`: the system chooses based on the symbol.
+   * - `flat`: a solid color per layer.
+   * - `gradient`: a gradient derived from each layer's color.
+   *
+   * Requires iOS 26+. Ignored on earlier versions.
+   *
+   * @default 'automatic'
+   */
+  colorRenderingMode?: SFSymbolColorRenderingMode | undefined;
+  /**
+   * The effect to apply to the symbol.
+   *
+   * Requires iOS 17+. Effects introduced in later iOS versions are ignored
+   * on earlier versions.
+   */
+  effect?: SFSymbolEffect | undefined;
+  /**
+   * The content transition to apply when the symbol `name` or `variableValue` changes.
+   *
    * Requires iOS 17+. Ignored on earlier versions.
    */
-  animation?: SFSymbolAnimation;
+  contentTransition?: SFSymbolContentTransition | undefined;
 };

package/src/{ServerContext.tsx → server/ServerContext.tsx}

@@ -1,10 +1,7 @@
 import * as React from 'react';
 
 export type ServerContextType = {
-  location?: {
-    pathname: string;
-    search: string;
-  };
+  location: URL;
 };
 
 export const ServerContext = React.createContext<ServerContextType | undefined>(

package/src/server/index.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { ServerContext } from './ServerContext';
+
+export type ServerContainerProps = {
+  location: URL;
+  children: React.ReactNode;
+};
+
+/**
+ * Provider for request-scoped server navigation state.
+ */
+export function ServerContainer({ location, children }: ServerContainerProps) {
+  const value = React.useMemo(() => ({ location }), [location]);
+
+  return (
+    <ServerContext.Provider value={value}>{children}</ServerContext.Provider>
+  );
+}

package/src/theming/DarkTheme.tsx

@@ -6,10 +6,10 @@ export const DarkTheme = {
   dark: true,
   colors: {
     primary: 'rgb(10, 132, 255)',
-    background: 'rgb(1, 1, 1)',
-    card: 'rgb(18, 18, 18)',
-    text: 'rgb(229, 229, 231)',
-    border: 'rgb(39, 39, 41)',
+    background: 'rgb(0, 0, 0)',
+    card: 'rgb(28, 28, 30)',
+    text: 'rgb(255, 255, 255)',
+    border: 'rgb(56, 56, 58)',
     notification: 'rgb(255, 69, 58)',
   },
   fonts,

package/src/theming/{DefaultTheme.tsx → LightTheme.tsx}

@@ -2,14 +2,14 @@ import type { Theme } from '@react-navigation/core';
 
 import { fonts } from './fonts';
 
-export const DefaultTheme = {
+export const LightTheme = {
   dark: false,
   colors: {
     primary: 'rgb(0, 122, 255)',
-    background: 'rgb(242, 242, 242)',
+    background: 'rgb(242, 242, 247)',
     card: 'rgb(255, 255, 255)',
-    text: 'rgb(28, 28, 30)',
-    border: 'rgb(178, 178, 178)',
+    text: 'rgb(0, 0, 0)',
+    border: 'rgb(198, 198, 200)',
     notification: 'rgb(255, 59, 48)',
   },
   fonts,

package/src/theming/MaterialFallbackTheme.tsx

@@ -0,0 +1,29 @@
+import type { Theme } from '@react-navigation/core';
+
+import { fonts } from './fonts';
+
+export const MaterialLightFallbackTheme = {
+  dark: false,
+  colors: {
+    primary: '#6750a4',
+    background: '#f3edf7',
+    card: '#fef7ff',
+    text: '#1d1b20',
+    border: '#cac4d0',
+    notification: '#ba1a1a',
+  },
+  fonts,
+} as const satisfies Theme;
+
+export const MaterialDarkFallbackTheme = {
+  dark: true,
+  colors: {
+    primary: '#d0bcff',
+    background: '#211f26',
+    card: '#141218',
+    text: '#e6e0e9',
+    border: '#49454f',
+    notification: '#ffb4ab',
+  },
+  fonts,
+} as const satisfies Theme;

package/src/theming/MaterialTheme.android.tsx

@@ -0,0 +1,45 @@
+import type { Theme } from '@react-navigation/core';
+import { Platform, PlatformColor } from 'react-native';
+
+import { fonts } from './fonts';
+import {
+  MaterialDarkFallbackTheme,
+  MaterialLightFallbackTheme,
+} from './MaterialFallbackTheme';
+
+const isDynamicThemeSupported =
+  Platform.OS === 'android' && Platform.Version >= 34;
+
+const MaterialLightDynamicTheme = {
+  dark: false,
+  colors: {
+    primary: PlatformColor('@android:color/system_primary_light'),
+    background: PlatformColor('@android:color/system_surface_container_light'),
+    card: PlatformColor('@android:color/system_background_light'),
+    text: PlatformColor('@android:color/system_on_surface_light'),
+    border: PlatformColor('@android:color/system_outline_variant_light'),
+    notification: PlatformColor('@android:color/system_error_light'),
+  },
+  fonts,
+} as const satisfies Theme;
+
+const MaterialDarkDynamicTheme = {
+  dark: true,
+  colors: {
+    primary: PlatformColor('@android:color/system_primary_dark'),
+    background: PlatformColor('@android:color/system_surface_container_dark'),
+    card: PlatformColor('@android:color/system_background_dark'),
+    text: PlatformColor('@android:color/system_on_surface_dark'),
+    border: PlatformColor('@android:color/system_outline_variant_dark'),
+    notification: PlatformColor('@android:color/system_error_dark'),
+  },
+  fonts,
+} as const satisfies Theme;
+
+export const MaterialLightTheme = isDynamicThemeSupported
+  ? MaterialLightDynamicTheme
+  : MaterialLightFallbackTheme;
+
+export const MaterialDarkTheme = isDynamicThemeSupported
+  ? MaterialDarkDynamicTheme
+  : MaterialDarkFallbackTheme;

package/src/theming/MaterialTheme.tsx

@@ -0,0 +1,4 @@
+export {
+  MaterialDarkFallbackTheme as MaterialDarkTheme,
+  MaterialLightFallbackTheme as MaterialLightTheme,
+} from './MaterialFallbackTheme';