From 2b8dc207e4cece93ad0e381dc7cea5caef12820a Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Mon, 11 Mar 2024 12:43:38 +0100
Subject: [PATCH] fix: improve type of options in dynamic navigator

---
 .../NativeStackHeaderCustomization.tsx        |   9 +-
 .../bottom-tabs/src/__tests__/index.test.tsx  |  18 +--
 .../navigators/createBottomTabNavigator.tsx   |  25 +++-
 packages/core/src/Screen.tsx                  |  12 +-
 packages/core/src/createNavigatorFactory.tsx  |   7 +-
 packages/core/src/types.tsx                   |  15 ++-
 packages/core/src/useDescriptors.tsx          |   9 +-
 packages/core/src/useNavigationBuilder.tsx    |   3 +-
 packages/drawer/src/__tests__/index.test.tsx  |  15 ++-
 .../src/navigators/createDrawerNavigator.tsx  |  25 +++-
 .../src/__tests__/index.test.tsx              |  14 ++-
 .../createMaterialTopTabNavigator.tsx         |  25 +++-
 .../native-stack/src/__tests__/index.test.tsx | 114 +++++++++---------
 .../navigators/createNativeStackNavigator.tsx |  25 +++-
 .../src/__stubs__/createStackNavigator.tsx    |  35 +++++-
 .../src/__tests__/ServerContainer.test.tsx    |  35 +++++-
 packages/stack/src/__tests__/index.test.tsx   |  26 ++--
 .../src/navigators/createStackNavigator.tsx   |  25 +++-
 18 files changed, 305 insertions(+), 132 deletions(-)

diff --git a/example/src/Screens/NativeStackHeaderCustomization.tsx b/example/src/Screens/NativeStackHeaderCustomization.tsx
index 8de598ecdb..a5a358a088 100644
--- a/example/src/Screens/NativeStackHeaderCustomization.tsx
+++ b/example/src/Screens/NativeStackHeaderCustomization.tsx
@@ -3,6 +3,7 @@ import { Button, HeaderButton } from '@react-navigation/elements';
 import type { PathConfigMap } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
+  type NativeStackScreenOptions,
   type NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import * as React from 'react';
@@ -120,7 +121,13 @@ export function NativeStackHeaderCustomization() {
       <Stack.Screen
         name="Article"
         component={ArticleScreen}
-        options={({ route, navigation }) => ({
+        options={({
+          route,
+          navigation,
+        }: NativeStackScreenOptions<
+          NativeHeaderCustomizationStackParams,
+          'Article'
+        >) => ({
           title: `Article by ${route.params?.author ?? 'Unknown'}`,
           headerTintColor: 'white',
           headerTitle: ({ tintColor }) => (
diff --git a/packages/bottom-tabs/src/__tests__/index.test.tsx b/packages/bottom-tabs/src/__tests__/index.test.tsx
index 68ad96d85a..96f64253c1 100644
--- a/packages/bottom-tabs/src/__tests__/index.test.tsx
+++ b/packages/bottom-tabs/src/__tests__/index.test.tsx
@@ -1,7 +1,6 @@
 import {
   createNavigationContainerRef,
   NavigationContainer,
-  type ParamListBase,
 } from '@react-navigation/native';
 import { act, fireEvent, render } from '@testing-library/react-native';
 import * as React from 'react';
@@ -9,13 +8,21 @@ import { Animated, Button, Text, View } from 'react-native';
 
 import { type BottomTabScreenProps, createBottomTabNavigator } from '../index';
 
+type BottomTabParamList = {
+  A: undefined;
+  B: undefined;
+};
+
 it('renders a bottom tab navigator with screens', async () => {
   // @ts-expect-error: incomplete mock for testing
   jest.spyOn(Animated, 'timing').mockImplementation(() => ({
     start: (callback) => callback?.({ finished: true }),
   }));
 
-  const Test = ({ route, navigation }: BottomTabScreenProps<ParamListBase>) => (
+  const Test = ({
+    route,
+    navigation,
+  }: BottomTabScreenProps<BottomTabParamList>) => (
     <View>
       <Text>Screen {route.name}</Text>
       <Button onPress={() => navigation.navigate('A')} title="Go to A" />
@@ -23,7 +30,7 @@ it('renders a bottom tab navigator with screens', async () => {
     </View>
   );
 
-  const Tab = createBottomTabNavigator();
+  const Tab = createBottomTabNavigator<BottomTabParamList>();
 
   const { findByText, queryByText } = render(
     <NavigationContainer>
@@ -42,11 +49,6 @@ it('renders a bottom tab navigator with screens', async () => {
   expect(queryByText('Screen B')).not.toBeNull();
 });
 
-type BottomTabParamList = {
-  A: undefined;
-  B: undefined;
-};
-
 it('handles screens preloading', async () => {
   const Tab = createBottomTabNavigator<BottomTabParamList>();
 
diff --git a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
index 81321e255b..2287cc716f 100644
--- a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
+++ b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
@@ -14,6 +14,7 @@ import type {
   BottomTabNavigationConfig,
   BottomTabNavigationEventMap,
   BottomTabNavigationOptions,
+  BottomTabNavigationProp,
 } from '../types';
 import { BottomTabView } from '../views/BottomTabView';
 
@@ -67,9 +68,21 @@ function BottomTabNavigator({
   );
 }
 
-export const createBottomTabNavigator = createNavigatorFactory<
-  TabNavigationState<ParamListBase>,
-  BottomTabNavigationOptions,
-  BottomTabNavigationEventMap,
-  typeof BottomTabNavigator
->(BottomTabNavigator);
+export const createBottomTabNavigator = <
+  ParamList extends {},
+  NavigatorID extends string | undefined = undefined,
+>() =>
+  createNavigatorFactory<
+    ParamList,
+    TabNavigationState<ParamList>,
+    BottomTabNavigationOptions,
+    BottomTabNavigationEventMap,
+    {
+      [RouteName in keyof ParamList]: BottomTabNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    },
+    typeof BottomTabNavigator
+  >(BottomTabNavigator)();
diff --git a/packages/core/src/Screen.tsx b/packages/core/src/Screen.tsx
index 1327028026..9951a3898e 100644
--- a/packages/core/src/Screen.tsx
+++ b/packages/core/src/Screen.tsx
@@ -11,7 +11,17 @@ export function Screen<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
->(_: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>) {
+  NavigationProp,
+>(
+  _: RouteConfig<
+    ParamList,
+    RouteName,
+    State,
+    ScreenOptions,
+    EventMap,
+    NavigationProp
+  >
+) {
   /* istanbul ignore next */
   return null;
 }
diff --git a/packages/core/src/createNavigatorFactory.tsx b/packages/core/src/createNavigatorFactory.tsx
index 6b65dceb4f..b0cdee8a89 100644
--- a/packages/core/src/createNavigatorFactory.tsx
+++ b/packages/core/src/createNavigatorFactory.tsx
@@ -14,21 +14,23 @@ import type { EventMapBase, TypedNavigator } from './types';
  * @returns Factory method to create a `Navigator` and `Screen` pair.
  */
 export function createNavigatorFactory<
+  ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
+  NavigationPropList extends { [RouteName in keyof ParamList]: any },
   NavigatorComponent extends React.ComponentType<any>,
 >(Navigator: NavigatorComponent) {
-  function createNavigator<ParamList extends ParamListBase>(): TypedNavigator<
+  function createNavigator(): TypedNavigator<
     ParamList,
     State,
     ScreenOptions,
     EventMap,
+    NavigationPropList,
     typeof Navigator
   >;
 
   function createNavigator<
-    ParamList extends ParamListBase,
     Config extends StaticConfig<
       ParamList,
       State,
@@ -43,6 +45,7 @@ export function createNavigatorFactory<
     State,
     ScreenOptions,
     EventMap,
+    NavigationPropList,
     typeof Navigator
   > & { config: Config };
 
diff --git a/packages/core/src/types.tsx b/packages/core/src/types.tsx
index 8d5347a9c3..a378574be4 100644
--- a/packages/core/src/types.tsx
+++ b/packages/core/src/types.tsx
@@ -425,7 +425,7 @@ export type NavigationContainerProps = {
 };
 
 export type NavigationProp<
-  ParamList extends {},
+  ParamList extends ParamListBase,
   RouteName extends keyof ParamList = Keyof<ParamList>,
   NavigatorID extends string | undefined = undefined,
   State extends NavigationState = NavigationState<ParamList>,
@@ -608,6 +608,7 @@ export type RouteConfig<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
+  Navigation,
 > = {
   /**
    * Optional key for this screen. This doesn't need to be unique.
@@ -628,7 +629,7 @@ export type RouteConfig<
     | ScreenOptions
     | ((props: {
         route: RouteProp<ParamList, RouteName>;
-        navigation: any;
+        navigation: Navigation;
         theme: ReactNavigation.Theme;
       }) => ScreenOptions);
 
@@ -795,6 +796,7 @@ export type TypedNavigator<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
+  NavigationPropList extends { [key in keyof ParamList]: unknown },
   Navigator extends React.ComponentType<any>,
 > = {
   /**
@@ -815,7 +817,14 @@ export type TypedNavigator<
    * Component used for specifying route configuration.
    */
   Screen: <RouteName extends keyof ParamList>(
-    _: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>
+    _: RouteConfig<
+      ParamList,
+      RouteName,
+      State,
+      ScreenOptions,
+      EventMap,
+      NavigationPropList[RouteName]
+    >
   ) => null;
 };
 
diff --git a/packages/core/src/useDescriptors.tsx b/packages/core/src/useDescriptors.tsx
index aa2d93edd5..e28eee385a 100644
--- a/packages/core/src/useDescriptors.tsx
+++ b/packages/core/src/useDescriptors.tsx
@@ -36,7 +36,14 @@ export type ScreenConfigWithParent<
   keys: (string | undefined)[];
   options: (ScreenOptionsOrCallback<ScreenOptions> | undefined)[] | undefined;
   layout: ScreenLayout | undefined;
-  props: RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>;
+  props: RouteConfig<
+    ParamListBase,
+    string,
+    State,
+    ScreenOptions,
+    EventMap,
+    unknown
+  >;
 };
 
 type ScreenLayout = (props: {
diff --git a/packages/core/src/useNavigationBuilder.tsx b/packages/core/src/useNavigationBuilder.tsx
index 29004eb1ad..6c636c9ded 100644
--- a/packages/core/src/useNavigationBuilder.tsx
+++ b/packages/core/src/useNavigationBuilder.tsx
@@ -103,7 +103,8 @@ const getRouteConfigsFromChildren = <
             string,
             State,
             ScreenOptions,
-            EventMap
+            EventMap,
+            unknown
           >,
         });
 
diff --git a/packages/drawer/src/__tests__/index.test.tsx b/packages/drawer/src/__tests__/index.test.tsx
index 167cdb16ea..c75f3adeae 100644
--- a/packages/drawer/src/__tests__/index.test.tsx
+++ b/packages/drawer/src/__tests__/index.test.tsx
@@ -1,7 +1,6 @@
 import {
   createNavigationContainerRef,
   NavigationContainer,
-  type ParamListBase,
 } from '@react-navigation/native';
 import { act, fireEvent, render } from '@testing-library/react-native';
 import * as React from 'react';
@@ -9,8 +8,13 @@ import { Button, Text, View } from 'react-native';
 
 import { createDrawerNavigator, type DrawerScreenProps } from '../index';
 
+type DrawerParamList = {
+  A: undefined;
+  B: undefined;
+};
+
 it('renders a drawer navigator with screens', async () => {
-  const Test = ({ route, navigation }: DrawerScreenProps<ParamListBase>) => (
+  const Test = ({ route, navigation }: DrawerScreenProps<DrawerParamList>) => (
     <View>
       <Text>Screen {route.name}</Text>
       <Button onPress={() => navigation.navigate('A')} title="Go to A" />
@@ -18,7 +22,7 @@ it('renders a drawer navigator with screens', async () => {
     </View>
   );
 
-  const Drawer = createDrawerNavigator();
+  const Drawer = createDrawerNavigator<DrawerParamList>();
 
   const { findByText, queryByText } = render(
     <NavigationContainer>
@@ -37,11 +41,6 @@ it('renders a drawer navigator with screens', async () => {
   expect(queryByText('Screen B')).not.toBeNull();
 });
 
-type DrawerParamList = {
-  A: undefined;
-  B: undefined;
-};
-
 it('handles screens preloading', async () => {
   const Drawer = createDrawerNavigator<DrawerParamList>();
 
diff --git a/packages/drawer/src/navigators/createDrawerNavigator.tsx b/packages/drawer/src/navigators/createDrawerNavigator.tsx
index 7295cb6ece..2ed82bb066 100644
--- a/packages/drawer/src/navigators/createDrawerNavigator.tsx
+++ b/packages/drawer/src/navigators/createDrawerNavigator.tsx
@@ -14,6 +14,7 @@ import type {
   DrawerNavigationConfig,
   DrawerNavigationEventMap,
   DrawerNavigationOptions,
+  DrawerNavigationProp,
 } from '../types';
 import { DrawerView } from '../views/DrawerView';
 
@@ -70,9 +71,21 @@ function DrawerNavigator({
   );
 }
 
-export const createDrawerNavigator = createNavigatorFactory<
-  DrawerNavigationState<ParamListBase>,
-  DrawerNavigationOptions,
-  DrawerNavigationEventMap,
-  typeof DrawerNavigator
->(DrawerNavigator);
+export const createDrawerNavigator = <
+  ParamList extends {},
+  NavigatorID extends string | undefined = undefined,
+>() =>
+  createNavigatorFactory<
+    ParamList,
+    DrawerNavigationState<ParamList>,
+    DrawerNavigationOptions,
+    DrawerNavigationEventMap,
+    {
+      [RouteName in keyof ParamList]: DrawerNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    },
+    typeof DrawerNavigator
+  >(DrawerNavigator)();
diff --git a/packages/material-top-tabs/src/__tests__/index.test.tsx b/packages/material-top-tabs/src/__tests__/index.test.tsx
index fec4dcbc82..3ea05896b4 100644
--- a/packages/material-top-tabs/src/__tests__/index.test.tsx
+++ b/packages/material-top-tabs/src/__tests__/index.test.tsx
@@ -1,7 +1,4 @@
-import {
-  NavigationContainer,
-  type ParamListBase,
-} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import { fireEvent, render } from '@testing-library/react-native';
 import * as React from 'react';
 import { Button, Text, View } from 'react-native';
@@ -11,6 +8,11 @@ import {
   type MaterialTopTabScreenProps,
 } from '../index';
 
+type TopTabParamList = {
+  A: undefined;
+  B: undefined;
+};
+
 jest.mock('react-native-pager-view', () => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const React = require('react');
@@ -30,7 +32,7 @@ it('renders a material top tab navigator with screens', async () => {
   const Test = ({
     route,
     navigation,
-  }: MaterialTopTabScreenProps<ParamListBase>) => (
+  }: MaterialTopTabScreenProps<TopTabParamList>) => (
     <View>
       <Text>Screen {route.name}</Text>
       <Button onPress={() => navigation.navigate('A')} title="Go to A" />
@@ -38,7 +40,7 @@ it('renders a material top tab navigator with screens', async () => {
     </View>
   );
 
-  const Tab = createMaterialTopTabNavigator();
+  const Tab = createMaterialTopTabNavigator<TopTabParamList>();
 
   const { findByText, queryByText } = render(
     <NavigationContainer>
diff --git a/packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx b/packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx
index 0be5b5ed1c..9fa1c49d16 100644
--- a/packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx
+++ b/packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx
@@ -14,6 +14,7 @@ import type {
   MaterialTopTabNavigationConfig,
   MaterialTopTabNavigationEventMap,
   MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationProp,
 } from '../types';
 import { MaterialTopTabView } from '../views/MaterialTopTabView';
 
@@ -67,9 +68,21 @@ function MaterialTopTabNavigator({
   );
 }
 
-export const createMaterialTopTabNavigator = createNavigatorFactory<
-  TabNavigationState<ParamListBase>,
-  MaterialTopTabNavigationOptions,
-  MaterialTopTabNavigationEventMap,
-  typeof MaterialTopTabNavigator
->(MaterialTopTabNavigator);
+export const createMaterialTopTabNavigator = <
+  ParamList extends {},
+  NavigatorID extends string | undefined = undefined,
+>() =>
+  createNavigatorFactory<
+    ParamList,
+    TabNavigationState<ParamList>,
+    MaterialTopTabNavigationOptions,
+    MaterialTopTabNavigationEventMap,
+    {
+      [RouteName in keyof ParamList]: MaterialTopTabNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    },
+    typeof MaterialTopTabNavigator
+  >(MaterialTopTabNavigator)();
diff --git a/packages/native-stack/src/__tests__/index.test.tsx b/packages/native-stack/src/__tests__/index.test.tsx
index 3218cc742b..83f4eafcb9 100644
--- a/packages/native-stack/src/__tests__/index.test.tsx
+++ b/packages/native-stack/src/__tests__/index.test.tsx
@@ -1,8 +1,5 @@
 import { useHeaderHeight } from '@react-navigation/elements';
-import {
-  NavigationContainer,
-  type ParamListBase,
-} from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import {
   fireEvent,
   isHiddenFromAccessibility,
@@ -16,6 +13,15 @@ import {
   type NativeStackScreenProps,
 } from '../index';
 
+type StackParamList = {
+  A: undefined;
+  B: undefined;
+};
+
+type NestedStackParamList = {
+  C: undefined;
+};
+
 jest.mock('react-native/Libraries/Utilities/Platform', () => ({
   ...jest.requireActual('react-native/Libraries/Utilities/Platform'),
   OS: 'ios',
@@ -43,7 +49,7 @@ it('renders a native-stack navigator with screens', async () => {
   const Test = ({
     route,
     navigation,
-  }: NativeStackScreenProps<ParamListBase>) => (
+  }: NativeStackScreenProps<StackParamList>) => (
     <View>
       <Text>Screen {route.name}</Text>
       <Button onPress={() => navigation.navigate('A')} title="Go to A" />
@@ -51,7 +57,7 @@ it('renders a native-stack navigator with screens', async () => {
     </View>
   );
 
-  const Stack = createNativeStackNavigator();
+  const Stack = createNativeStackNavigator<StackParamList>();
 
   const { getByText, queryByText } = render(
     <NavigationContainer>
@@ -76,14 +82,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'android';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -103,14 +109,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'ios';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -130,14 +136,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'web';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -157,14 +163,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'ios';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -190,14 +196,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'ios';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -230,14 +236,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'android';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -270,14 +276,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'ios';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -301,14 +307,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'android';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -332,14 +338,14 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'web';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -363,15 +369,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'ios';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -397,15 +403,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'ios';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -415,7 +421,7 @@ describe('useHeaderHeight in native-stack', () => {
             {() => (
               <NestedStack.Navigator>
                 <NestedStack.Screen
-                  name="third"
+                  name="C"
                   component={Test}
                   options={{ headerShown: false }}
                 />
@@ -435,15 +441,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'ios';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -469,15 +475,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'android';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -503,15 +509,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'android';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -521,7 +527,7 @@ describe('useHeaderHeight in native-stack', () => {
             {() => (
               <NestedStack.Navigator>
                 <NestedStack.Screen
-                  name="third"
+                  name="C"
                   component={Test}
                   options={{ headerShown: false }}
                 />
@@ -541,15 +547,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'android';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -575,15 +581,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'web';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -609,15 +615,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'web';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
@@ -627,7 +633,7 @@ describe('useHeaderHeight in native-stack', () => {
             {() => (
               <NestedStack.Navigator>
                 <NestedStack.Screen
-                  name="third"
+                  name="C"
                   component={Test}
                   options={{ headerShown: false }}
                 />
@@ -647,15 +653,15 @@ describe('useHeaderHeight in native-stack', () => {
     Platform.OS = 'web';
 
     let headerHeight;
-    const Test = ({ navigation }: NativeStackScreenProps<ParamListBase>) => {
+    const Test = ({ navigation }: NativeStackScreenProps<StackParamList>) => {
       headerHeight = useHeaderHeight();
       return (
         <Button onPress={() => navigation.navigate('B')} title="Go to B" />
       );
     };
 
-    const Stack = createNativeStackNavigator();
-    const NestedStack = createNativeStackNavigator();
+    const Stack = createNativeStackNavigator<StackParamList>();
+    const NestedStack = createNativeStackNavigator<NestedStackParamList>();
 
     const { findByText } = render(
       <NavigationContainer>
diff --git a/packages/native-stack/src/navigators/createNativeStackNavigator.tsx b/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
index 06991f5fb6..439a153e9a 100644
--- a/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
+++ b/packages/native-stack/src/navigators/createNativeStackNavigator.tsx
@@ -14,6 +14,7 @@ import * as React from 'react';
 import type {
   NativeStackNavigationEventMap,
   NativeStackNavigationOptions,
+  NativeStackNavigationProp,
   NativeStackNavigatorProps,
 } from '../types';
 import { NativeStackView } from '../views/NativeStackView';
@@ -83,9 +84,21 @@ function NativeStackNavigator({
   );
 }
 
-export const createNativeStackNavigator = createNavigatorFactory<
-  StackNavigationState<ParamListBase>,
-  NativeStackNavigationOptions,
-  NativeStackNavigationEventMap,
-  typeof NativeStackNavigator
->(NativeStackNavigator);
+export const createNativeStackNavigator = <
+  ParamList extends {},
+  NavigatorID extends string | undefined = undefined,
+>() =>
+  createNavigatorFactory<
+    ParamList,
+    StackNavigationState<ParamList>,
+    NativeStackNavigationOptions,
+    NativeStackNavigationEventMap,
+    {
+      [RouteName in keyof ParamList]: NativeStackNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    },
+    typeof NativeStackNavigator
+  >(NativeStackNavigator)();
diff --git a/packages/native/src/__stubs__/createStackNavigator.tsx b/packages/native/src/__stubs__/createStackNavigator.tsx
index 16cce4908b..0a2be3b58f 100644
--- a/packages/native/src/__stubs__/createStackNavigator.tsx
+++ b/packages/native/src/__stubs__/createStackNavigator.tsx
@@ -1,11 +1,23 @@
 import {
   createNavigatorFactory,
+  type DefaultNavigatorOptions,
+  type NavigationProp,
+  type NavigationState,
+  type ParamListBase,
+  type StackNavigationState,
   StackRouter,
   useNavigationBuilder,
 } from '@react-navigation/core';
 import * as React from 'react';
 
-export const createStackNavigator = createNavigatorFactory((props) => {
+const StackNavigator = (
+  props: DefaultNavigatorOptions<
+    ParamListBase,
+    StackNavigationState<ParamListBase>,
+    {},
+    {}
+  >
+) => {
   const { state, descriptors, NavigationContent } = useNavigationBuilder(
     StackRouter,
     props
@@ -16,4 +28,23 @@ export const createStackNavigator = createNavigatorFactory((props) => {
       {descriptors[state.routes[state.index].key].render()}
     </NavigationContent>
   );
-});
+};
+
+export const createStackNavigator = <
+  ParamList extends {},
+  NavigatorID extends string | undefined = undefined,
+>() =>
+  createNavigatorFactory<
+    ParamList,
+    NavigationState<ParamList>,
+    {},
+    {},
+    {
+      [RouteName in keyof ParamList]: NavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    },
+    typeof StackNavigator
+  >(StackNavigator)();
diff --git a/packages/native/src/__tests__/ServerContainer.test.tsx b/packages/native/src/__tests__/ServerContainer.test.tsx
index c8fe2f3d71..c0f0045d12 100644
--- a/packages/native/src/__tests__/ServerContainer.test.tsx
+++ b/packages/native/src/__tests__/ServerContainer.test.tsx
@@ -1,6 +1,11 @@
 import {
   createNavigatorFactory,
+  type DefaultNavigatorOptions,
+  type NavigationProp,
+  type NavigationState,
   type NavigatorScreenParams,
+  type ParamListBase,
+  type StackNavigationState,
   StackRouter,
   TabRouter,
   useNavigationBuilder,
@@ -38,7 +43,14 @@ jest.spyOn(console, 'error').mockImplementation((...args) => {
 });
 
 it('renders correct state with location', () => {
-  const createStackNavigator = createNavigatorFactory((props: any) => {
+  const StackNavigator = (
+    props: DefaultNavigatorOptions<
+      ParamListBase,
+      StackNavigationState<ParamListBase>,
+      {},
+      {}
+    >
+  ) => {
     const { state, descriptors, NavigationContent } = useNavigationBuilder(
       StackRouter,
       props
@@ -51,7 +63,26 @@ it('renders correct state with location', () => {
         ))}
       </NavigationContent>
     );
-  });
+  };
+
+  const createStackNavigator = <
+    ParamList extends {},
+    NavigatorID extends string | undefined = undefined,
+  >() =>
+    createNavigatorFactory<
+      ParamList,
+      NavigationState<ParamList>,
+      {},
+      {},
+      {
+        [RouteName in keyof ParamList]: NavigationProp<
+          ParamList,
+          RouteName,
+          NavigatorID
+        >;
+      },
+      typeof StackNavigator
+    >(StackNavigator)();
 
   type StackAParamList = {
     Home: NavigatorScreenParams<StackBParamList>;
diff --git a/packages/stack/src/__tests__/index.test.tsx b/packages/stack/src/__tests__/index.test.tsx
index 470daca6c4..97e00b90d3 100644
--- a/packages/stack/src/__tests__/index.test.tsx
+++ b/packages/stack/src/__tests__/index.test.tsx
@@ -12,6 +12,11 @@ import { Button, Text, View } from 'react-native';
 
 import { createStackNavigator, type StackScreenProps } from '../index';
 
+type StackParamList = {
+  A: undefined;
+  B: undefined;
+};
+
 jest.useFakeTimers();
 
 it('renders a stack navigator with screens', async () => {
@@ -23,7 +28,7 @@ it('renders a stack navigator with screens', async () => {
     </View>
   );
 
-  const Stack = createStackNavigator();
+  const Stack = createStackNavigator<StackParamList>();
 
   const { findByText, queryByText } = render(
     <NavigationContainer>
@@ -66,7 +71,7 @@ it('fires transition events on navigation', async () => {
     return <Button onPress={() => navigation.goBack()} title="Go back" />;
   };
 
-  const Stack = createStackNavigator();
+  const Stack = createStackNavigator<StackParamList>();
 
   const { findByText } = render(
     <NavigationContainer>
@@ -111,11 +116,6 @@ it('fires transition events on navigation', async () => {
   );
 });
 
-type StackParamList = {
-  A: undefined;
-  B: undefined;
-};
-
 it('handles screens preloading', async () => {
   const Stack = createStackNavigator<StackParamList>();
 
@@ -201,15 +201,15 @@ it('renders correct focus state with preloading', () => {
     );
   };
 
-  const Stack = createStackNavigator();
+  const Stack = createStackNavigator<StackParamList>();
 
   const navigation = React.createRef<any>();
 
   const { queryByText } = 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>
   );
@@ -218,7 +218,7 @@ it('renders correct focus state with preloading', () => {
     queryByText('Test Screen', { includeHiddenElements: true })
   ).toBeNull();
 
-  act(() => navigation.current.preload('second'));
+  act(() => navigation.current.preload('B'));
 
   expect(
     queryByText('Test Screen', { includeHiddenElements: true })
@@ -228,13 +228,13 @@ it('renders correct focus state with preloading', () => {
     queryByText('unfocused', { includeHiddenElements: true })
   ).not.toBeNull();
 
-  act(() => navigation.current.navigate('second'));
+  act(() => navigation.current.navigate('B'));
 
   expect(
     queryByText('focused', { includeHiddenElements: true })
   ).not.toBeNull();
 
-  act(() => navigation.current.navigate('first'));
+  act(() => navigation.current.navigate('A'));
 
   expect(queryByText('focused', { includeHiddenElements: true })).toBeNull();
 });
diff --git a/packages/stack/src/navigators/createStackNavigator.tsx b/packages/stack/src/navigators/createStackNavigator.tsx
index 6bf681c634..686c3cc22c 100644
--- a/packages/stack/src/navigators/createStackNavigator.tsx
+++ b/packages/stack/src/navigators/createStackNavigator.tsx
@@ -17,6 +17,7 @@ import type {
   StackNavigationConfig,
   StackNavigationEventMap,
   StackNavigationOptions,
+  StackNavigationProp,
 } from '../types';
 import { StackView } from '../views/Stack/StackView';
 
@@ -100,9 +101,21 @@ function StackNavigator({
   );
 }
 
-export const createStackNavigator = createNavigatorFactory<
-  StackNavigationState<ParamListBase>,
-  StackNavigationOptions,
-  StackNavigationEventMap,
-  typeof StackNavigator
->(StackNavigator);
+export const createStackNavigator = <
+  ParamList extends {},
+  NavigatorID extends string | undefined = undefined,
+>() =>
+  createNavigatorFactory<
+    ParamList,
+    StackNavigationState<ParamList>,
+    StackNavigationOptions,
+    StackNavigationEventMap,
+    {
+      [RouteName in keyof ParamList]: StackNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    },
+    typeof StackNavigator
+  >(StackNavigator)();