feat: improve types for navigation state (#8980)

The commit improves the navigation state object to have more specific types.
e.g. The `routeNames` array will now have proper type instead of `string[]`

packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx

@@ -6,6 +6,7 @@ import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
+  ParamListBase,
 } from '@react-navigation/native';
 import BottomTabView from '../views/BottomTabView';
 import type {
@@ -27,7 +28,7 @@ function BottomTabNavigator({
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabRouterOptions,
     BottomTabNavigationOptions,
     BottomTabNavigationEventMap
@@ -50,7 +51,7 @@ function BottomTabNavigator({
 }
 
 export default createNavigatorFactory<
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap,
   typeof BottomTabNavigator

packages/bottom-tabs/src/types.tsx

@@ -41,7 +41,7 @@ export type BottomTabNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  TabNavigationState,
+  TabNavigationState<ParamList>,
   BottomTabNavigationOptions,
   BottomTabNavigationEventMap
 > &
@@ -148,7 +148,7 @@ export type BottomTabNavigationOptions = {
 export type BottomTabDescriptor = Descriptor<
   ParamListBase,
   string,
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   BottomTabNavigationOptions
 >;
 
@@ -244,7 +244,7 @@ export type BottomTabBarOptions = {
 };
 
 export type BottomTabBarProps<T = BottomTabBarOptions> = T & {
-  state: TabNavigationState;
+  state: TabNavigationState<ParamListBase>;
   descriptors: BottomTabDescriptorMap;
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
 };

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -3,6 +3,7 @@ import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 
 import {
   NavigationHelpersContext,
+  ParamListBase,
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
@@ -19,7 +20,7 @@ import type {
 } from '../types';
 
 type Props = BottomTabNavigationConfig & {
-  state: TabNavigationState;
+  state: TabNavigationState<ParamListBase>;
   navigation: BottomTabNavigationHelpers;
   descriptors: BottomTabDescriptorMap;
 };

packages/compat/src/createSwitchNavigator.tsx

@@ -5,14 +5,15 @@ import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
+  ParamListBase,
 } from '@react-navigation/native';
 import createCompatNavigatorFactory from './createCompatNavigatorFactory';
 
 type Props = DefaultNavigatorOptions<{}> & TabRouterOptions;
 
 function SwitchNavigator(props: Props) {
   const { state, descriptors } = useNavigationBuilder<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabRouterOptions,
     {},
     {}
@@ -22,7 +23,10 @@ function SwitchNavigator(props: Props) {
 }
 
 export default createCompatNavigatorFactory(
-  createNavigatorFactory<TabNavigationState, {}, {}, typeof SwitchNavigator>(
-    SwitchNavigator
-  )
+  createNavigatorFactory<
+    TabNavigationState<ParamListBase>,
+    {},
+    {},
+    typeof SwitchNavigator
+  >(SwitchNavigator)
 );

packages/core/src/types.tsx

@@ -256,7 +256,7 @@ export type NavigationContainerProps = {
 export type NavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string,
-  State extends NavigationState = NavigationState,
+  State extends NavigationState = NavigationState<ParamList>,
   ScreenOptions extends {} = {},
   EventMap extends EventMapBase = {}
 > = NavigationHelpersCommon<ParamList, State> & {
@@ -281,20 +281,7 @@ export type NavigationProp<
 export type RouteProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList
-> = Omit<Route<Extract<RouteName, string>>, 'params'> &
-  (undefined extends ParamList[RouteName]
-    ? Readonly<{
-        /**
-         * Params for this route
-         */
-        params?: Readonly<ParamList[RouteName]>;
-      }>
-    : Readonly<{
-        /**
-         * Params for this route
-         */
-        params: Readonly<ParamList[RouteName]>;
-      }>);
+> = Route<Extract<RouteName, string>, ParamList[RouteName]>;
 
 export type CompositeNavigationProp<
   A extends NavigationProp<ParamListBase, string, any, any>,

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -6,6 +6,7 @@ import {
   DrawerNavigationState,
   DrawerRouterOptions,
   DrawerRouter,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import DrawerView from '../views/DrawerView';
@@ -28,7 +29,7 @@ function DrawerNavigator({
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
-    DrawerNavigationState,
+    DrawerNavigationState<ParamListBase>,
     DrawerRouterOptions,
     DrawerNavigationOptions,
     DrawerNavigationEventMap
@@ -51,7 +52,7 @@ function DrawerNavigator({
 }
 
 export default createNavigatorFactory<
-  DrawerNavigationState,
+  DrawerNavigationState<ParamListBase>,
   DrawerNavigationOptions,
   DrawerNavigationEventMap,
   typeof DrawerNavigator

packages/drawer/src/types.tsx

@@ -136,7 +136,7 @@ export type DrawerNavigationOptions = {
 };
 
 export type DrawerContentComponentProps<T = DrawerContentOptions> = T & {
-  state: DrawerNavigationState;
+  state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
   /**
@@ -203,7 +203,7 @@ export type DrawerNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  DrawerNavigationState,
+  DrawerNavigationState<ParamList>,
   DrawerNavigationOptions,
   DrawerNavigationEventMap
 > &
@@ -220,7 +220,7 @@ export type DrawerScreenProps<
 export type DrawerDescriptor = Descriptor<
   ParamListBase,
   string,
-  DrawerNavigationState,
+  DrawerNavigationState<ParamListBase>,
   DrawerNavigationOptions
 >;
 

packages/drawer/src/views/DrawerItemList.tsx

@@ -3,6 +3,7 @@ import {
   CommonActions,
   DrawerActions,
   DrawerNavigationState,
+  ParamListBase,
   useLinkBuilder,
 } from '@react-navigation/native';
 import DrawerItem from './DrawerItem';
@@ -13,7 +14,7 @@ import type {
 } from '../types';
 
 type Props = Omit<DrawerContentOptions, 'contentContainerStyle' | 'style'> & {
-  state: DrawerNavigationState;
+  state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
 };

packages/drawer/src/views/DrawerView.tsx

@@ -13,6 +13,7 @@ import {
   DrawerNavigationState,
   DrawerActions,
   useTheme,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import { GestureHandlerRootView } from './GestureHandler';
@@ -31,7 +32,7 @@ import type {
 } from '../types';
 
 type Props = DrawerNavigationConfig & {
-  state: DrawerNavigationState;
+  state: DrawerNavigationState<ParamListBase>;
   navigation: DrawerNavigationHelpers;
   descriptors: DrawerDescriptorMap;
 };

packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx

@@ -6,6 +6,7 @@ import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import MaterialBottomTabView from '../views/MaterialBottomTabView';
@@ -27,7 +28,7 @@ function MaterialBottomTabNavigator({
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabRouterOptions,
     MaterialBottomTabNavigationOptions,
     MaterialBottomTabNavigationEventMap
@@ -49,7 +50,7 @@ function MaterialBottomTabNavigator({
 }
 
 export default createNavigatorFactory<
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   MaterialBottomTabNavigationOptions,
   MaterialBottomTabNavigationEventMap,
   typeof MaterialBottomTabNavigator

packages/material-bottom-tabs/src/types.tsx

@@ -27,7 +27,7 @@ export type MaterialBottomTabNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  TabNavigationState,
+  TabNavigationState<ParamList>,
   MaterialBottomTabNavigationOptions,
   MaterialBottomTabNavigationEventMap
 > &
@@ -84,7 +84,7 @@ export type MaterialBottomTabNavigationOptions = {
 export type MaterialBottomTabDescriptor = Descriptor<
   ParamListBase,
   string,
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   MaterialBottomTabNavigationOptions
 >;
 

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -9,6 +9,7 @@ import {
   useTheme,
   useLinkBuilder,
   Link,
+  ParamListBase,
 } from '@react-navigation/native';
 
 import type {
@@ -18,7 +19,7 @@ import type {
 } from '../types';
 
 type Props = MaterialBottomTabNavigationConfig & {
-  state: TabNavigationState;
+  state: TabNavigationState<ParamListBase>;
   navigation: MaterialBottomTabNavigationHelpers;
   descriptors: MaterialBottomTabDescriptorMap;
 };

packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx

@@ -6,6 +6,7 @@ import {
   TabRouter,
   TabRouterOptions,
   TabNavigationState,
+  ParamListBase,
 } from '@react-navigation/native';
 import MaterialTopTabView from '../views/MaterialTopTabView';
 import type {
@@ -26,7 +27,7 @@ function MaterialTopTabNavigator({
   ...rest
 }: Props) {
   const { state, descriptors, navigation } = useNavigationBuilder<
-    TabNavigationState,
+    TabNavigationState<ParamListBase>,
     TabRouterOptions,
     MaterialTopTabNavigationOptions,
     MaterialTopTabNavigationEventMap
@@ -48,7 +49,7 @@ function MaterialTopTabNavigator({
 }
 
 export default createNavigatorFactory<
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationEventMap,
   typeof MaterialTopTabNavigator

packages/material-top-tabs/src/types.tsx

@@ -45,7 +45,7 @@ export type MaterialTopTabNavigationProp<
 > = NavigationProp<
   ParamList,
   RouteName,
-  TabNavigationState,
+  TabNavigationState<ParamList>,
   MaterialTopTabNavigationOptions,
   MaterialTopTabNavigationEventMap
 > &
@@ -94,7 +94,7 @@ export type MaterialTopTabNavigationOptions = {
 export type MaterialTopTabDescriptor = Descriptor<
   ParamListBase,
   string,
-  TabNavigationState,
+  TabNavigationState<ParamListBase>,
   MaterialTopTabNavigationOptions
 >;
 
@@ -192,7 +192,7 @@ export type MaterialTopTabBarOptions = Partial<
 
 export type MaterialTopTabBarProps = MaterialTopTabBarOptions &
   SceneRendererProps & {
-    state: TabNavigationState;
+    state: TabNavigationState<ParamListBase>;
     navigation: NavigationHelpers<
       ParamListBase,
       MaterialTopTabNavigationEventMap

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -4,6 +4,7 @@ import {
   NavigationHelpersContext,
   TabNavigationState,
   TabActions,
+  ParamListBase,
   useTheme,
 } from '@react-navigation/native';
 
@@ -16,7 +17,7 @@ import type {
 } from '../types';
 
 type Props = MaterialTopTabNavigationConfig & {
-  state: TabNavigationState;
+  state: TabNavigationState<ParamListBase>;
   navigation: MaterialTopTabNavigationHelpers;
   descriptors: MaterialTopTabDescriptorMap;
   tabBarPosition?: 'top' | 'bottom';