@react-navigation/native 8.0.0-alpha.4 → 8.0.0-alpha.40

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';

package/src/theming/fonts.native.tsx

@@ -0,0 +1,41 @@
+import type { Theme } from '@react-navigation/core';
+import { Platform } from 'react-native';
+
+export const fonts = Platform.select({
+  ios: {
+    regular: {
+      fontFamily: 'System',
+      fontWeight: '400',
+    },
+    medium: {
+      fontFamily: 'System',
+      fontWeight: '500',
+    },
+    bold: {
+      fontFamily: 'System',
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: 'System',
+      fontWeight: '700',
+    },
+  },
+  default: {
+    regular: {
+      fontFamily: 'sans-serif',
+      fontWeight: 'normal',
+    },
+    medium: {
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+    },
+    bold: {
+      fontFamily: 'sans-serif',
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: 'sans-serif',
+      fontWeight: '700',
+    },
+  },
+} as const satisfies Record<string, Theme['fonts']>);

package/src/theming/fonts.tsx

@@ -1,62 +1,23 @@
 import type { Theme } from '@react-navigation/core';
-import { Platform } from 'react-native';
 
 const WEB_FONT_STACK =
   'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
 
-export const fonts = Platform.select({
-  web: {
-    regular: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '400',
-    },
-    medium: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '500',
-    },
-    bold: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '700',
-    },
+export const fonts = {
+  regular: {
+    fontFamily: WEB_FONT_STACK,
+    fontWeight: '400',
   },
-  ios: {
-    regular: {
-      fontFamily: 'System',
-      fontWeight: '400',
-    },
-    medium: {
-      fontFamily: 'System',
-      fontWeight: '500',
-    },
-    bold: {
-      fontFamily: 'System',
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: 'System',
-      fontWeight: '700',
-    },
+  medium: {
+    fontFamily: WEB_FONT_STACK,
+    fontWeight: '500',
   },
-  default: {
-    regular: {
-      fontFamily: 'sans-serif',
-      fontWeight: 'normal',
-    },
-    medium: {
-      fontFamily: 'sans-serif-medium',
-      fontWeight: 'normal',
-    },
-    bold: {
-      fontFamily: 'sans-serif',
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: 'sans-serif',
-      fontWeight: '700',
-    },
+  bold: {
+    fontFamily: WEB_FONT_STACK,
+    fontWeight: '600',
   },
-} as const satisfies Record<string, Theme['fonts']>);
+  heavy: {
+    fontFamily: WEB_FONT_STACK,
+    fontWeight: '700',
+  },
+} as const satisfies Theme['fonts'];

package/src/types.tsx

@@ -68,7 +68,7 @@ export type LinkingOptions<ParamList extends {}> = {
    *
    * Defaults to `true` when a linking config is specified.
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * The prefixes to match to determine whether to handle a URL.
    *
@@ -96,7 +96,7 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  prefixes?: LinkingPrefix[];
+  prefixes?: LinkingPrefix[] | undefined;
   /**
    * Optional function which takes an incoming URL returns a boolean
    * indicating whether React Navigation should handle it.
@@ -114,7 +114,7 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  filter?: (url: string) => boolean;
+  filter?: ((url: string) => boolean) | undefined;
   /**
    * Config to fine-tune how to parse the path.
    *
@@ -128,23 +128,25 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  config?: {
-    /**
-     * Path string to match against for the whole navigation tree.
-     * It's not possible to specify params here since this doesn't belong to a screen.
-     * This is useful when the whole app is under a specific path.
-     * e.g. all of the screens are under `/admin` in `https://example.com/admin`
-     */
-    path?: string;
-    /**
-     * Path configuration for child screens.
-     */
-    screens: PathConfigMap<ParamList>;
-    /**
-     * Name of the initial route to use for the root navigator.
-     */
-    initialRouteName?: keyof ParamList;
-  };
+  config?:
+    | {
+        /**
+         * Path string to match against for the whole navigation tree.
+         * It's not possible to specify params here since this doesn't belong to a screen.
+         * This is useful when the whole app is under a specific path.
+         * e.g. all of the screens are under `/admin` in `https://example.com/admin`
+         */
+        path?: string | undefined;
+        /**
+         * Path configuration for child screens.
+         */
+        screens: PathConfigMap<ParamList>;
+        /**
+         * Name of the initial route to use for the root navigator.
+         */
+        initialRouteName?: Extract<keyof ParamList, string> | undefined;
+      }
+    | undefined;
   /**
    * Custom function to get the initial URL used for linking.
    * Uses `Linking.getInitialURL()` by default.
@@ -158,11 +160,9 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  getInitialURL?: () =>
-    | string
-    | null
-    | undefined
-    | Promise<string | null | undefined>;
+  getInitialURL?:
+    | (() => string | null | undefined | Promise<string | null | undefined>)
+    | undefined;
   /**
    * Custom function to get subscribe to URL updates.
    * Uses `Linking.addEventListener('url', callback)` by default.
@@ -184,30 +184,32 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  subscribe?: (
-    listener: (url: string) => void
-  ) => undefined | void | (() => void);
+  subscribe?:
+    | ((listener: (url: string) => void) => undefined | void | (() => void))
+    | undefined;
   /**
    * Custom function to parse the URL to a valid navigation state (advanced).
    */
-  getStateFromPath?: typeof getStateFromPathDefault;
+  getStateFromPath?: typeof getStateFromPathDefault | undefined;
   /**
    * Custom function to convert the state object to a valid URL (advanced).
    * Only applicable on Web.
    */
-  getPathFromState?: typeof getPathFromStateDefault;
+  getPathFromState?: typeof getPathFromStateDefault | undefined;
   /**
    * Custom function to convert the state object to a valid action (advanced).
    */
-  getActionFromState?: typeof getActionFromStateDefault;
+  getActionFromState?: typeof getActionFromStateDefault | undefined;
 };
 
 export type DocumentTitleOptions = {
-  enabled?: boolean;
-  formatter?: (
-    options: Record<string, any> | undefined,
-    route: Route<string> | undefined
-  ) => string;
+  enabled?: boolean | undefined;
+  formatter?:
+    | ((
+        options: Record<string, any> | undefined,
+        route: Route<string> | undefined
+      ) => string)
+    | undefined;
 };
 
 export type Persistor = {
@@ -223,7 +225,3 @@ export type Persistor = {
    */
   restore(): PromiseLike<InitialState | undefined> | InitialState | undefined;
 };
-
-export type ServerContainerRef = {
-  getCurrentOptions(): Record<string, any> | undefined;
-};

package/src/useBackButton.native.tsx

@@ -9,8 +9,10 @@ export function useBackButton(
   ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>
 ) {
   React.useEffect(() => {
+    // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
     const subscription = BackHandler.addEventListener(
       'hardwareBackPress',
+      // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
       () => {
         const navigation = ref.current;
 

package/src/useBackButton.tsx

@@ -3,8 +3,8 @@ import type {
   ParamListBase,
 } from '@react-navigation/core';
 
-export function useBackButton(
-  _: React.RefObject<NavigationContainerRef<ParamListBase> | null>
+export function useBackButton<ParamList extends ParamListBase>(
+  _: React.RefObject<NavigationContainerRef<ParamList> | null>
 ) {
   // No-op
   // BackHandler is not available on web

package/src/useDeepStableValue.tsx

@@ -0,0 +1,12 @@
+import isEqual from 'fast-deep-equal';
+import * as React from 'react';
+
+export function useDeepStableValue<T>(value: T): T {
+  const valueRef = React.useRef(value);
+
+  if (!isEqual(valueRef.current, value)) {
+    valueRef.current = value;
+  }
+
+  return valueRef.current;
+}

package/src/useDocumentTitle.tsx

@@ -9,8 +9,8 @@ import type { DocumentTitleOptions } from './types';
 /**
  * Set the document title for the active screen
  */
-export function useDocumentTitle(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
+export function useDocumentTitle<ParamList extends ParamListBase>(
+  ref: React.RefObject<NavigationContainerRef<ParamList> | null>,
   {
     enabled = true,
     formatter = (options, route) => options?.title ?? route?.name,

package/src/useLinkBuilder.tsx

@@ -3,6 +3,7 @@ import {
   findFocusedRoute,
   getActionFromState,
   getPathFromState,
+  NavigationContainerRefContext,
   NavigationHelpersContext,
   NavigationRouteContext,
   useStateForPath,
@@ -13,17 +14,23 @@ import { getStateFromHref } from './getStateFromHref';
 import { LinkingContext } from './LinkingContext';
 
 type MinimalState = {
-  routes: [{ name: string; params?: object; state?: MinimalState }];
+  routes: [
+    {
+      name: string;
+      params?: object | undefined;
+      state?: MinimalState | undefined;
+    },
+  ];
 };
 
 /**
  * Helper to build a href for a screen based on the linking options.
  */
 export function useBuildHref() {
-  const navigation = React.useContext(NavigationHelpersContext);
-  const route = React.useContext(NavigationRouteContext);
+  const navigation = React.use(NavigationHelpersContext);
+  const route = React.use(NavigationRouteContext);
 
-  const { options } = React.useContext(LinkingContext);
+  const { options } = React.use(LinkingContext);
 
   const focusedRouteState = useStateForPath();
 
@@ -103,14 +110,15 @@ export function useBuildHref() {
  * Helper to build a navigation action from a href based on the linking options.
  */
 export function useBuildAction() {
-  const { options } = React.useContext(LinkingContext);
+  const navigation = React.use(NavigationContainerRefContext);
+  const { options } = React.use(LinkingContext);
 
   const getActionFromStateHelper =
     options?.getActionFromState ?? getActionFromState;
 
   const buildAction = React.useCallback(
     (href: string) => {
-      const state = getStateFromHref(href, options);
+      const state = getStateFromHref(href, options, navigation?.getRootState());
 
       if (state) {
         const action = getActionFromStateHelper(state, options?.config);
@@ -122,7 +130,7 @@ export function useBuildAction() {
         );
       }
     },
-    [options, getActionFromStateHelper]
+    [navigation, options, getActionFromStateHelper]
   );
 
   return buildAction;