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

package/src/NavigationContainer.tsx

@@ -6,7 +6,8 @@ import {
   type InitialState,
   type NavigationContainerProps,
   type NavigationContainerRef,
-  type ParamListBase,
+  type NavigationState,
+  type PartialState,
   type RootParamList,
   ThemeProvider,
   validatePathConfig,
@@ -16,7 +17,7 @@ import { I18nManager, Platform } from 'react-native';
 
 import { LinkingContext } from './LinkingContext';
 import { LocaleDirContext } from './LocaleDirContext';
-import { DefaultTheme } from './theming/DefaultTheme';
+import { LightTheme } from './theming/LightTheme';
 import type {
   DocumentTitleOptions,
   LinkingOptions,
@@ -30,8 +31,17 @@ import { type Thenable, useThenable } from './useThenable';
 
 declare global {
   var REACT_NAVIGATION_DEVTOOLS: WeakMap<
-    NavigationContainerRef<any>,
-    { readonly linking: LinkingOptions<any> }
+    object,
+    {
+      readonly linking: LinkingOptions<any>;
+      readonly listeners: Set<
+        (data: {
+          type: 'link';
+          url: string;
+          state: PartialState<NavigationState> | undefined;
+        }) => void
+      >;
+    }
   >;
 }
 
@@ -95,30 +105,36 @@ type Props<ParamList extends {}> = NavigationContainerProps & {
    * unless `documentTitle.enabled` is `false`.
    */
   documentTitle?: DocumentTitleOptions;
+  /**
+   * Ref object which refers to the navigation object containing helper methods.
+   */
+  ref?: React.Ref<NavigationContainerRef<ParamList>>;
 };
 
 const RESTORE_STATE_ERROR =
   'Failed to restore navigation state. The state will be initialized based on the navigation tree.';
 
-function NavigationContainerInner(
-  {
-    direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
-    theme = DefaultTheme,
-    linking,
-    persistor,
-    fallback = null,
-    documentTitle,
-    onStateChange,
-    ...rest
-  }: Props<ParamListBase>,
-  ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
-) {
+/**
+ * Container component that manages the navigation state.
+ *
+ * This should be rendered at the root wrapping the whole app.
+ */
+export function NavigationContainer<ParamList extends {} = RootParamList>({
+  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
+  theme = LightTheme,
+  linking,
+  persistor,
+  fallback = null,
+  documentTitle,
+  onStateChange,
+  ref,
+  ...rest
+}: Props<ParamList>) {
   if (linking?.config) {
     validatePathConfig(linking.config);
   }
 
-  const refContainer =
-    React.useRef<NavigationContainerRef<ParamListBase>>(null);
+  const refContainer = React.useRef<NavigationContainerRef<ParamList>>(null);
 
   useBackButton(refContainer);
   useDocumentTitle(refContainer, documentTitle);
@@ -150,10 +166,16 @@ function NavigationContainerInner(
   // This will be used by the devtools
   React.useEffect(() => {
     if (refContainer.current) {
+      const previous = REACT_NAVIGATION_DEVTOOLS.get(refContainer.current);
+      const listeners = previous?.listeners ?? new Set();
+
       REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
         get linking() {
           return linkingConfig.options;
         },
+        get listeners() {
+          return listeners;
+        },
       });
     }
   });
@@ -253,16 +275,3 @@ function NavigationContainerInner(
     </LocaleDirContext.Provider>
   );
 }
-
-/**
- * Container component that manages the navigation state.
- *
- * This should be rendered at the root wrapping the whole app.
- */
-export const NavigationContainer = React.forwardRef(
-  NavigationContainerInner
-) as <ParamList extends {} = RootParamList>(
-  props: Props<ParamList> & {
-    ref?: React.Ref<NavigationContainerRef<ParamList>>;
-  }
-) => React.ReactElement;

package/src/ServerContainer.tsx

@@ -6,6 +6,7 @@ import type { ServerContainerRef } from './types';
 
 type Props = ServerContextType & {
   children: React.ReactNode;
+  ref?: React.Ref<ServerContainerRef>;
 };
 
 /**
@@ -15,10 +16,7 @@ type Props = ServerContextType & {
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which contains helper methods.
  */
-export const ServerContainer = React.forwardRef(function ServerContainer(
-  { children, location }: Props,
-  ref: React.Ref<ServerContainerRef>
-) {
+export function ServerContainer({ children, location, ref }: Props) {
   React.useEffect(() => {
     console.error(
       "'ServerContainer' should only be used on the server with 'react-dom/server' for SSR."
@@ -54,4 +52,4 @@ export const ServerContainer = React.forwardRef(function ServerContainer(
       </CurrentRenderContext.Provider>
     </ServerContext.Provider>
   );
-});
+}

package/src/ServerContext.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 
 export type ServerContextType = {
-  location?: {
-    pathname: string;
-    search: string;
-  };
+  location?:
+    | {
+        pathname: string;
+        search: string;
+      }
+    | undefined;
 };
 
 export const ServerContext = React.createContext<ServerContextType | undefined>(

package/src/__stubs__/createStackNavigator.tsx

@@ -1,11 +1,10 @@
 import {
   createNavigatorFactory,
   type DefaultNavigatorOptions,
-  type NavigationListBase,
+  type NavigatorTypeBagBase,
   type ParamListBase,
   type StackNavigationState,
   StackRouter,
-  type TypedNavigator,
   useNavigationBuilder,
 } from '@react-navigation/core';
 
@@ -30,15 +29,10 @@ const StackNavigator = (
   );
 };
 
-export function createStackNavigator<
-  ParamList extends ParamListBase,
->(): TypedNavigator<{
-  ParamList: ParamList;
-  State: StackNavigationState<ParamList>;
-  ScreenOptions: {};
-  EventMap: {};
-  NavigationList: NavigationListBase<ParamList>;
+interface StubStackTypeBag extends NavigatorTypeBagBase {
+  State: StackNavigationState<this['ParamList']>;
   Navigator: typeof StackNavigator;
-}> {
-  return createNavigatorFactory(StackNavigator)();
 }
+
+export const createStackNavigator =
+  createNavigatorFactory<StubStackTypeBag>(StackNavigator);

package/src/createStaticNavigation.tsx

@@ -1,8 +1,6 @@
 import {
-  createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
-  type NavigationContainerRef,
-  type ParamListBase,
+  type RootParamList,
   type StaticNavigation,
 } from '@react-navigation/core';
 import * as React from 'react';
@@ -10,14 +8,14 @@ import * as React from 'react';
 import { NavigationContainer } from './NavigationContainer';
 import type { LinkingOptions } from './types';
 
-type Props = Omit<
-  React.ComponentProps<typeof NavigationContainer>,
+type Props<ParamList extends {}> = Omit<
+  React.ComponentProps<typeof NavigationContainer<ParamList>>,
   'linking' | 'children'
 > & {
   /**
    * Options for deep linking.
    */
-  linking?: Omit<LinkingOptions<ParamListBase>, 'config' | 'enabled'> & {
+  linking?: Omit<LinkingOptions<ParamList>, 'config' | 'enabled'> & {
     /**
      * Whether deep link handling should be enabled.
      * Defaults to `auto`.
@@ -30,10 +28,7 @@ type Props = Omit<
     /**
      * Additional configuration
      */
-    config?: Omit<
-      NonNullable<LinkingOptions<ParamListBase>['config']>,
-      'screens'
-    >;
+    config?: Omit<NonNullable<LinkingOptions<ParamList>['config']>, 'screens'>;
   };
 };
 
@@ -44,13 +39,14 @@ type Props = Omit<
  * @param tree Static navigation config.
  * @returns Navigation component to use in your app.
  */
-export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
-  const Component = createComponentForStaticNavigation(tree, 'RootNavigator');
+export function createStaticNavigation(tree: StaticNavigation<any>) {
+  const Component = tree.getComponent();
 
-  function Navigation(
-    { linking, ...rest }: Props,
-    ref: React.Ref<NavigationContainerRef<ParamListBase>>
-  ) {
+  function Navigation<ParamList extends {} = RootParamList>({
+    linking,
+    ref,
+    ...rest
+  }: Props<ParamList>) {
     const linkingConfig = React.useMemo(() => {
       const screens = createPathConfigForStaticNavigation(
         tree,
@@ -101,5 +97,5 @@ export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
     );
   }
 
-  return React.forwardRef(Navigation);
+  return Navigation;
 }

package/src/index.tsx

@@ -2,6 +2,11 @@ export { createStaticNavigation } from './createStaticNavigation';
 export { Link } from './Link';
 export { LinkingContext } from './LinkingContext';
 export { LocaleDirContext } from './LocaleDirContext';
+export {
+  type CornerInsetProps,
+  type CornerInsetRef,
+  CornerInset as UNSTABLE_CornerInset,
+} from './native/CornerInset';
 export {
   MaterialSymbol,
   type MaterialSymbolProps,
@@ -10,7 +15,8 @@ export { SFSymbol, type SFSymbolProps } from './native/SFSymbol';
 export { NavigationContainer } from './NavigationContainer';
 export { ServerContainer } from './ServerContainer';
 export { DarkTheme } from './theming/DarkTheme';
-export { DefaultTheme } from './theming/DefaultTheme';
+export { LightTheme as DefaultTheme } from './theming/LightTheme';
+export { MaterialDarkTheme, MaterialLightTheme } from './theming/MaterialTheme';
 export * from './types';
 export { useLinkBuilder } from './useLinkBuilder';
 export { type LinkProps, useLinkProps } from './useLinkProps';

package/src/native/CornerInset.ios.tsx

@@ -0,0 +1,85 @@
+import { NavigationContainerRefContext } from '@react-navigation/core';
+import * as React from 'react';
+import { Dimensions } from 'react-native';
+
+// eslint-disable-next-line import-x/extensions
+import type { CornerInsetProps, CornerInsetRef } from './CornerInset.tsx';
+import ReactNavigationCornerInsetViewNativeComponent, {
+  Commands,
+} from './ReactNavigationCornerInsetViewNativeComponent';
+
+type Props = CornerInsetProps & {
+  ref?: React.Ref<CornerInsetRef>;
+};
+
+export function CornerInset({ ref, ...rest }: Props) {
+  const root = React.use(NavigationContainerRefContext);
+
+  const nativeRef =
+    React.useRef<
+      React.ElementRef<typeof ReactNavigationCornerInsetViewNativeComponent>
+    >(null);
+
+  const relayout = React.useCallback(() => {
+    if (nativeRef.current) {
+      Commands.relayout(nativeRef.current);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (root == null) {
+      return;
+    }
+
+    let animationFrameHandle: number | null = null;
+
+    // We freeze the corner insets after initial measurements
+    // This is to avoid the insets getting out of sync during transitions
+    // We trigger a relayout explicitly on window resize and transition end
+    const unsubscribeWindowResize = Dimensions.addEventListener(
+      'change',
+      () => {
+        relayout();
+
+        if (animationFrameHandle) {
+          cancelAnimationFrame(animationFrameHandle);
+        }
+
+        // When window is unmaximized, calling relayout immediately doesn't work
+        // So we delay it to the next frame as a workaround
+        animationFrameHandle = requestAnimationFrame(() => {
+          animationFrameHandle = requestAnimationFrame(() => {
+            relayout();
+          });
+        });
+      }
+    );
+
+    const unsubscribeTransition = root.addListener('__unsafe_event__', (e) => {
+      if (e.data.type === 'transitionEnd') {
+        relayout();
+      }
+    });
+
+    return () => {
+      if (animationFrameHandle) {
+        cancelAnimationFrame(animationFrameHandle);
+      }
+
+      unsubscribeWindowResize.remove();
+      unsubscribeTransition();
+    };
+  }, [root, relayout]);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      relayout,
+    }),
+    [relayout]
+  );
+
+  return (
+    <ReactNavigationCornerInsetViewNativeComponent {...rest} ref={nativeRef} />
+  );
+}

package/src/native/CornerInset.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+export type CornerInsetProps = {
+  /**
+   * The direction of the content that should be inset.
+   */
+  direction: 'vertical' | 'horizontal';
+  /**
+   * The edge where the inset should be applied.
+   */
+  edge: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * Whether to collapse to 0 when corner inset matches the baseline inset.
+   * e.g. it will be 0 for corners without traffic lights on iPadOS.
+   *
+   * @default true
+   */
+  adaptive?: boolean;
+} & React.ComponentProps<typeof View>;
+
+export type CornerInsetRef = {
+  relayout(): void;
+};
+
+type Props = CornerInsetProps & {
+  ref?: React.Ref<CornerInsetRef>;
+};
+
+export function CornerInset({ ref, ...rest }: Props) {
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      relayout() {},
+    }),
+    []
+  );
+
+  return <View {...rest} />;
+}

package/src/native/MaterialSymbol.android.tsx

@@ -5,27 +5,25 @@ import {
   type ViewProps,
 } from 'react-native';
 
-import { MATERIAL_SYMBOL_FONT_HASHES } from './MaterialSymbolData';
+import { FONT_WEIGHTS } from './constants';
 import MaterialSymbolViewNativeComponent from './MaterialSymbolViewNativeComponent';
 import NativeMaterialSymbolModule from './NativeMaterialSymbolModule';
 import type { MaterialSymbolOptions } from './types';
 
 export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
 
-const imageSourceCache = new Map<string, ImageSourcePropType>();
-
 export function MaterialSymbol({
   name,
-  variant = 'outlined',
+  weight,
   size = 24,
-  color = 'black',
+  color,
   style,
   ...rest
 }: MaterialSymbolProps): React.ReactElement {
   return (
     <MaterialSymbolViewNativeComponent
       name={name}
-      variant={variant}
+      weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
       size={size}
       color={color}
       style={[
@@ -42,30 +40,23 @@ export function MaterialSymbol({
 
 MaterialSymbol.getImageSource = ({
   name,
-  variant = 'outlined',
+  variant,
+  weight,
   size = 24,
   color = 'black',
 }: MaterialSymbolOptions): ImageSourcePropType => {
-  const hash = MATERIAL_SYMBOL_FONT_HASHES[variant];
   const processedColor = processColor(color);
 
   if (processedColor == null) {
     throw new Error(`Invalid color value: ${String(color)}`);
   }
 
-  const cacheKey = `${name}:${variant}:${size}:${JSON.stringify(processedColor)}:${hash}`;
-  const cached = imageSourceCache.get(cacheKey);
-
-  if (cached !== undefined) {
-    return cached;
-  }
-
   const uri = NativeMaterialSymbolModule.getImageSource(
     name,
     variant,
+    typeof weight === 'string' ? FONT_WEIGHTS[weight] : weight,
     size,
-    { value: processedColor },
-    hash
+    { value: processedColor }
   );
 
   const source: ImageSourcePropType = {
@@ -75,7 +66,5 @@ MaterialSymbol.getImageSource = ({
     height: size,
   };
 
-  imageSourceCache.set(cacheKey, source);
-
   return source;
 };

package/src/native/MaterialSymbolData.tsx

@@ -1,12 +1,6 @@
 // Auto-generated by scripts/update-material-symbols.ts
 // Do not edit manually
 
-export const MATERIAL_SYMBOL_FONT_HASHES = {
-  outlined: 'bc5ec91a',
-  rounded: 'eb75c001',
-  sharp: '66ecc6b8',
-} as const;
-
 export type MaterialSymbolName =
   | '10k'
   | '10mp'

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -9,9 +9,13 @@ import {
 
 export interface NativeProps extends ViewProps {
   name: string;
-  variant: string;
+  variant?: string;
+  weight?: CodegenTypes.WithDefault<
+    0 | 100 | 200 | 300 | 400 | 500 | 600 | 700,
+    0
+  >;
   size: CodegenTypes.Float;
-  color: ColorValue;
+  color?: ColorValue;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/native/NativeMaterialSymbolModule.ts

@@ -5,12 +5,12 @@ import { type TurboModule, TurboModuleRegistry } from 'react-native';
 export interface Spec extends TurboModule {
   getImageSource(
     name: string,
-    variant: 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,
-    hash: string
+    color: Object
   ): string;
 }
 

package/src/native/ReactNavigationCornerInsetViewNativeComponent.ts

@@ -0,0 +1,32 @@
+/* eslint-disable import-x/no-default-export */
+import * as React from 'react';
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  direction?: CodegenTypes.WithDefault<'vertical' | 'horizontal', 'vertical'>;
+  edge?: CodegenTypes.WithDefault<'top' | 'right' | 'bottom' | 'left', 'top'>;
+  adaptive?: CodegenTypes.WithDefault<boolean, true>;
+}
+
+interface NativeCommands {
+  // FIXME: codegen fails with ComponentRef
+  // so we currently use the deprecated ElementRef
+  relayout(viewRef: React.ElementRef<HostComponent<NativeProps>>): void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['relayout'],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNavigationCornerInsetView',
+  {
+    interfaceOnly: true,
+  }
+) as HostComponent<NativeProps>;

package/src/native/SFSymbol.ios.tsx

@@ -1,5 +1,6 @@
 import type { ViewProps } from 'react-native';
 
+import { FONT_WEIGHTS } from './constants';
 import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
 import type { SFSymbolOptions } from './types';
 
@@ -8,15 +9,37 @@ export type SFSymbolProps = SFSymbolOptions & ViewProps;
 export function SFSymbol({
   name,
   size = 24,
-  color = 'black',
+  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,

package/src/native/SFSymbolViewNativeComponent.ts

@@ -10,7 +10,21 @@ import {
 export interface NativeProps extends ViewProps {
   name: string;
   size: CodegenTypes.Float;
-  color: ColorValue;
+  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>(

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;