@react-navigation/native 8.0.0-alpha.3 → 8.0.0-alpha.31

package/src/native/SFSymbol.ios.tsx

@@ -1,22 +1,104 @@
 import type { ViewProps } from 'react-native';
 
+import { FONT_WEIGHTS } from './constants';
 import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
-import type { SFSymbolOptions } from './types';
+import type {
+  SFSymbolBreatheVariant,
+  SFSymbolContentTransitionEffect,
+  SFSymbolContentTransitionScope,
+  SFSymbolDrawDirection,
+  SFSymbolEffectDirection,
+  SFSymbolEffectName,
+  SFSymbolEffectRepeat,
+  SFSymbolEffectScope,
+  SFSymbolInactiveLayers,
+  SFSymbolOptions,
+  SFSymbolReplaceTransitionVariant,
+} from './types';
 
 export type SFSymbolProps = SFSymbolOptions & ViewProps;
 
+type NativeEffectConfig = {
+  type: SFSymbolEffectName;
+  speed?: number | undefined;
+  repeat?: SFSymbolEffectRepeat | undefined;
+  scope?: SFSymbolEffectScope | undefined;
+  direction?: SFSymbolEffectDirection | undefined;
+  variant?: SFSymbolBreatheVariant | undefined;
+  angle?: number | undefined;
+  reversing?: boolean | undefined;
+  cumulative?: boolean | undefined;
+  inactiveLayers?: SFSymbolInactiveLayers | undefined;
+  drawDirection?: SFSymbolDrawDirection | undefined;
+};
+
+type NativeContentTransitionConfig = {
+  type: SFSymbolContentTransitionEffect;
+  speed?: number | undefined;
+  variant?: SFSymbolReplaceTransitionVariant | undefined;
+  scope?: SFSymbolContentTransitionScope | undefined;
+  magic?: boolean | undefined;
+};
+
 export function SFSymbol({
   name,
   size = 24,
-  color = 'black',
+  color,
+  weight,
+  scale = 'medium',
+  variableValue,
+  variableValueMode = 'automatic',
+  colorRenderingMode = 'automatic',
+  renderingMode = 'monochrome',
+  colors,
+  effect,
+  contentTransition,
   style,
   ...rest
 }: SFSymbolProps): React.ReactElement {
+  const effectConfig: NativeEffectConfig | undefined =
+    typeof effect === 'string' ? { type: effect } : effect;
+  const contentTransitionConfig: NativeContentTransitionConfig | undefined =
+    typeof contentTransition === 'string'
+      ? { type: contentTransition }
+      : contentTransition;
+
+  const repeat = effectConfig?.repeat;
+
   return (
     <SFSymbolViewNativeComponent
       name={name}
       size={size}
       color={color}
+      weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
+      scale={scale}
+      variableValue={variableValue ?? -1}
+      variableValueMode={variableValueMode}
+      colorRenderingMode={colorRenderingMode}
+      renderingMode={renderingMode}
+      colorPrimary={colors?.primary ?? color}
+      colorSecondary={colors?.secondary}
+      colorTertiary={colors?.tertiary}
+      effect={effectConfig?.type ?? ''}
+      effectRepeat={
+        typeof repeat === 'string' ? repeat : repeat ? 'periodic' : ''
+      }
+      effectRepeatCount={typeof repeat === 'object' ? (repeat.count ?? 0) : 0}
+      effectRepeatDelay={typeof repeat === 'object' ? (repeat.delay ?? 0) : 0}
+      effectSpeed={effectConfig?.speed ?? 1}
+      effectScope={effectConfig?.scope ?? ''}
+      effectDirection={effectConfig?.direction ?? ''}
+      effectVariant={effectConfig?.variant ?? ''}
+      effectAngle={effectConfig?.angle ?? -1}
+      effectReversing={effectConfig?.reversing ?? false}
+      effectCumulative={effectConfig?.cumulative ?? false}
+      effectInactiveLayers={effectConfig?.inactiveLayers ?? ''}
+      effectDrawDirection={effectConfig?.drawDirection ?? ''}
+      contentTransition={contentTransitionConfig?.type ?? ''}
+      contentTransitionSpeed={contentTransitionConfig?.speed ?? 1}
+      contentTransitionVariant={contentTransitionConfig?.variant ?? ''}
+      contentTransitionScope={contentTransitionConfig?.scope ?? ''}
+      contentTransitionMagic={contentTransitionConfig?.magic ?? false}
       style={[
         {
           width: size,

package/src/native/SFSymbolViewNativeComponent.ts

@@ -10,7 +10,34 @@ import {
 export interface NativeProps extends ViewProps {
   name: string;
   size: CodegenTypes.Float;
-  color: ColorValue;
+  color?: ColorValue;
+  weight: CodegenTypes.Int32;
+  scale: string;
+  variableValue: CodegenTypes.Float;
+  variableValueMode: string;
+  colorRenderingMode: string;
+  renderingMode: string;
+  colorPrimary?: ColorValue;
+  colorSecondary?: ColorValue;
+  colorTertiary?: ColorValue;
+  effect: string;
+  effectRepeat: string;
+  effectRepeatCount: CodegenTypes.Int32;
+  effectRepeatDelay: CodegenTypes.Float;
+  effectSpeed: CodegenTypes.Float;
+  effectScope: string;
+  effectDirection: string;
+  effectVariant: string;
+  effectAngle: CodegenTypes.Float;
+  effectReversing: boolean;
+  effectCumulative: boolean;
+  effectInactiveLayers: string;
+  effectDrawDirection: string;
+  contentTransition: string;
+  contentTransitionSpeed: CodegenTypes.Float;
+  contentTransitionVariant: string;
+  contentTransitionScope: string;
+  contentTransitionMagic: boolean;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/native/constants.tsx

@@ -0,0 +1,11 @@
+export const FONT_WEIGHTS = {
+  thin: 100,
+  ultralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900,
+} as const;

package/src/native/types.tsx

@@ -1,5 +1,6 @@
 import type { ColorValue } from 'react-native';
 
+import type { FONT_WEIGHTS } from './constants';
 import type { MaterialSymbolName } from './MaterialSymbolData';
 
 export type MaterialSymbolOptions = {
@@ -7,20 +8,358 @@ export type MaterialSymbolOptions = {
    * The name of the Material Symbol to display.
    */
   name: MaterialSymbolName;
+  /**
+   * The variant of the symbol.
+   *
+   * Can be customized using `react-navigation` key in `package.json`:
+   *
+   * ```json
+   * "react-navigation": {
+   *   "material-symbol": {
+   *     "fonts": [
+   *       {
+   *         "variant": "rounded",
+   *         "weight": 300,
+   *       },
+   *     ]
+   *   }
+   * }
+   * ```
+   *
+   * Automatically set if a single variant is available.
+   *
+   * @default 'outlined'
+   */
+  variant?: 'outlined' | 'rounded' | 'sharp' | undefined;
+  /**
+   * The weight of the symbol.
+   *
+   * Can be customized using `react-navigation` key in `package.json`:
+   *
+   * ```json
+   * "react-navigation": {
+   *   "material-symbol": {
+   *     "fonts": [
+   *       {
+   *         "variant": "rounded",
+   *         "weight": 300,
+   *       },
+   *     ]
+   *   }
+   * }
+   * ```
+   *
+   * Only numeric weights are supported in the configuration.
+   *
+   * Automatically set if a single weight is available.
+   *
+   * @default 400
+   */
+  weight?:
+    | 'thin'
+    | 'ultralight'
+    | 'light'
+    | 'regular'
+    | 'medium'
+    | 'semibold'
+    | 'bold'
+    | 100
+    | 200
+    | 300
+    | 400
+    | 500
+    | 600
+    | 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;
+};
+
+type SFSymbolScale = 'small' | 'medium' | 'large';
+
+type SFSymbolRenderingMode =
+  | 'monochrome'
+  | 'hierarchical'
+  | 'palette'
+  | 'multicolor';
+
+export type SFSymbolEffectName =
+  | 'bounce'
+  | 'pulse'
+  | 'appear'
+  | 'disappear'
+  | 'variableColor'
+  | 'scale'
+  | 'breathe'
+  | 'wiggle'
+  | '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 SFSymbolInactiveLayers = 'hide' | 'dim';
+
+type SFSymbolEffectBaseConfig = {
+  /**
+   * Speed multiplier for the effect.
+   *
+   * @default 1
+   */
+  speed?: number | undefined;
+  /**
+   * Repeat behavior for the effect. Use an object for periodic repeats.
+   */
+  repeat?: SFSymbolEffectRepeat | undefined;
+};
+
+type SFSymbolScopedEffectConfig = SFSymbolEffectBaseConfig & {
+  /**
+   * Whether to animate the whole symbol at once or by layer.
+   *
+   * @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.
+   */
+  direction?: 'clockwise' | 'counterClockwise' | undefined;
+};
+
+type SFSymbolDrawEffectConfig = SFSymbolEffectBaseConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'drawOn';
+  /**
+   * Whether to animate the whole symbol at once, by layer, or individually.
+   *
+   * @default 'byLayer'
+   */
+  scope?: SFSymbolEffectScope | undefined;
 };
 
+type SFSymbolDrawOffEffectConfig = SFSymbolEffectBaseConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'drawOff';
+  /**
+   * Whether to animate the whole symbol at once, by layer, or individually.
+   *
+   * @default 'byLayer'
+   */
+  scope?: SFSymbolEffectScope | undefined;
+  /**
+   * 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.
+   */
+  drawDirection?: SFSymbolDrawDirection | undefined;
+};
+
+type SFSymbolVariableColorEffectConfig = SFSymbolEffectBaseConfig & {
+  /**
+   * The symbol effect to apply.
+   */
+  type: 'variableColor';
+  /**
+   * Whether the variable color effect reverses with each cycle.
+   *
+   * @default false
+   */
+  reversing?: boolean | undefined;
+  /**
+   * Whether layers light up cumulatively and stay active through the
+   * cycle, rather than one at a time.
+   *
+   * @default false
+   */
+  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;
+};
+
+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.
@@ -28,12 +367,102 @@ export type SFSymbolOptions = {
   name: import('sf-symbols-typescript').SFSymbol;
   /**
    * 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
+   * `colors.primary` in hierarchical and palette modes.
+   *
    * @default 'black'
    */
-  color?: ColorValue;
+  color?: ColorValue | undefined;
+  /**
+   * The weight of the symbol.
+   *
+   * @default 'regular'
+   */
+  weight?:
+    | keyof typeof FONT_WEIGHTS
+    | (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS]
+    | undefined;
+  /**
+   * The symbol's scale variant (`small`, `medium`, or `large`).
+   *
+   * @default 'medium'
+   */
+  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).
+   * - `hierarchical`: Derived hierarchy from a single color.
+   * - `palette`: Explicit colors for each layer.
+   * - `multicolor`: Uses the symbol's built-in multicolor scheme.
+   *
+   * @default 'monochrome'
+   */
+  renderingMode?: SFSymbolRenderingMode | undefined;
+  /**
+   * The colors for non-monochrome rendering modes.
+   * - `hierarchical`: uses `primary` as the base color.
+   * - `palette`: uses `primary`, `secondary`, and `tertiary` for each layer.
+   * - `multicolor`: ignored.
+   *
+   * Falls back to `color` for `primary` if not specified.
+   */
+  colors?:
+    | {
+        primary?: ColorValue | undefined;
+        secondary?: ColorValue | undefined;
+        tertiary?: ColorValue | undefined;
+      }
+    | undefined;
+  /**
+   * 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.
+   */
+  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,