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

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -0,0 +1,19 @@
+/* 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;
+  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,
+    size: number,
+    // Codegen requires using `Object` instead of `object
+    // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+    color: Object,
+    hash: string
+  ): string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'ReactNavigationMaterialSymbolModule'
+);

package/src/native/SFSymbol.ios.tsx

@@ -0,0 +1,30 @@
+import type { ViewProps } from 'react-native';
+
+import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
+import type { SFSymbolOptions } from './types';
+
+export type SFSymbolProps = SFSymbolOptions & ViewProps;
+
+export function SFSymbol({
+  name,
+  size = 24,
+  color = 'black',
+  style,
+  ...rest
+}: SFSymbolProps): React.ReactElement {
+  return (
+    <SFSymbolViewNativeComponent
+      name={name}
+      size={size}
+      color={color}
+      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,18 @@
+/* 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;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNavigationSFSymbolView'
+);

package/src/native/types.tsx

@@ -0,0 +1,47 @@
+import type { ColorValue } from 'react-native';
+
+import type { MaterialSymbolName } from './MaterialSymbolData';
+
+type MaterialSymbolVariant = 'outlined' | 'rounded' | 'sharp';
+
+export type MaterialSymbolOptions = {
+  /**
+   * The name of the Material Symbol to display.
+   */
+  name: MaterialSymbolName;
+  /**
+   * The variant of the symbol.
+   *
+   * @default 'outlined'
+   */
+  variant?: MaterialSymbolVariant;
+  /**
+   * The size of the symbol.
+   *
+   * @default 24
+   */
+  size?: number;
+  /**
+   * The color of the symbol.
+   *
+   * @default 'black'
+   */
+  color?: ColorValue;
+};
+
+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.
+   * @default 'black'
+   */
+  color?: ColorValue;
+};

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) => {