Update custom navigator docs

Author: satya164

versioned_docs/version-7.x/custom-navigators.md

@@ -7,11 +7,11 @@ sidebar_label: Custom navigators
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-In essence, a navigator is a React component that takes a set of screens and options, and renders them based on its [navigation state](navigation-state.md), generally with additional UI such as headers, tab bars, or drawers.
+In essence, a navigator is a React component that takes a set of [screens](screen.md) and options, and renders them based on its [navigation state](navigation-state.md), generally with additional UI such as [headers](headers.md), [tab bars](bottom-tab-navigator.md), or [drawers](drawer-navigator.md).
 
 React Navigation provides a few built-in navigators, but they might not always fit your needs if you want a very custom behavior or UI. In such cases, you can build your own custom navigators using React Navigation's APIs.
 
-A custom navigator behaves just like a built-in navigator, and can be used in the same way. This means you can define screens the same way, use [route](route-object.md) and [navigation](navigation-object.md) objects in your screens, and navigate between screens with familiar API. The navigator will also be able to handle deep linking, state persistence, and other features that built-in navigators support.
+A custom navigator behaves just like a built-in navigator, and can be used in the same way. This means you can define screens the same way, use [route](route-object.md) and [navigation](navigation-object.md) objects in your screens, and navigate between screens with familiar API. The navigator will also be able to handle [deep linking](deep-linking.md), [state persistence](state-persistence.md), and other features that built-in navigators support.
 
 ## Overview
 
@@ -48,27 +48,27 @@ Now, we have an already working navigator, even though it doesn't do anything sp
 Let's break this down:
 
 - We define a `MyNavigator` component that contains our navigator logic. This is the component that's rendered when you render the navigator in your app with the `createMyNavigator` factory function.
-- We use the `useNavigationBuilder` hook and pass it [`StackRouter`](custom-routers.md#built-in-routers), which would make our navigator behave like a stack navigator. Any other router such as `TabRouter`, `DrawerRouter`, or a custom router can be used here as well.
+- We use the `useNavigationBuilder` hook and pass it [`StackRouter`](custom-routers.md#built-in-routers), which would make our navigator behave like a stack navigator. Any other router such as `TabRouter`, `DrawerRouter`, or a [custom router](custom-routers.md) can be used here as well.
 - The hook returns the [navigation state](navigation-state.md) in the `state` property. This is the current state of the navigator. There's also a `descriptors` object which contains the data and helpers for each screen in the navigator.
 - We get the focused route from the state with `state.routes[state.index]` - as `state.index` is the index of the currently focused route in the `state.routes` array.
 - Then we get the corresponding descriptor for the focused route with `descriptors[focusedRoute.key]` and call the `render()` method on it to get the React element for the screen.
 - The content of the navigator is wrapped in `NavigationContent` to provide appropriate context and wrappers.
 
 With this, we have a basic stack navigator that renders only the focused screen. Unlike the built-in stack navigator, this doesn't keep unfocused screens rendered. But you can loop through `state.routes` and render all of the screens if you want to keep them mounted. You can also read `descriptor.options` to get the [options](screen-options.md) to handle the screen's title, header, and other options.
 
-This also doesn't have any additional UI apart from the screen content. There are no gestures or animations. So you're free to add any additional UI, gestures, animations etc. as needed. You can also layout the screens in any way you want, such as rendering them side-by-side or in a grid, instead of stacking them on top of each other like the built-in stack navigator does.
+The navigator only renders what's written in the component and doesn't have any additional UI apart from the screen content. There are no gestures or animations. So you're free to add any additional UI, gestures, animations etc. as needed. You can also layout the screens in any way you want, such as rendering them side-by-side or in a grid, instead of stacking them on top of each other like the built-in stack navigator does.
 
 You can see a more complete example of a custom navigator later in this document.
 
 ## API Definition
 
 ### `useNavigationBuilder`
 
-This hook contains the core logic of a navigator, and is responsible for storing and managing the [navigation state](navigation-state.md). It takes a [router](custom-routers.md) as an argument to know how to handle various navigation actions. It then returns the state and helper methods for the navigator component to use.
+This hook contains the core logic of a navigator, and is responsible for storing and managing the [navigation state](navigation-state.md). It takes a [router](custom-routers.md) as an argument to know how to handle various [navigation actions](navigation-actions.md). It then returns the state and helper methods for the navigator component to use.
 
 It accepts the following arguments:
 
-- `createRouter` - A factory method which returns a router object (e.g. `StackRouter`, `TabRouter`).
+- `createRouter` - A factory method which returns a [router](custom-routers.md) object (e.g. `StackRouter`, `TabRouter`).
 - `options` - Options for the hook and the router. The navigator should forward its props here so that user can provide props to configure the navigator. By default, the following options are accepted:
   - `children` (required) - The `children` prop should contain route configurations as `Screen` components.
   - `screenOptions` - The `screenOptions` prop should contain default options for all of the screens.
@@ -79,7 +79,7 @@ It accepts the following arguments:
 The hook returns an object with following properties:
 
 - `state` - The [navigation state](navigation-state.md) for the navigator. The component can take this state and decide how to render it.
-- `navigation` - The navigation object containing various helper methods for the navigator to manipulate the [navigation state](navigation-state.md). This isn't the same as the navigation object for the screen and includes some helpers such as `emit` to emit events to the screens.
+- `navigation` - The [navigation object](navigation-object.md) containing various helper methods for the navigator to manipulate the [navigation state](navigation-state.md). This isn't the same as the navigation object for the screen and includes some helpers such as `emit` to emit [events](navigation-events.md) to the screens.
 - `descriptors` - This is an object containing descriptors for each route with the route keys as its properties. The descriptor for a route can be accessed by `descriptors[route.key]`. Each descriptor contains the following properties:
   - `navigation` - The navigation object for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive `navigation` prop as well, such as a header component.
   - `options` - A getter which returns the options such as `title` for the screen if they are specified.
@@ -147,7 +147,7 @@ function TabNavigator({ tabBarStyle, contentStyle, ...rest }) {
 }
 ```
 
-The `navigation` object for navigators also has an `emit` method to emit custom events to the child screens. The usage looks like this:
+The `navigation` object for navigators also has an `emit` method to emit [custom events](navigation-events.md) to the child screens. The usage looks like this:
 
 ```js
 navigation.emit({
@@ -163,7 +163,9 @@ The `target` property determines the screen that will receive the event. If the
 
 ### `createNavigatorFactory`
 
-This `createNavigatorFactory` function is used to create a function that will `Navigator` and `Screen` pair. Custom navigators need to wrap the navigator component in `createNavigatorFactory` before exporting.
+This `createNavigatorFactory` function is used to create a navigator factory function, which creates `Navigator` and `Screen` pair for the dynamic configuration or navigator objects for static configuration.
+
+So custom navigators need to wrap the navigator component in `createNavigatorFactory` before exporting to make it useable.
 
 Example:
 
@@ -267,7 +269,8 @@ type MyNavigationEventMap = {
 };
 
 // The type of the navigation object for each screen
-type MyNavigationProp<
+// Needed for manual annotation of the navigation objects
+export type MyNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = keyof ParamList,
   NavigatorID extends string | undefined = undefined,
@@ -295,6 +298,7 @@ type Props = DefaultNavigatorOptions<
 
 function TabNavigator({ tabBarStyle, contentStyle, ...rest }: Props) {
   const { state, navigation, descriptors, NavigationContent } =
+    // Generic parameters containing state, options, actions, events etc. types.
     useNavigationBuilder<
       TabNavigationState<ParamListBase>,
       TabRouterOptions,
@@ -391,7 +395,7 @@ export function createMyNavigator<
 
 ## Extending Navigators
 
-All of the built-in navigators export their views, which we can reuse and build additional functionality on top of them. For example, if we want to re-build the bottom tab navigator, we need the following code:
+All of the built-in navigators export their views, which we can reuse and build additional functionality on top of them. For example, if we want to re-build the [bottom tab navigator](bottom-tab-navigator.md), we need the following code:
 
 ```js
 import * as React from 'react';
@@ -402,7 +406,7 @@ import {
 } from '@react-navigation/native';
 import { BottomTabView } from '@react-navigation/bottom-tabs';
 
-function BottomTabNavigator({
+function MyBottomTabNavigator({
   initialRouteName,
   children,
   layout,
@@ -436,11 +440,11 @@ function BottomTabNavigator({
 }
 
 export function createMyNavigator(config) {
-  return createNavigatorFactory(BottomTabNavigator)(config);
+  return createNavigatorFactory(MyBottomTabNavigator)(config);
 }
 ```
 
-Now, we can customize it to add additional functionality or change the behavior. For example, use a [custom router](custom-routers.md) instead of the default `TabRouter`:
+Now, we can customize it to add additional functionality or change the behavior. For example, use a [custom router](custom-routers.md) instead of the default [`TabRouter`](custom-routers.md#built-in-routers):
 
 ```js
 import MyRouter from './MyRouter';