@react-navigation/native 8.0.0-alpha.0 → 8.0.0-alpha.10

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -0,0 +1,23 @@
+/* eslint-disable import-x/no-default-export */
+
+import {
+  codegenNativeComponent,
+  CodegenTypes,
+  type ColorValue,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  name: string;
+  variant?: string;
+  weight?: CodegenTypes.WithDefault<
+    0 | 100 | 200 | 300 | 400 | 500 | 600 | 700,
+    0
+  >;
+  size: CodegenTypes.Float;
+  color?: ColorValue;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNavigationMaterialSymbolView'
+);

package/src/native/NativeMaterialSymbolModule.ts

@@ -0,0 +1,19 @@
+/* eslint-disable import-x/no-default-export */
+
+import { type TurboModule, TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  getImageSource(
+    name: string,
+    variant: string | undefined,
+    weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | undefined,
+    size: number,
+    // Codegen requires using `Object` instead of `object
+    // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+    color: Object
+  ): string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'ReactNavigationMaterialSymbolModule'
+);

package/src/native/SFSymbol.ios.tsx

@@ -0,0 +1,53 @@
+import type { ViewProps } from 'react-native';
+
+import { FONT_WEIGHTS } from './constants';
+import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
+import type { SFSymbolOptions } from './types';
+
+export type SFSymbolProps = SFSymbolOptions & ViewProps;
+
+export function SFSymbol({
+  name,
+  size = 24,
+  color,
+  weight,
+  scale = 'medium',
+  mode = 'monochrome',
+  colors,
+  animation,
+  style,
+  ...rest
+}: SFSymbolProps): React.ReactElement {
+  const animConfig =
+    typeof animation === 'string' ? { effect: animation } : animation;
+
+  return (
+    <SFSymbolViewNativeComponent
+      name={name}
+      size={size}
+      color={color}
+      weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
+      scale={scale}
+      mode={mode}
+      colorPrimary={colors?.primary ?? color}
+      colorSecondary={colors?.secondary}
+      colorTertiary={colors?.tertiary}
+      animation={animConfig?.effect ?? ''}
+      animationRepeating={animConfig?.repeating ?? false}
+      animationRepeatCount={animConfig?.repeatCount ?? 0}
+      animationSpeed={animConfig?.speed ?? 1}
+      animationWholeSymbol={animConfig?.wholeSymbol ?? false}
+      animationDirection={animConfig?.direction ?? ''}
+      animationReversing={animConfig?.reversing ?? false}
+      animationCumulative={animConfig?.cumulative ?? false}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}

package/src/native/SFSymbol.tsx

@@ -0,0 +1,9 @@
+import type { ViewProps } from 'react-native';
+
+import type { SFSymbolOptions } from './types';
+
+export type SFSymbolProps = SFSymbolOptions & ViewProps;
+
+export function SFSymbol(_: SFSymbolProps): React.ReactElement {
+  throw new Error('SFSymbol is only supported on iOS.');
+}

package/src/native/SFSymbolViewNativeComponent.ts

@@ -0,0 +1,32 @@
+/* eslint-disable import-x/no-default-export */
+
+import {
+  codegenNativeComponent,
+  CodegenTypes,
+  type ColorValue,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  name: string;
+  size: CodegenTypes.Float;
+  color?: ColorValue;
+  weight: CodegenTypes.Int32;
+  scale: string;
+  mode: string;
+  colorPrimary?: ColorValue;
+  colorSecondary?: ColorValue;
+  colorTertiary?: ColorValue;
+  animation: string;
+  animationRepeating: boolean;
+  animationRepeatCount: CodegenTypes.Int32;
+  animationSpeed: CodegenTypes.Float;
+  animationWholeSymbol: boolean;
+  animationDirection: string;
+  animationReversing: boolean;
+  animationCumulative: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNavigationSFSymbolView'
+);

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

@@ -0,0 +1,218 @@
+import type { ColorValue } from 'react-native';
+
+import type { FONT_WEIGHTS } from './constants';
+import type { MaterialSymbolName } from './MaterialSymbolData';
+
+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';
+  /**
+   * 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;
+  /**
+   * The size of the symbol.
+   *
+   * @default 24
+   */
+  size?: number;
+  /**
+   * The color of the symbol.
+   *
+   * @default 'black'
+   */
+  color?: ColorValue;
+};
+
+export type SFSymbolScale = 'small' | 'medium' | 'large';
+
+export type SFSymbolMode =
+  | 'monochrome'
+  | 'hierarchical'
+  | 'palette'
+  | 'multicolor';
+
+export type SFSymbolAnimationEffect =
+  | 'bounce'
+  | 'pulse'
+  | 'appear'
+  | 'disappear'
+  | 'variableColor'
+  | 'breathe'
+  | 'wiggle'
+  | 'rotate';
+
+export type SFSymbolAnimationConfig = {
+  /**
+   * The animation effect to apply.
+   */
+  effect: SFSymbolAnimationEffect;
+  /**
+   * Whether the animation repeats continuously.
+   *
+   * @default false
+   */
+  repeating?: boolean;
+  /**
+   * Number of times to repeat the animation.
+   * Ignored if `repeating` is `true`.
+   */
+  repeatCount?: number;
+  /**
+   * Speed multiplier for the animation.
+   *
+   * @default 1
+   */
+  speed?: number;
+  /**
+   * Whether to animate the whole symbol at once or layer by layer.
+   *
+   * @default false
+   */
+  wholeSymbol?: boolean;
+  /**
+   * Direction of the animation.
+   * Applicable to `bounce` and `wiggle`.
+   */
+  direction?: 'up' | 'down';
+  /**
+   * Whether the variable color effect reverses with each cycle.
+   * Only applicable to `variableColor`.
+   *
+   * @default false
+   */
+  reversing?: boolean;
+  /**
+   * Whether each layer remains changed until the end of the cycle.
+   * Only applicable to `variableColor`.
+   *
+   * @default false
+   */
+  cumulative?: boolean;
+};
+
+export type SFSymbolAnimation =
+  | SFSymbolAnimationEffect
+  | SFSymbolAnimationConfig;
+
+export type SFSymbolOptions = {
+  /**
+   * The name of the SF Symbol to display.
+   */
+  name: import('sf-symbols-typescript').SFSymbol;
+  /**
+   * The size of the symbol.
+   * @default 24
+   */
+  size?: number;
+  /**
+   * 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;
+  /**
+   * The weight of the symbol.
+   *
+   * @default 'regular'
+   */
+  weight?:
+    | keyof typeof FONT_WEIGHTS
+    | (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS];
+  /**
+   * The scale of the symbol relative to the font size.
+   *
+   * @default 'medium'
+   */
+  scale?: SFSymbolScale;
+  /**
+   * 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'
+   */
+  mode?: SFSymbolMode;
+  /**
+   * 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;
+    secondary?: ColorValue;
+    tertiary?: ColorValue;
+  };
+  /**
+   * The animation effect to apply to the symbol.
+   * Requires iOS 17+. Ignored on earlier versions.
+   */
+  animation?: SFSymbolAnimation;
+};

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

@@ -2,7 +2,7 @@ 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)',

package/src/theming/MaterialTheme.android.tsx

@@ -0,0 +1,30 @@
+import type { Theme } from '@react-navigation/core';
+import { PlatformColor } from 'react-native';
+
+import { fonts } from './fonts';
+
+export const MaterialLightTheme = {
+  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;
+
+export const MaterialDarkTheme = {
+  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;

package/src/theming/MaterialTheme.tsx

@@ -0,0 +1,19 @@
+import type { Theme } from '@react-navigation/core';
+
+import { fonts } from './fonts';
+
+export const MaterialLightTheme = {
+  dark: false,
+  get colors(): Theme['colors'] {
+    throw new Error('MaterialLightTheme is only supported on Android');
+  },
+  fonts,
+} as const satisfies Theme;
+
+export const MaterialDarkTheme = {
+  dark: true,
+  get colors(): Theme['colors'] {
+    throw new Error('MaterialDarkTheme is only supported on Android');
+  },
+  fonts,
+} as const satisfies Theme;

package/src/useLinkBuilder.tsx

@@ -17,11 +17,9 @@ type MinimalState = {
 };
 
 /**
- * Helpers to build href or action based on the linking options.
- *
- * @returns `buildHref` to build an `href` for screen and `buildAction` to build an action from an `href`.
+ * Helper to build a href for a screen based on the linking options.
  */
-export function useLinkBuilder() {
+export function useBuildHref() {
   const navigation = React.useContext(NavigationHelpersContext);
   const route = React.useContext(NavigationRouteContext);
 
@@ -30,8 +28,6 @@ export function useLinkBuilder() {
   const focusedRouteState = useStateForPath();
 
   const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
-  const getActionFromStateHelper =
-    options?.getActionFromState ?? getActionFromState;
 
   const buildHref = React.useCallback(
     (name: string, params?: object) => {
@@ -100,6 +96,18 @@ export function useLinkBuilder() {
     ]
   );
 
+  return buildHref;
+}
+
+/**
+ * Helper to build a navigation action from a href based on the linking options.
+ */
+export function useBuildAction() {
+  const { options } = React.useContext(LinkingContext);
+
+  const getActionFromStateHelper =
+    options?.getActionFromState ?? getActionFromState;
+
   const buildAction = React.useCallback(
     (href: string) => {
       const state = getStateFromHref(href, options);
@@ -117,6 +125,18 @@ export function useLinkBuilder() {
     [options, getActionFromStateHelper]
   );
 
+  return buildAction;
+}
+
+/**
+ * Helpers to build href or action based on the linking options.
+ *
+ * @returns `buildHref` to build an `href` for screen and `buildAction` to build an action from an `href`.
+ */
+export function useLinkBuilder() {
+  const buildHref = useBuildHref();
+  const buildAction = useBuildAction();
+
   return {
     buildHref,
     buildAction,

package/src/useLinkTo.tsx

@@ -1,7 +1,7 @@
 import { NavigationContainerRefContext } from '@react-navigation/core';
 import * as React from 'react';
 
-import { useLinkBuilder } from './useLinkBuilder';
+import { useBuildAction } from './useLinkBuilder';
 
 /**
  * Helper to navigate to a screen using a href based on the linking options.
@@ -10,7 +10,7 @@ import { useLinkBuilder } from './useLinkBuilder';
  */
 export function useLinkTo() {
   const navigation = React.useContext(NavigationContainerRefContext);
-  const { buildAction } = useLinkBuilder();
+  const buildAction = useBuildAction();
 
   const linkTo = React.useCallback(
     (href: string) => {

package/src/useLinking.native.tsx

@@ -58,28 +58,39 @@ export function useLinking(
       return undefined;
     }
 
-    if (enabled !== false && linkingHandlers.size) {
-      console.error(
-        [
-          'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
-          "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
-          '- Only a single instance of the root component is rendered',
-          Platform.OS === 'android'
-            ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
-            : '',
-        ]
-          .join('\n')
-          .trim()
-      );
-    }
-
     const handler = Symbol();
 
     if (enabled !== false) {
       linkingHandlers.add(handler);
     }
 
+    // In some cases, the effect cleanup may get called out of order
+    // This may result in multiple linking handlers being registered
+    // For example, when changing the wallpaper on Android
+    // Showing the error in a delay avoids false positives
+    const timer = setTimeout(() => {
+      if (
+        enabled !== false &&
+        linkingHandlers.size &&
+        !(linkingHandlers.size === 1 && linkingHandlers.has(handler))
+      ) {
+        console.error(
+          [
+            'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
+            "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
+            '- Only a single instance of the root component is rendered',
+            Platform.OS === 'android'
+              ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
+              : '',
+          ]
+            .join('\n')
+            .trim()
+        );
+      }
+    }, 1000);
+
     return () => {
+      clearTimeout(timer);
       linkingHandlers.delete(handler);
     };
   }, [enabled, independent]);
@@ -162,6 +173,18 @@ export function useLinking(
       const navigation = ref.current;
       const state = navigation ? getStateFromURL(url) : undefined;
 
+      if (navigation) {
+        REACT_NAVIGATION_DEVTOOLS.get(navigation)?.listeners.forEach(
+          (listener) => {
+            listener({
+              type: 'link',
+              url,
+              state,
+            });
+          }
+        );
+      }
+
       if (navigation && state) {
         const action = getActionFromStateRef.current(state, configRef.current);
 

package/lib/module/theming/DefaultTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fonts","DefaultTheme","dark","colors","primary","background","card","text","border","notification"],"sourceRoot":"../../../src","sources":["theming/DefaultTheme.tsx"],"mappings":";;AAEA,SAASA,KAAK,QAAQ,YAAS;AAE/B,OAAO,MAAMC,YAAY,GAAG;EAC1BC,IAAI,EAAE,KAAK;EACXC,MAAM,EAAE;IACNC,OAAO,EAAE,kBAAkB;IAC3BC,UAAU,EAAE,oBAAoB;IAChCC,IAAI,EAAE,oBAAoB;IAC1BC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE,oBAAoB;IAC5BC,YAAY,EAAE;EAChB,CAAC;EACDT;AACF,CAA0B","ignoreList":[]}

package/lib/typescript/src/theming/DefaultTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultTheme.d.ts","sourceRoot":"","sources":["../../../../src/theming/DefaultTheme.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWC,CAAC"}