Update TypeScript docs for composite navigation props

Author: satya164

versioned_docs/version-6.x/typescript.md

@@ -171,7 +171,9 @@ type TabParamList = {
 
 #### Combining navigation props
 
-When you nest navigators, the navigation prop of the screen is a combination of multiple navigation props. For example, if we have a tab inside a stack, the `navigation` prop will have both `jumpTo` (from the tab navigator) and `push` (from the stack navigator). To make it easier to combine types from multiple navigators, you can use the `CompositeScreenProps` type:
+When you nest navigators, the navigation prop of the screen is a combination of multiple navigation props. For example, if we have a tab inside a stack, the `navigation` prop will have both [`jumpTo`](tab-actions.md#jumpto) (from the tab navigator) and [`push`](stack-actions.md#push) (from the stack navigator). To make it easier to combine types from multiple navigators, you can use the `CompositeScreenProps` type.
+
+For example, if we have a `Profile` in a navigator, nested inside `Account` screen of a stack navigator, we can combine the types as follows:
 
 ```ts
 import type { CompositeScreenProps } from '@react-navigation/native';
@@ -180,20 +182,23 @@ import type { StackScreenProps } from '@react-navigation/stack';
 
 type ProfileScreenProps = CompositeScreenProps<
   BottomTabScreenProps<TabParamList, 'Profile'>,
-  StackScreenProps<StackParamList>
+  StackScreenProps<StackParamList, 'Account'>
 >;
 ```
 
-The `CompositeScreenProps` type takes 2 parameters, first parameter is the type of props for the primary navigation (type for the navigator that owns this screen, in our case the tab navigator which contains the `Profile` screen) and second parameter is the type of props for secondary navigation (type for a parent navigator). The primary type should always have the screen's route name as its second parameter.
+The `CompositeScreenProps` type takes 2 parameters:
+
+- The first parameter is the type for the navigator that owns this screen, in our case the tab navigator which contains the `Profile` screen
+- The second parameter is the type of props for a parent navigator, in our case the stack navigator which contains the `Account` screen
 
-For multiple parent navigators, this secondary type should be nested:
+For multiple parent navigators, this second parameter can nest another `CompositeScreenProps`:
 
 ```ts
 type ProfileScreenProps = CompositeScreenProps<
   BottomTabScreenProps<TabParamList, 'Profile'>,
   CompositeScreenProps<
-    StackScreenProps<StackParamList>,
-    DrawerScreenProps<DrawerParamList>
+    StackScreenProps<StackParamList, 'Account'>,
+    DrawerScreenProps<DrawerParamList, 'Home'>
   >
 >;
 ```
@@ -207,7 +212,7 @@ import type { StackNavigationProp } from '@react-navigation/stack';
 
 type ProfileScreenNavigationProp = CompositeNavigationProp<
   BottomTabNavigationProp<TabParamList, 'Profile'>,
-  StackNavigationProp<StackParamList>
+  StackNavigationProp<StackParamList, 'Account'>
 >;
 ```
 
@@ -358,7 +363,7 @@ export type HomeTabParamList = {
 export type HomeTabScreenProps<T extends keyof HomeTabParamList> =
   CompositeScreenProps<
     BottomTabScreenProps<HomeTabParamList, T>,
-    RootStackScreenProps<keyof RootStackParamList>
+    RootStackScreenProps<keyof RootStackParamList, 'Home'>
   >;
 
 declare global {

versioned_docs/version-7.x/typescript.md

@@ -319,7 +319,9 @@ type TabParamList = {
 
 ### Combining navigation props
 
-When you nest navigators, the navigation prop of the screen is a combination of multiple navigation props. For example, if we have a tab inside a stack, the `navigation` prop will have both [`jumpTo`](tab-actions.md#jumpto) (from the tab navigator) and [`push`](stack-actions.md#push) (from the stack navigator). To make it easier to combine types from multiple navigators, you can use the `CompositeScreenProps` type:
+When you nest navigators, the navigation prop of the screen is a combination of multiple navigation props. For example, if we have a tab inside a stack, the `navigation` prop will have both [`jumpTo`](tab-actions.md#jumpto) (from the tab navigator) and [`push`](stack-actions.md#push) (from the stack navigator). To make it easier to combine types from multiple navigators, you can use the `CompositeScreenProps` type.
+
+For example, if we have a `Profile` in a navigator, nested inside `Account` screen of a stack navigator, we can combine the types as follows:
 
 ```ts
 import type { CompositeScreenProps } from '@react-navigation/native';
@@ -328,20 +330,23 @@ import type { StackScreenProps } from '@react-navigation/stack';
 
 type ProfileScreenProps = CompositeScreenProps<
   BottomTabScreenProps<TabParamList, 'Profile'>,
-  StackScreenProps<StackParamList>
+  StackScreenProps<StackParamList, 'Account'>
 >;
 ```
 
-The `CompositeScreenProps` type takes 2 parameters, the first parameter is the type of props for the primary navigation (type for the navigator that owns this screen, in our case the tab navigator which contains the `Profile` screen) and the second parameter is the type of props for secondary navigation (type for a parent navigator). The primary type should always have the screen's route name as its second parameter.
+The `CompositeScreenProps` type takes 2 parameters:
+
+- The first parameter is the type for the navigator that owns this screen, in our case the tab navigator which contains the `Profile` screen
+- The second parameter is the type of props for a parent navigator, in our case the stack navigator which contains the `Account` screen
 
-For multiple parent navigators, this secondary type should be nested:
+For multiple parent navigators, this second parameter can nest another `CompositeScreenProps`:
 
 ```ts
 type ProfileScreenProps = CompositeScreenProps<
   BottomTabScreenProps<TabParamList, 'Profile'>,
   CompositeScreenProps<
-    StackScreenProps<StackParamList>,
-    DrawerScreenProps<DrawerParamList>
+    StackScreenProps<StackParamList, 'Account'>,
+    DrawerScreenProps<DrawerParamList, 'Home'>
   >
 >;
 ```
@@ -355,7 +360,7 @@ import type { StackNavigationProp } from '@react-navigation/stack';
 
 type ProfileScreenNavigationProp = CompositeNavigationProp<
   BottomTabNavigationProp<TabParamList, 'Profile'>,
-  StackNavigationProp<StackParamList>
+  StackNavigationProp<StackParamList, 'Account'>
 >;
 ```
 
@@ -519,7 +524,7 @@ export type HomeTabParamList = {
 export type HomeTabScreenProps<T extends keyof HomeTabParamList> =
   CompositeScreenProps<
     BottomTabScreenProps<HomeTabParamList, T>,
-    RootStackScreenProps<keyof RootStackParamList>
+    RootStackScreenProps<keyof RootStackParamList, 'Home'>
   >;
 
 declare global {