Update docs for typed hooks for dynamic config

Author: satya164

versioned_docs/version-7.x/from-expo-router.md

@@ -107,7 +107,7 @@ React Navigation starts with the navigation tree:
 
    type RootStackType = typeof RootStack;
 
-   declare module '@react-navigation/core' {
+   declare module '@react-navigation/native' {
      interface RootNavigator extends RootStackType {}
    }
    ```
@@ -500,7 +500,7 @@ export default function App() {
 
 type RootStackType = typeof RootStack;
 
-declare module '@react-navigation/core' {
+declare module '@react-navigation/native' {
   interface RootNavigator extends RootStackType {}
 }
 ```

versioned_docs/version-7.x/static-vs-dynamic.md

@@ -618,7 +618,7 @@ const RootStack = createNativeStackNavigator({
 
 type RootStackType = typeof RootStack;
 
-declare module '@react-navigation/core' {
+declare module '@react-navigation/native' {
   interface RootNavigator extends RootStackType {}
 }
 ```

versioned_docs/version-7.x/typescript.md

@@ -35,7 +35,7 @@ There are 2 steps to configure TypeScript with the static API:
    }
    ```
 
-2. Declare a module augmentation for `@react-navigation/core` and extend the `RootNavigator` interface with the type of your root navigator.
+2. Declare a module augmentation for `@react-navigation/native` and extend the `RootNavigator` interface with the type of your root navigator.
 
    ```ts
    const HomeTabs = createBottomTabNavigator({
@@ -55,7 +55,7 @@ There are 2 steps to configure TypeScript with the static API:
    type RootStackType = typeof RootStack;
 
    // highlight-start
-   declare module '@react-navigation/core' {
+   declare module '@react-navigation/native' {
      interface RootNavigator extends RootStackType {}
    }
    // highlight-end
@@ -501,14 +501,14 @@ const navigationRef =
 
 Instead of manually annotating these APIs, you can specify the type of your root navigator, which will be used to infer the default types.
 
-To do this, you can use module augmentation for `@react-navigation/core` and extend the `RootNavigator` interface with the type of your root navigator:
+To do this, you can use module augmentation for `@react-navigation/native` and extend the `RootNavigator` interface with the type of your root navigator:
 
 ```ts
 // highlight-next-line
 type RootStackType = typeof RootStack;
 
 // highlight-start
-declare module '@react-navigation/core' {
+declare module '@react-navigation/native' {
   interface RootNavigator extends RootStackType {}
 }
 // highlight-end
@@ -571,7 +571,7 @@ function App() {
 
 type RootStackType = typeof RootStack;
 
-declare module '@react-navigation/core' {
+declare module '@react-navigation/native' {
   interface RootNavigator extends RootStackType {}
 }
 ```

versioned_docs/version-8.x/combine-static-with-dynamic.md

@@ -44,14 +44,14 @@ Here, `FeedScreen` is a component that renders a bottom tab navigator and is def
 ```js
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
-const Tab = createBottomTabNavigator();
+const FeedTabs = createBottomTabNavigator();
 
 function FeedScreen() {
   return (
-    <Tab.Navigator>
-      <Tab.Screen name="Latest" component={LatestScreen} />
-      <Tab.Screen name="Popular" component={PopularScreen} />
-    </Tab.Navigator>
+    <FeedTabs.Navigator>
+      <FeedTabs.Screen name="Latest" component={LatestScreen} />
+      <FeedTabs.Screen name="Popular" component={PopularScreen} />
+    </FeedTabs.Navigator>
   );
 }
 ```
@@ -96,14 +96,17 @@ import {
   StaticScreenProps,
   NavigatorScreenParams,
 } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
-type FeedParamList = {
+type FeedTabsParamList = {
   Latest: undefined;
   Popular: undefined;
 };
 
+const FeedTabs = createBottomTabNavigator<FeedTabsParamList>();
+
 // highlight-next-line
-type Props = StaticScreenProps<NavigatorScreenParams<FeedParamList>>;
+type Props = StaticScreenProps<NavigatorScreenParams<typeof FeedTabs>>;
 
 // highlight-next-line
 function FeedScreen(_: Props) {
@@ -114,10 +117,13 @@ function FeedScreen(_: Props) {
 In the above snippet:
 
 1. We first define the param list type for screens in the navigator that defines params for each screen
-2. Then we use the `NavigatorScreenParams` type to get the type of route's `params` which will include types for the nested screens
-3. Finally, we use the type of `params` with `StaticScreenProps` to define the type of the screen component
+2. Then we create the dynamic navigator with that param list
+3. Then we use the `NavigatorScreenParams` type with `typeof FeedTabs` to get the type of route's `params` which will include types for the nested screens and the concrete navigator type
+4. Finally, we use the type of `params` with `StaticScreenProps` to define the type of the screen component
 
-This is based on how we'd define the type for a screen with a nested navigator with the dynamic API. See [Type checking screens and params in nested navigator](typescript.md#type-checking-screens-and-params-in-nested-navigator).
+Using `typeof FeedTabs` lets typed hooks such as `useNavigation('Latest')`, `useRoute('Latest')`, and `useNavigationState('Latest', selector)` infer the screens inside the nested tab navigator.
+
+This is based on how we'd define the type for a screen with a nested navigator with the dynamic API. See [Specifying param types for screens](typescript.md#specifying-param-types-for-screens-dynamic).
 
 ## Dynamic root navigator, static nested navigator
 
@@ -168,21 +174,15 @@ To use the `FeedTabs` navigator for the `Feed` screen, we need to get a componen
 const FeedScreen = FeedTabs.getComponent();
 ```
 
-In addition, we can generate the TypeScript types for the `FeedTabs` navigator and use it in the types of `RootStack` without needing to write them manually:
+In addition, we can use the type of the `FeedTabs` navigator in the types of `RootStack`:
 
 ```tsx
-import {
-  StaticParamList,
-  NavigatorScreenParams,
-} from '@react-navigation/native';
-
-// highlight-next-line
-type FeedTabsParamList = StaticParamList<typeof FeedTabs>;
+import { NavigatorScreenParams } from '@react-navigation/native';
 
 type RootStackParamList = {
   Home: undefined;
   // highlight-next-line
-  Feed: NavigatorScreenParams<FeedTabsParamList>;
+  Feed: NavigatorScreenParams<typeof FeedTabs>;
 };
 ```
 

versioned_docs/version-8.x/from-expo-router.md

@@ -108,7 +108,7 @@ React Navigation starts with the navigation tree:
 
    type RootStackType = typeof RootStack;
 
-   declare module '@react-navigation/core' {
+   declare module '@react-navigation/native' {
      interface RootNavigator extends RootStackType {}
    }
    ```
@@ -503,7 +503,7 @@ export default function App() {
 
 type RootStackType = typeof RootStack;
 
-declare module '@react-navigation/core' {
+declare module '@react-navigation/native' {
   interface RootNavigator extends RootStackType {}
 }
 ```

versioned_docs/version-8.x/hello-react-navigation.md

@@ -346,7 +346,7 @@ If you're using TypeScript, you need to tell React Navigation about your root na
 ```ts
 type RootStackType = typeof RootStack;
 
-declare module '@react-navigation/core' {
+declare module '@react-navigation/native' {
   interface RootNavigator extends RootStackType {}
 }
 ```

versioned_docs/version-8.x/navigating-without-navigation-prop.md

@@ -60,9 +60,7 @@ export default function App() {
 
 In the next step, we define `RootNavigation`, which is a simple module with functions that dispatch user-defined navigation actions.
 
-```js
-// RootNavigation.js
-
+```js title="RootNavigation.js"
 import { createNavigationContainerRef } from '@react-navigation/native';
 
 export const navigationRef = createNavigationContainerRef();

versioned_docs/version-8.x/static-vs-dynamic.md

@@ -579,7 +579,7 @@ const RootStack = createNativeStackNavigator<RootStackParamList>();
 
 type RootStackType = typeof RootStack;
 
-declare module '@react-navigation/core' {
+declare module '@react-navigation/native' {
   interface RootNavigator extends RootStackType {}
 }
 
@@ -610,7 +610,7 @@ const RootStack = createNativeStackNavigator({
 
 type RootStackType = typeof RootStack;
 
-declare module '@react-navigation/core' {
+declare module '@react-navigation/native' {
   interface RootNavigator extends RootStackType {}
 }
 ```

versioned_docs/version-8.x/troubleshooting.md

@@ -467,8 +467,8 @@ This usually means that TypeScript doesn't know the route names and params for y
 
 Ensure the following:
 
-- You have configured global types for your navigator. See [specifying root navigator type](typescript.md#specify-the-root-navigators-type).
-- If you are using the dynamic API, you have provided a param list as a generic (e.g. `createStackNavigator<MyParamList>()`) and that your screen names match the keys in that param list. See [type checking the navigator](typescript.md#typechecking-the-navigator).
+- You have configured global types for your navigator. See [specifying the root navigator's type](typescript.md#specifying-the-root-navigators-type).
+- If you are using the dynamic API, you have provided a param list as a generic (e.g. `createStackNavigator<MyParamList>()`) and that your screen names match the keys in that param list. See [specifying param types for screens](typescript.md#specifying-param-types-for-screens-dynamic).
 
 ## Screens are unmounting/remounting during navigation