chore: move removePreload to the stack router and enable preloading in the material-top-tabs

example/src/Screens/TabPreloadFlow.tsx

@@ -44,7 +44,7 @@ const DetailsScreen = ({
 const HomeScreen = ({
   navigation,
 }: BottomTabScreenProps<PreloadBottomTabsParams, 'Home'>) => {
-  const { navigate, preload, removePreload } = navigation;
+  const { navigate, preload } = navigation;
 
   return (
     <View style={styles.content}>
@@ -54,9 +54,6 @@ const HomeScreen = ({
       <Button onPress={() => navigate('Details')} style={styles.button}>
         Navigate
       </Button>
-      <Button onPress={() => removePreload('Details')} style={styles.button}>
-        Remove preload
-      </Button>
     </View>
   );
 };

packages/bottom-tabs/src/__tests__/index.test.tsx

@@ -66,6 +66,4 @@ it('handles screens preloading', async () => {
   expect(
     queryByText('Screen B', { includeHiddenElements: true })
   ).not.toBeNull();
-  act(() => navigation.removePreload('B'));
-  expect(queryByText('Screen B', { includeHiddenElements: true })).toBeNull();
 });

packages/core/src/types.tsx

@@ -316,22 +316,6 @@ type NavigationHelpersCommon<
       : never
   ): void;
 
-  /**
-   * Remove preloaded route in current navigation tree.
-   *
-   * @param name Name of the route to remove preload.
-   * @param [params] Params object for the route.
-   */
-  removePreload<RouteName extends keyof ParamList>(
-    ...args: RouteName extends unknown
-      ? undefined extends ParamList[RouteName]
-        ?
-            | [screen: RouteName]
-            | [screen: RouteName, params: ParamList[RouteName]]
-        : [screen: RouteName, params: ParamList[RouteName]]
-      : never
-  ): void;
-
   /**
    * Reset the navigation state to the provided state.
    *

packages/drawer/src/__tests__/index.test.tsx

@@ -61,6 +61,4 @@ it('handles screens preloading', async () => {
   expect(
     queryByText('Screen B', { includeHiddenElements: true })
   ).not.toBeNull();
-  act(() => navigation.removePreload('B'));
-  expect(queryByText('Screen B', { includeHiddenElements: true })).toBeNull();
 });

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -44,12 +44,6 @@ export function MaterialTopTabView({
     });
   };
 
-  if (state.preloadedRouteKeys.length !== 0) {
-    throw new Error(
-      'Preloading routes is not supported in the MaterialTopTabNavigator navigator.'
-    );
-  }
-
   const focusedOptions = descriptors[state.routes[state.index].key].options;
 
   return (

packages/react-native-tab-view/src/TabView.tsx

@@ -111,7 +111,7 @@ export function TabView<T extends Route>({
         layoutDirection={direction}
       >
         {({ position, render, addEnterListener, jumpTo }) => {
-          // All of the props here must not change between re-renders
+          // All the props here must not change between re-renders
           // This is crucial to optimizing the routes with PureComponent
           const sceneRendererProps = {
             position,

packages/routers/src/CommonActions.tsx

@@ -129,7 +129,3 @@ export function setParams(params: object): Action {
 export function preload(name: string, params?: object): Action {
   return { type: 'PRELOAD', payload: { name, params } };
 }
-
-export function removePreload(name: string, params?: object): Action {
-  return { type: 'REMOVE_PRELOAD', payload: { name, params } };
-}

packages/routers/src/StackRouter.tsx

@@ -1,6 +1,7 @@
 import { nanoid } from 'nanoid/non-secure';
 
 import { BaseRouter } from './BaseRouter';
+import type { Action } from './CommonActions';
 import type {
   CommonNavigationAction,
   DefaultRouterOptions,
@@ -118,6 +119,22 @@ export type StackActionHelpers<ParamList extends ParamListBase> = {
             | [screen: RouteName, params: ParamList[RouteName], merge: boolean]
       : never
   ): void;
+
+  /**
+   * Remove a screen from the preloaded list in the navigator.
+   *
+   * @param name Name of the route to remove preload.
+   * @param [params] Params object for the route.
+   */
+  removePreload<RouteName extends keyof ParamList>(
+    ...args: RouteName extends unknown
+      ? undefined extends ParamList[RouteName]
+        ?
+            | [screen: RouteName]
+            | [screen: RouteName, params: ParamList[RouteName]]
+        : [screen: RouteName, params: ParamList[RouteName]]
+      : never
+  ): void;
 };
 
 export const StackActions = {
@@ -136,6 +153,9 @@ export const StackActions = {
   popTo(name: string, params?: object, merge?: boolean): StackActionType {
     return { type: 'POP_TO', payload: { name, params, merge } };
   },
+  removePreload(name: string, params?: object): Action {
+    return { type: 'REMOVE_PRELOAD', payload: { name, params } };
+  },
 };
 
 export function StackRouter(options: StackRouterOptions) {

packages/routers/src/__tests__/StackRouter.test.tsx

@@ -2159,7 +2159,7 @@ it('handles screen preloading', () => {
         ],
       },
 
-      CommonActions.removePreload('bar', { answer: 43 }),
+      StackActions.removePreload('bar', { answer: 43 }),
       options
     )
   ).toEqual({
@@ -2405,7 +2405,7 @@ it('handles screen preloading', () => {
         ],
       },
 
-      CommonActions.removePreload('bar', { answer: 42 }),
+      StackActions.removePreload('bar', { answer: 42 }),
       options
     )
   ).toEqual({

packages/stack/src/__tests__/index.test.tsx

@@ -2,6 +2,7 @@ import {
   createNavigationContainerRef,
   NavigationContainer,
   type ParamListBase,
+  StackActions,
   useFocusEffect,
   useIsFocused,
 } from '@react-navigation/native';
@@ -134,7 +135,7 @@ it('handles screens preloading', async () => {
   expect(
     queryByText('Screen B', { includeHiddenElements: true })
   ).not.toBeNull();
-  act(() => navigation.removePreload('B'));
+  act(() => navigation.dispatch(StackActions.removePreload('B')));
   expect(queryByText('Screen B', { includeHiddenElements: true })).toBeNull();
 });
 
@@ -154,35 +155,35 @@ it('runs focus effect on focus change on preloaded route', () => {
     return null;
   };
 
-  const Stack = createStackNavigator();
+  const Stack = createStackNavigator<StackParamList>();
 
-  const navigation = React.createRef<any>();
+  const navigation = createNavigationContainerRef<StackParamList>();
 
   render(
     <NavigationContainer ref={navigation}>
       <Stack.Navigator>
-        <Stack.Screen name="first">{() => null}</Stack.Screen>
-        <Stack.Screen name="second" component={Test} />
+        <Stack.Screen name="A">{() => null}</Stack.Screen>
+        <Stack.Screen name="B" component={Test} />
       </Stack.Navigator>
     </NavigationContainer>
   );
 
   expect(focusEffect).not.toHaveBeenCalled();
   expect(focusEffectCleanup).not.toHaveBeenCalled();
 
-  act(() => navigation.current.preload('second'));
-  act(() => navigation.current.removePreload('second'));
-  act(() => navigation.current.preload('second'));
+  act(() => navigation.preload('A'));
+  act(() => navigation.dispatch(StackActions.removePreload('B')));
+  act(() => navigation.preload('B'));
 
   expect(focusEffect).not.toHaveBeenCalled();
   expect(focusEffectCleanup).not.toHaveBeenCalled();
 
-  act(() => navigation.current.navigate('second'));
+  act(() => navigation.navigate('B'));
 
   expect(focusEffect).toHaveBeenCalledTimes(1);
   expect(focusEffectCleanup).not.toHaveBeenCalled();
 
-  act(() => navigation.current.navigate('first'));
+  act(() => navigation.navigate('A'));
 
   expect(focusEffect).toHaveBeenCalledTimes(1);
   expect(focusEffectCleanup).toHaveBeenCalledTimes(1);