@react-navigation/stack 8.0.0-alpha.6 → 8.0.0-alpha.60

package/src/navigators/createStackNavigator.tsx

@@ -1,18 +1,14 @@
 import {
   createNavigatorFactory,
+  createScreenFactory,
   type EventArg,
+  type NavigatorTypeBagBase,
   type ParamListBase,
   type StackActionHelpers,
   StackActions,
   type StackNavigationState,
   StackRouter,
   type StackRouterOptions,
-  type StaticConfig,
-  type StaticParamList,
-  type StaticScreenConfig,
-  type StaticScreenConfigLinking,
-  type StaticScreenConfigScreen,
-  type TypedNavigator,
   useLocale,
   useNavigationBuilder,
 } from '@react-navigation/native';
@@ -21,11 +17,16 @@ import * as React from 'react';
 import type {
   StackNavigationEventMap,
   StackNavigationOptions,
-  StackNavigationProp,
   StackNavigatorProps,
 } from '../types';
 import { StackView } from '../views/Stack/StackView';
 
+type TabPressEventArg = EventArg<
+  'tabPress',
+  true,
+  { behavior?: { popToTop?: boolean } } | undefined
+>;
+
 function StackNavigator({
   initialRouteName,
   routeNamesChangeBehavior,
@@ -39,98 +40,80 @@ function StackNavigator({
 }: StackNavigatorProps) {
   const { direction } = useLocale();
 
-  const { state, descriptors, navigation, NavigationContent } =
-    useNavigationBuilder<
-      StackNavigationState<ParamListBase>,
-      StackRouterOptions,
-      StackActionHelpers<ParamListBase>,
-      StackNavigationOptions,
-      StackNavigationEventMap
-    >(StackRouter, {
-      initialRouteName,
-      routeNamesChangeBehavior,
-      children,
-      layout,
-      screenListeners,
-      screenOptions,
-      screenLayout,
-      router,
-    });
+  const { state, descriptors, navigation, render } = useNavigationBuilder<
+    StackNavigationState<ParamListBase>,
+    StackRouterOptions,
+    StackActionHelpers<ParamListBase>,
+    StackNavigationOptions,
+    StackNavigationEventMap
+  >(StackRouter, {
+    initialRouteName,
+    routeNamesChangeBehavior,
+    children,
+    layout,
+    screenListeners,
+    screenOptions,
+    screenLayout,
+    router,
+  });
 
-  React.useEffect(
-    () =>
-      // @ts-expect-error: there may not be a tab navigator in parent
-      navigation.addListener?.('tabPress', (e) => {
-        const isFocused = navigation.isFocused();
+  React.useEffect(() => {
+    let handle: ReturnType<typeof requestAnimationFrame> | undefined;
 
-        // Run the operation in the next frame so we're sure all listeners have been run
-        // This is necessary to know if preventDefault() has been called
-        requestAnimationFrame(() => {
-          if (
-            state.index > 0 &&
-            isFocused &&
-            !(e as unknown as EventArg<'tabPress', true>).defaultPrevented
-          ) {
-            // When user taps on already focused tab and we're inside the tab,
-            // reset the stack to replicate native behaviour
-            navigation.dispatch({
-              ...StackActions.popToTop(),
-              target: state.key,
-            });
-          }
-        });
-      }),
-    [navigation, state.index, state.key]
-  );
+    // @ts-expect-error: there may not be a tab navigator in parent
+    const unsubscribe = navigation.addListener?.('tabPress', (e) => {
+      const isFocused = navigation.isFocused();
+
+      cancelAnimationFrame(handle);
 
-  return (
-    <NavigationContent>
-      <StackView
-        {...rest}
-        direction={direction}
-        state={state}
-        descriptors={descriptors}
-        navigation={navigation}
-      />
-    </NavigationContent>
+      // Run the operation in the next frame so we're sure all listeners have been run
+      // This is necessary to know if preventDefault() has been called
+      handle = requestAnimationFrame(() => {
+        const currentState = navigation.getState();
+        const event = e as TabPressEventArg;
+
+        if (
+          isFocused &&
+          event.data?.behavior?.popToTop !== false &&
+          (currentState.index > 0 || currentState.routes[0]?.history?.length) &&
+          !event.defaultPrevented
+        ) {
+          // When user taps on already focused tab and we're inside the tab,
+          // reset the stack to replicate native behaviour
+          navigation.dispatch({
+            ...StackActions.popToTop(),
+            target: currentState.key,
+          });
+        }
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(handle);
+      unsubscribe?.();
+    };
+  }, [navigation]);
+
+  return render(
+    <StackView
+      {...rest}
+      direction={direction}
+      state={state}
+      descriptors={descriptors}
+      navigation={navigation}
+    />
   );
 }
 
-type StackTypeBag<ParamList extends {}> = {
-  ParamList: ParamList;
-  State: StackNavigationState<ParamList>;
+export interface StackTypeBag extends NavigatorTypeBagBase {
+  State: StackNavigationState<this['ParamList']>;
   ScreenOptions: StackNavigationOptions;
   EventMap: StackNavigationEventMap;
-  NavigationList: {
-    [RouteName in keyof ParamList]: StackNavigationProp<ParamList, RouteName>;
-  };
+  ActionHelpers: StackActionHelpers<this['ParamList']>;
   Navigator: typeof StackNavigator;
-};
-
-export function createStackNavigator<
-  const ParamList extends ParamListBase,
->(): TypedNavigator<StackTypeBag<ParamList>, undefined>;
-export function createStackNavigator<
-  const Config extends StaticConfig<StackTypeBag<ParamListBase>>,
->(
-  config: Config
-): TypedNavigator<StackTypeBag<StaticParamList<{ config: Config }>>, Config>;
-export function createStackNavigator(config?: unknown) {
-  return createNavigatorFactory(StackNavigator)(config);
 }
 
-export function createStackScreen<
-  const Linking extends StaticScreenConfigLinking,
-  const Screen extends StaticScreenConfigScreen,
->(
-  config: StaticScreenConfig<
-    Linking,
-    Screen,
-    StackNavigationState<ParamListBase>,
-    StackNavigationOptions,
-    StackNavigationEventMap,
-    StackNavigationProp<ParamListBase>
-  >
-) {
-  return config;
-}
+export const createStackNavigator =
+  createNavigatorFactory<StackTypeBag>(StackNavigator);
+
+export const createStackScreen = createScreenFactory<StackTypeBag>();