Update documentation for custom navigators

Author: satya164

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

@@ -169,17 +169,9 @@ import {
 
 // ...
 
-export function createMyNavigator(config) {
-  return createNavigatorFactory(TabNavigator)(config);
-}
+export const createMyNavigator = createNavigatorFactory(MyNavigator);
 ```
 
-:::note
-
-We can also do `export const createMyNavigator = createNavigatorFactory(MyNavigator)` directly instead of wrapping in another function. However, the wrapper function is necessary to have proper [TypeScript support](#type-checking-navigators) for the navigator.
-
-:::
-
 Then it can be used like this:
 
 ```js static2dynamic
@@ -225,22 +217,17 @@ import {
 } from 'react-native';
 import {
   createNavigatorFactory,
+  createScreenFactory,
   CommonActions,
   type DefaultNavigatorOptions,
+  type NavigationProp,
   type NavigatorTypeBagBase,
   type ParamListBase,
-  type StaticConfig,
-  type StaticParamList,
-  type StaticScreenConfig,
-  type StaticScreenConfigLinking,
-  type StaticScreenConfigScreen,
   type TabActionHelpers,
   type TabNavigationState,
   TabRouter,
   type TabRouterOptions,
-  type TypedNavigator,
   useNavigationBuilder,
-  type NavigationProp,
 } from '@react-navigation/native';
 
 // Additional props accepted by the view
@@ -347,49 +334,29 @@ function TabNavigator({ tabBarStyle, contentStyle, ...rest }: Props) {
   );
 }
 
-// Types required for type-checking the navigator
-type MyTabTypeBag<ParamList extends {}> = {
-  ParamList: ParamList;
-  State: TabNavigationState<ParamList>;
+// Type bag used for type-checking the navigator
+export interface MyTabTypeBag extends NavigatorTypeBagBase {
+  State: TabNavigationState<this['ParamList']>;
   ScreenOptions: MyNavigationOptions;
   EventMap: MyNavigationEventMap;
-  NavigationList: {
-    [RouteName in keyof ParamList]: MyNavigationProp<ParamList, RouteName>;
-  };
+  ActionHelpers: TabActionHelpers<this['ParamList']>;
   Navigator: typeof TabNavigator;
-};
-
-// The factory function with overloads for static and dynamic configuration
-export function createMyNavigator<
-  const ParamList extends ParamListBase,
->(): TypedNavigator<MyTabTypeBag<ParamList>, undefined>;
-export function createMyNavigator<
-  const Config extends StaticConfig<MyTabTypeBag<ParamListBase>>,
->(
-  config: Config
-): TypedNavigator<MyTabTypeBag<StaticParamList<{ config: Config }>>, Config>;
-export function createMyNavigator(config?: unknown) {
-  return createNavigatorFactory(TabNavigator)(config);
 }
 
+// The factory function for creating a navigator
+export const createMyNavigator =
+  createNavigatorFactory<MyTabTypeBag>(TabNavigator);
+
 // Helper function for creating screen config with proper types for static configuration
-export function createMyScreen<
-  const Linking extends StaticScreenConfigLinking,
-  const Screen extends StaticScreenConfigScreen,
->(
-  config: StaticScreenConfig<
-    Linking,
-    Screen,
-    TabNavigationState<ParamListBase>,
-    MyNavigationOptions,
-    MyNavigationEventMap,
-    MyNavigationProp<ParamListBase>
-  >
-) {
-  return config;
-}
+export const createMyScreen = createScreenFactory<MyTabTypeBag>();
 ```
 
+:::info
+
+The type bag must use an `interface` instead of `type` for `this` to work. It also needs to be exported in the public API for type inference to work.
+
+:::
+
 ## 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:

versioned_docs/version-8.x/upgrading-from-7.x.md

@@ -165,9 +165,9 @@ This is technically not a breaking change. It's not required to use this API and
 
 See [Static configuration docs](static-configuration.md#createxscreen) for more details.
 
-#### Custom navigators now require overloads for types
+#### Custom navigators have a simpler type API
 
-To work with the reworked TypeScript types, custom navigators now need to provide overloads for static and dynamic configuration APIs, and an additional API to create screen config.
+To work with the reworked TypeScript types, the type API for custom navigators has been updated. The new API uses an interface that extends `NavigatorTypeBagBase` and a pair of factory helpers - `createNavigatorFactory` and `createScreenFactory`:
 
 ```diff lang=ts
 - export function createMyNavigator<
@@ -192,54 +192,20 @@ To work with the reworked TypeScript types, custom navigators now need to provid
 - >(config?: Config): TypedNavigator<TypeBag, Config> {
 -   return createNavigatorFactory(MyNavigator)(config);
 - }
-+ type MyTypeBag<ParamList extends {}> = {
-+   ParamList: ParamList;
-+   State: TabNavigationState<ParamList>;
++ export interface MyTypeBag extends NavigatorTypeBagBase {
++   State: TabNavigationState<this['ParamList']>;
 +   ScreenOptions: MyNavigationOptions;
 +   EventMap: MyNavigationEventMap;
-+   NavigationList: {
-+     [RouteName in keyof ParamList]: MyNavigationProp<
-+       ParamList,
-+       RouteName
-+     >;
-+   };
++   ActionHelpers: TabActionHelpers<this['ParamList']>;
 +   Navigator: typeof MyNavigator;
-+ };
-+
-+ export function createMyNavigator<
-+   const ParamList extends ParamListBase,
-+ >(): TypedNavigator<MyTypeBag<ParamList>, undefined>;
-+ export function createMyNavigator<
-+   const Config extends StaticConfig<MyTypeBag<ParamListBase>>,
-+ >(
-+   config: Config
-+ ): TypedNavigator<
-+   MyTypeBag<StaticParamList<{ config: Config }>>,
-+   Config
-+ >;
-+ export function createMyNavigator(config?: unknown) {
-+   return createNavigatorFactory(MyNavigator)(config);
-+ }
-
-+ export function createMyScreen<
-+  const Linking extends StaticScreenConfigLinking,
-+  const Screen extends StaticScreenConfigScreen,
-+ >(
-+   config: StaticScreenConfig<
-+     Linking,
-+     Screen,
-+     TabNavigationState<ParamListBase>,
-+     MyNavigationOptions,
-+     MyNavigationEventMap,
-+     MyNavigationProp<ParamListBase>
-+   >
-+ ) {
-+   return config;
 + }
++
++ export const createMyNavigator =
++   createNavigatorFactory<MyTypeBag>(MyNavigator);
++
++ export const createMyScreen = createScreenFactory<MyTypeBag>();
 ```
 
-It's a bit verbose, but we don't have a better way due to limitations of TypeScript.
-
 See [Custom navigators](custom-navigators.md) for more details.
 
 ### Changes to navigators