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

package/src/native/types.tsx

@@ -1,9 +1,8 @@
 import type { ColorValue } from 'react-native';
 
+import type { FONT_WEIGHTS } from './constants';
 import type { MaterialSymbolName } from './MaterialSymbolData';
 
-type MaterialSymbolVariant = 'outlined' | 'rounded' | 'sharp';
-
 export type MaterialSymbolOptions = {
   /**
    * The name of the Material Symbol to display.
@@ -12,9 +11,65 @@ export type MaterialSymbolOptions = {
   /**
    * 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?: MaterialSymbolVariant;
+  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.
    *
@@ -29,6 +84,77 @@ export type MaterialSymbolOptions = {
   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.
@@ -41,7 +167,52 @@ export type SFSymbolOptions = {
   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/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/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/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/android/build/.transforms/586a73aab4c351d3f13dc604ca6964e8/results.bin

@@ -1 +0,0 @@
-o/classes

package/android/build/.transforms/fb9c4b42fa16b6541a5819cb4bf06272/results.bin

@@ -1 +0,0 @@
-o/bundleLibRuntimeToDirDebug

package/android/build/generated/source/buildConfig/debug/org/reactnavigation/BuildConfig.java

@@ -1,10 +0,0 @@
-/**
- * Automatically generated file. DO NOT MODIFY
- */
-package org.reactnavigation;
-
-public final class BuildConfig {
-  public static final boolean DEBUG = Boolean.parseBoolean("true");
-  public static final String LIBRARY_PACKAGE_NAME = "org.reactnavigation";
-  public static final String BUILD_TYPE = "debug";
-}

package/android/build/generated/source/codegen/java/com/facebook/fbreact/specs/NativeMaterialSymbolModuleSpec.java

@@ -1,38 +0,0 @@
-
-/**
- * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
- *
- * Do not edit this file as changes may cause incorrect behavior and will be lost
- * once the code is regenerated.
- *
- * @generated by codegen project: GenerateModuleJavaSpec.js
- *
- * @nolint
- */
-
-package com.facebook.fbreact.specs;
-
-import com.facebook.proguard.annotations.DoNotStrip;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.turbomodule.core.interfaces.TurboModule;
-import javax.annotation.Nonnull;
-
-public abstract class NativeMaterialSymbolModuleSpec extends ReactContextBaseJavaModule implements TurboModule {
-  public static final String NAME = "ReactNavigationMaterialSymbolModule";
-
-  public NativeMaterialSymbolModuleSpec(ReactApplicationContext reactContext) {
-    super(reactContext);
-  }
-
-  @Override
-  public @Nonnull String getName() {
-    return NAME;
-  }
-
-  @ReactMethod(isBlockingSynchronousMethod = true)
-  @DoNotStrip
-  public abstract String getImageSource(String name, String variant, double size, ReadableMap color, String hash);
-}

package/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNavigationMaterialSymbolViewManagerDelegate.java

@@ -1,42 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaDelegate.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.bridge.ColorPropConverter;
-import com.facebook.react.uimanager.BaseViewManager;
-import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.LayoutShadowNode;
-
-public class ReactNavigationMaterialSymbolViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNavigationMaterialSymbolViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
-  public ReactNavigationMaterialSymbolViewManagerDelegate(U viewManager) {
-    super(viewManager);
-  }
-  @Override
-  public void setProperty(T view, String propName, @Nullable Object value) {
-    switch (propName) {
-      case "name":
-        mViewManager.setName(view, value == null ? null : (String) value);
-        break;
-      case "variant":
-        mViewManager.setVariant(view, value == null ? null : (String) value);
-        break;
-      case "size":
-        mViewManager.setSize(view, value == null ? Float.NaN : ((Double) value).floatValue());
-        break;
-      case "color":
-        mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
-        break;
-      default:
-        super.setProperty(view, propName, value);
-    }
-  }
-}

package/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNavigationMaterialSymbolViewManagerInterface.java

@@ -1,21 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaInterface.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
-
-public interface ReactNavigationMaterialSymbolViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
-  void setName(T view, @Nullable String value);
-  void setVariant(T view, @Nullable String value);
-  void setSize(T view, float value);
-  void setColor(T view, @Nullable Integer value);
-}

package/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNavigationSFSymbolViewManagerDelegate.java

@@ -1,39 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaDelegate.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.bridge.ColorPropConverter;
-import com.facebook.react.uimanager.BaseViewManager;
-import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.LayoutShadowNode;
-
-public class ReactNavigationSFSymbolViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNavigationSFSymbolViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
-  public ReactNavigationSFSymbolViewManagerDelegate(U viewManager) {
-    super(viewManager);
-  }
-  @Override
-  public void setProperty(T view, String propName, @Nullable Object value) {
-    switch (propName) {
-      case "name":
-        mViewManager.setName(view, value == null ? null : (String) value);
-        break;
-      case "size":
-        mViewManager.setSize(view, value == null ? Float.NaN : ((Double) value).floatValue());
-        break;
-      case "color":
-        mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
-        break;
-      default:
-        super.setProperty(view, propName, value);
-    }
-  }
-}

package/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNavigationSFSymbolViewManagerInterface.java

@@ -1,20 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaInterface.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
-
-public interface ReactNavigationSFSymbolViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
-  void setName(T view, @Nullable String value);
-  void setSize(T view, float value);
-  void setColor(T view, @Nullable Integer value);
-}

package/android/build/generated/source/codegen/jni/CMakeLists.txt

@@ -1,28 +0,0 @@
-# Copyright (c) Meta Platforms, Inc. and affiliates.
-#
-# This source code is licensed under the MIT license found in the
-# LICENSE file in the root directory of this source tree.
-
-cmake_minimum_required(VERSION 3.13)
-set(CMAKE_VERBOSE_MAKEFILE on)
-
-file(GLOB react_codegen_SRCS CONFIGURE_DEPENDS *.cpp react/renderer/components/ReactNavigationSpec/*.cpp)
-
-add_library(
-  react_codegen_ReactNavigationSpec
-  OBJECT
-  ${react_codegen_SRCS}
-)
-
-target_include_directories(react_codegen_ReactNavigationSpec PUBLIC . react/renderer/components/ReactNavigationSpec)
-
-target_link_libraries(
-  react_codegen_ReactNavigationSpec
-  fbjni
-  jsi
-  # We need to link different libraries based on whether we are building rncore or not, that's necessary
-  # because we want to break a circular dependency between react_codegen_rncore and reactnative
-  reactnative
-)
-
-target_compile_reactnative_options(react_codegen_ReactNavigationSpec PRIVATE)

package/android/build/generated/source/codegen/jni/ReactNavigationSpec-generated.cpp

@@ -1,32 +0,0 @@
-
-/**
- * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
- *
- * Do not edit this file as changes may cause incorrect behavior and will be lost
- * once the code is regenerated.
- *
- * @generated by codegen project: GenerateModuleJniCpp.js
- */
-
-#include "ReactNavigationSpec.h"
-
-namespace facebook::react {
-
-static facebook::jsi::Value __hostFunction_NativeMaterialSymbolModuleSpecJSI_getImageSource(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
-  static jmethodID cachedMethodId = nullptr;
-  return static_cast<JavaTurboModule &>(turboModule).invokeJavaMethod(rt, StringKind, "getImageSource", "(Ljava/lang/String;Ljava/lang/String;DLcom/facebook/react/bridge/ReadableMap;Ljava/lang/String;)Ljava/lang/String;", args, count, cachedMethodId);
-}
-
-NativeMaterialSymbolModuleSpecJSI::NativeMaterialSymbolModuleSpecJSI(const JavaTurboModule::InitParams &params)
-  : JavaTurboModule(params) {
-  methodMap_["getImageSource"] = MethodMetadata {5, __hostFunction_NativeMaterialSymbolModuleSpecJSI_getImageSource};
-}
-
-std::shared_ptr<TurboModule> ReactNavigationSpec_ModuleProvider(const std::string &moduleName, const JavaTurboModule::InitParams &params) {
-  if (moduleName == "ReactNavigationMaterialSymbolModule") {
-    return std::make_shared<NativeMaterialSymbolModuleSpecJSI>(params);
-  }
-  return nullptr;
-}
-
-} // namespace facebook::react