Merge branch 'main' into fix/new-md-styles

packages/core/src/BaseNavigationContainer.tsx

@@ -209,9 +209,6 @@ export const BaseNavigationContainer = React.forwardRef(
         getCurrentRoute,
         getCurrentOptions,
         isReady,
-        setParams: () => {
-          throw new Error('Cannot call setParams outside a screen');
-        },
         setOptions: () => {
           throw new Error('Cannot call setOptions outside a screen');
         },

packages/core/src/types.tsx

@@ -779,10 +779,6 @@ export type NavigationContainerRef<ParamList extends {}> =
        * Stub function for setOptions on navigation object for use with useNavigation.
        */
       setOptions(): never;
-      /**
-       * Stub function for setParams on navigation object for use with useNavigation.
-       */
-      setParams(): never;
       /**
        * Stub function for getParent on navigation object for use with useNavigation.
        */

packages/native/src/__tests__/createStaticNavigation.test.tsx

@@ -0,0 +1,148 @@
+import {
+  createNavigationContainerRef,
+  createNavigatorFactory,
+  type ParamListBase,
+  StackRouter,
+  TabRouter,
+  useNavigationBuilder,
+} from '@react-navigation/core';
+import { act, render, waitFor } from '@testing-library/react-native';
+import * as React from 'react';
+
+import { window } from '../__stubs__/window';
+import { createStaticNavigation } from '../createStaticNavigation';
+
+Object.assign(global, window);
+
+// We want to use the web version of useLinking
+// eslint-disable-next-line import/extensions
+jest.mock('../useLinking', () => require('../useLinking.tsx'));
+
+it('integrates with the history API', async () => {
+  const createStackNavigator = createNavigatorFactory((props: any) => {
+    const { state, descriptors, NavigationContent } = useNavigationBuilder(
+      StackRouter,
+      props
+    );
+
+    return (
+      <NavigationContent>
+        {state.routes.map((route, i) => (
+          <div key={route.key} aria-current={state.index === i || undefined}>
+            {descriptors[route.key].render()}
+          </div>
+        ))}
+      </NavigationContent>
+    );
+  });
+
+  const createTabNavigator = createNavigatorFactory((props: any) => {
+    const { state, descriptors, NavigationContent } = useNavigationBuilder(
+      TabRouter,
+      props
+    );
+
+    return (
+      <NavigationContent>
+        {state.routes.map((route, i) => (
+          <div key={route.key} aria-current={state.index === i || undefined}>
+            {descriptors[route.key].render()}
+          </div>
+        ))}
+      </NavigationContent>
+    );
+  });
+
+  const TestScreen = ({ route }: any): any =>
+    `${route.name} ${JSON.stringify(route.params)}`;
+
+  const Stack = createStackNavigator({
+    initialRouteName: 'Feed',
+    screens: {
+      Profile: {
+        screen: TestScreen,
+        linking: ':user',
+      },
+      Settings: {
+        screen: TestScreen,
+        linking: 'edit',
+      },
+      Updates: {
+        screen: TestScreen,
+        linking: 'updates',
+      },
+      Feed: {
+        screen: TestScreen,
+        linking: 'feed',
+      },
+    },
+  });
+
+  const Tab = createTabNavigator({
+    screens: {
+      Home: Stack,
+      Chat: {
+        screen: TestScreen,
+        linking: 'chat',
+      },
+    },
+  });
+
+  const Navigation = createStaticNavigation(Tab);
+
+  const navigation = createNavigationContainerRef<ParamListBase>();
+
+  render(
+    <Navigation
+      ref={navigation}
+      linking={{
+        prefixes: [],
+      }}
+    />
+  );
+
+  expect(window.location.pathname).toBe('/feed');
+
+  act(() => navigation.current?.navigate('Profile', { user: 'jane' }));
+
+  await waitFor(() => expect(window.location.pathname).toBe('/jane'));
+
+  act(() => navigation.current?.navigate('Updates'));
+
+  await waitFor(() => expect(window.location.pathname).toBe('/updates'));
+
+  act(() => navigation.current?.goBack());
+
+  await waitFor(() => expect(window.location.pathname).toBe('/jane'));
+
+  act(() => {
+    window.history.back();
+  });
+
+  await waitFor(() => expect(window.location.pathname).toBe('/feed'));
+
+  act(() => {
+    window.history.forward();
+  });
+
+  await waitFor(() => expect(window.location.pathname).toBe('/jane'));
+
+  act(() => navigation.current?.navigate('Settings'));
+
+  await waitFor(() => expect(window.location.pathname).toBe('/edit'));
+
+  act(() => {
+    window.history.go(-2);
+  });
+
+  await waitFor(() => expect(window.location.pathname).toBe('/feed'));
+
+  act(() => navigation.current?.navigate('Settings'));
+  act(() => navigation.current?.navigate('Chat'));
+
+  await waitFor(() => expect(window.location.pathname).toBe('/chat'));
+
+  act(() => navigation.current?.navigate('Home'));
+
+  await waitFor(() => expect(window.location.pathname).toBe('/edit'));
+});

packages/native/src/createStaticNavigation.tsx

@@ -1,6 +1,7 @@
 import {
   createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
+  type NavigationContainerRef,
   type ParamListBase,
   type StaticNavigation,
 } from '@react-navigation/core';
@@ -34,10 +35,14 @@ export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
       : {},
   };
 
-  function Navigation({ linking, ...rest }: Props) {
+  function Navigation(
+    { linking, ...rest }: Props,
+    ref: React.Ref<NavigationContainerRef<ParamListBase>>
+  ) {
     return (
       <NavigationContainer
         {...rest}
+        ref={ref}
         linking={linking ? { ...linking, config: linkingConfig } : undefined}
       >
         <Component />