From 48d3a85788d666d151d2295c8df637bc1878c082 Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Fri, 9 Aug 2024 12:10:19 +0200 Subject: [PATCH 1/8] docs: added links to typescript.md --- versioned_docs/version-6.x/typescript.md | 4 ++-- versioned_docs/version-7.x/typescript.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/versioned_docs/version-6.x/typescript.md b/versioned_docs/version-6.x/typescript.md index 0d4a2162af1..d8bbdb8ea51 100755 --- a/versioned_docs/version-6.x/typescript.md +++ b/versioned_docs/version-6.x/typescript.md @@ -28,7 +28,7 @@ type RootStackParamList = { Specifying `undefined` means that the route doesn't have params. A union type with `undefined` (e.g. `SomeType | undefined`) means that params are optional. -After we have defined the mappings, we need to tell our navigator to use it. To do that, we can pass it as a generic to the `createXNavigator` functions: +After we have defined the mappings, we need to tell our navigator to use it. To do that, we can pass it as a generic to the [`createXNavigator`](static-configuration.md#createxnavigator) functions: ```tsx import { createStackNavigator } from '@react-navigation/stack'; @@ -88,7 +88,7 @@ If you have an `id` prop for your navigator, you can do: type Props = NativeStackScreenProps; ``` -This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call `setParams`. +This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). Similarly, you can import `StackScreenProps` for `@react-navigation/stack`, `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` and so on. diff --git a/versioned_docs/version-7.x/typescript.md b/versioned_docs/version-7.x/typescript.md index 8bfa4f242c5..0f60d2a1869 100755 --- a/versioned_docs/version-7.x/typescript.md +++ b/versioned_docs/version-7.x/typescript.md @@ -60,7 +60,7 @@ There are 2 steps to configure TypeScript with the static API: // highlight-end ``` - This is needed to type-check the `useNavigation` hook. + This is needed to type-check the [`useNavigation`](use-navigation.md) hook. ## Navigator specific types @@ -157,7 +157,7 @@ type RootStackParamList = { Specifying `undefined` means that the route doesn't have params. A union type with `undefined` (e.g. `SomeType | undefined`) means that params are optional. -After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the `createXNavigator` functions: +After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the [`createXNavigator`](static-configuration.md#createxnavigator) ```tsx import { createStackNavigator } from '@react-navigation/stack'; @@ -217,7 +217,7 @@ If you have an `id` prop for your navigator, you can do: type Props = NativeStackScreenProps; ``` -This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call `setParams`. +This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). Similarly, you can import `StackScreenProps` for `@react-navigation/stack`, `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` and so on. From 6223e1126f96b2163dded5e904a80420890930d6 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:50:57 +0000 Subject: [PATCH 2/8] [autofix.ci] apply automated fixes --- versioned_docs/version-7.x/typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/versioned_docs/version-7.x/typescript.md b/versioned_docs/version-7.x/typescript.md index 0f60d2a1869..289252e71dd 100755 --- a/versioned_docs/version-7.x/typescript.md +++ b/versioned_docs/version-7.x/typescript.md @@ -60,7 +60,7 @@ There are 2 steps to configure TypeScript with the static API: // highlight-end ``` - This is needed to type-check the [`useNavigation`](use-navigation.md) hook. + This is needed to type-check the [`useNavigation`](use-navigation.md) hook. ## Navigator specific types @@ -217,7 +217,7 @@ If you have an `id` prop for your navigator, you can do: type Props = NativeStackScreenProps; ``` -This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). +This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). Similarly, you can import `StackScreenProps` for `@react-navigation/stack`, `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` and so on. From f3b86bd63fa4b21ef979bac10fd9bfd00d6f07e1 Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Mon, 12 Aug 2024 12:45:24 +0200 Subject: [PATCH 3/8] docs: Fixed link error --- versioned_docs/version-6.x/typescript.md | 2 +- versioned_docs/version-7.x/typescript.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/versioned_docs/version-6.x/typescript.md b/versioned_docs/version-6.x/typescript.md index d8bbdb8ea51..ee2dc140ff7 100755 --- a/versioned_docs/version-6.x/typescript.md +++ b/versioned_docs/version-6.x/typescript.md @@ -28,7 +28,7 @@ type RootStackParamList = { Specifying `undefined` means that the route doesn't have params. A union type with `undefined` (e.g. `SomeType | undefined`) means that params are optional. -After we have defined the mappings, we need to tell our navigator to use it. To do that, we can pass it as a generic to the [`createXNavigator`](static-configuration.md#createxnavigator) functions: +After we have defined the mappings, we need to tell our navigator to use it. To do that, we can pass it as a generic to the `createXNavigator` functions: ```tsx import { createStackNavigator } from '@react-navigation/stack'; diff --git a/versioned_docs/version-7.x/typescript.md b/versioned_docs/version-7.x/typescript.md index 0f60d2a1869..080ae8999d2 100755 --- a/versioned_docs/version-7.x/typescript.md +++ b/versioned_docs/version-7.x/typescript.md @@ -157,7 +157,7 @@ type RootStackParamList = { Specifying `undefined` means that the route doesn't have params. A union type with `undefined` (e.g. `SomeType | undefined`) means that params are optional. -After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the [`createXNavigator`](static-configuration.md#createxnavigator) +After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the `createXNavigator` functions: ```tsx import { createStackNavigator } from '@react-navigation/stack'; From 0c2304a107cd2db3296bf943f1b529b759a5e32c Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Mon, 12 Aug 2024 13:32:36 +0200 Subject: [PATCH 4/8] docs: Updated links in typescript.md --- versioned_docs/version-7.x/typescript.md | 30 ++++++++++++------------ 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/versioned_docs/version-7.x/typescript.md b/versioned_docs/version-7.x/typescript.md index 23995e7c96c..f4e216dc611 100755 --- a/versioned_docs/version-7.x/typescript.md +++ b/versioned_docs/version-7.x/typescript.md @@ -14,7 +14,7 @@ React Navigation can be configured to type-check screens and their params, as we There are 2 steps to configure TypeScript with the static API: -1. Each screen component needs to specify the type of the `route.params` prop that it accepts. The `StaticScreenProps` type makes it simpler: +1. Each screen component needs to specify the type of the [`route.params`](params.md) prop that it accepts. The `StaticScreenProps` type makes it simpler: ```ts import type { StaticScreenProps } from '@react-navigation/native'; @@ -64,7 +64,7 @@ There are 2 steps to configure TypeScript with the static API: ## Navigator specific types -Generally, we recommend using the default types for the `useNavigation` prop to access the navigation object in a navigator-agnostic manner. However, if you need to use navigator-specific APIs, you need to manually annotate `useNavigation`: +Generally, we recommend using the default types for the [`useNavigation`](use-navigation.md) prop to access the navigation object in a navigator-agnostic manner. However, if you need to use navigator-specific APIs, you need to manually annotate [`useNavigation`](use-navigation.md): ```ts type BottomTabParamList = StaticParamList; @@ -78,7 +78,7 @@ type ProfileScreenNavigationProp = BottomTabNavigationProp< const navigation = useNavigation(); ``` -Note that annotating `useNavigation` this way is not type-safe since we can't guarantee that the type you provided matches the type of the navigator. +Note that annotating [`useNavigation`](use-navigation.md) this way is not type-safe since we can't guarantee that the type you provided matches the type of the navigator. ## Nesting navigator using dynamic API @@ -103,7 +103,7 @@ const RootStack = createStackNavigator({ Here, the `HomeTabs` component is defined using the dynamic API. This means that when we create the param list for the root navigator with `StaticParamList`, it won't know about the screens defined in the nested navigator. To fix this, we'd need to specify the param list for the nested navigator explicitly. -This can be done by using the type of the `route` prop that the screen component receives: +This can be done by using the type of the [`route`](route-object.md) prop that the screen component receives: ```ts type HomeTabsParamList = { @@ -157,7 +157,7 @@ type RootStackParamList = { Specifying `undefined` means that the route doesn't have params. A union type with `undefined` (e.g. `SomeType | undefined`) means that params are optional. -After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the `createXNavigator` functions: +After we have defined the mapping, we need to tell our navigator to use it. To do that, we can pass it as a generic to the [`createXNavigator`](static-configuration.md) functions: ```tsx import { createStackNavigator } from '@react-navigation/stack'; @@ -179,7 +179,7 @@ And then we can use it: ``` -This will provide type checking and intelliSense for props of the `Navigator` and `Screen` components. +This will provide type checking and intelliSense for props of the [`Navigator`](navigator.md) and [`Screen`](screen.md) components. :::note @@ -217,9 +217,9 @@ If you have an `id` prop for your navigator, you can do: type Props = NativeStackScreenProps; ``` -This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). +This allows us to type check route names and params which you're navigating using [`navigate`](navigation-object.md#navigate), [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). -Similarly, you can import `StackScreenProps` for `@react-navigation/stack`, `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` and so on. +Similarly, you can import `StackScreenProps` from [`@react-navigation/stack`](stack-navigator.md), `DrawerScreenProps` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabScreenProps` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) and so on. Then you can use the `Props` type you defined above to annotate your component. @@ -262,7 +262,7 @@ type ProfileScreenNavigationProp = NativeStackNavigationProp< >; ``` -Similarly, you can import `StackNavigationProp` from `@react-navigation/stack`, `DrawerNavigationProp` from `@react-navigation/drawer`, `BottomTabNavigationProp` from `@react-navigation/bottom-tabs` etc. +Similarly, you can import `StackNavigationProp` from [`@react-navigation/stack`](stack-navigator.md), `DrawerNavigationProp` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabNavigationProp` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) etc. To get the type for the `route` object, we need to use the `RouteProp` type from `@react-navigation/native`: @@ -300,7 +300,7 @@ 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: ```ts import type { CompositeScreenProps } from '@react-navigation/native'; @@ -349,7 +349,7 @@ Prefer [specifying a default type](#specifying-default-types-for-usenavigation-l ::: -To annotate the `navigation` object that we get from `useNavigation`, we can use a type parameter: +To annotate the `navigation` object that we get from [`useNavigation`](use-navigation.md), we can use a type parameter: ```ts const navigation = useNavigation(); @@ -364,7 +364,7 @@ Prefer using the [`route` object](route-object.md) from the screen component's p ::: -To annotate the `route` object that we get from `useRoute`, we can use a type parameter: +To annotate the `route` object that we get from [`useRoute`](use-route.md), we can use a type parameter: ```ts const route = useRoute(); @@ -463,13 +463,13 @@ declare global { The `RootParamList` interface lets React Navigation know about the params accepted by your root navigator. Here we extend the type `RootStackParamList` because that's the type of params for our stack navigator at the root. The name of this type isn't important. -Specifying this type is important if you heavily use `useNavigation`, `Link` etc. in your app since it'll ensure type-safety. It will also make sure that you have correct nesting on the `linking` prop. +Specifying this type is important if you heavily use [`useNavigation`](use-navigation.md), [`Link`](link.md) etc. in your app since it'll ensure type-safety. It will also make sure that you have correct nesting on the [`linking`](navigation-container.md#linking) prop. ## Organizing types When writing types for React Navigation, there are a couple of things we recommend to keep things organized. -1. It's good to create a separate file (e.g. `navigation/types.tsx`) that contains the types related to React Navigation. +1. It's good to create a separate file (e.g. `navigation/types.ts`) that contains the types related to React Navigation. 2. Instead of using `CompositeNavigationProp` directly in your components, it's better to create a helper type that you can reuse. 3. Specifying a global type for your root navigator would avoid manual annotations in many places. @@ -520,7 +520,7 @@ function PopularScreen({ navigation, route }: HomeTabScreenProps<'Popular'>) { } ``` -If you're using hooks such as `useRoute`, you can write: +If you're using hooks such as [`useRoute`](use-route.md), you can write: ```ts import type { HomeTabScreenProps } from './navigation/types'; From 25b5f275631e9de6a0f50e36d0715968428b26e7 Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Mon, 12 Aug 2024 13:37:05 +0200 Subject: [PATCH 5/8] docs: Updated links in typescript.md v6 --- versioned_docs/version-6.x/typescript.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/versioned_docs/version-6.x/typescript.md b/versioned_docs/version-6.x/typescript.md index ee2dc140ff7..915653fb504 100755 --- a/versioned_docs/version-6.x/typescript.md +++ b/versioned_docs/version-6.x/typescript.md @@ -50,7 +50,7 @@ And then we can use it: ``` -This will provide type checking and intelliSense for props of the `Navigator` and `Screen` components. +This will provide type checking and intelliSense for props of the [`Navigator`](navigator.md) and [`Screen`](screen.md) components. :::note @@ -88,9 +88,9 @@ If you have an `id` prop for your navigator, you can do: type Props = NativeStackScreenProps; ``` -This allows us to type check route names and params which you're navigating using `navigate`, `push` etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). +This allows us to type check route names and params which you're navigating using [`navigate`](navigation-object.md#navigate), [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). -Similarly, you can import `StackScreenProps` for `@react-navigation/stack`, `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` and so on. +Similarly, you can import `StackScreenProps` from [`@react-navigation/stack`](stack-navigator.md), `DrawerScreenProps` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabScreenProps` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) and so on. Then you can use the `Props` type you defined above to annotate your component. @@ -133,7 +133,7 @@ type ProfileScreenNavigationProp = NativeStackNavigationProp< >; ``` -Similarly, you can import `StackNavigationProp` from `@react-navigation/stack`, `DrawerNavigationProp` from `@react-navigation/drawer`, `BottomTabNavigationProp` from `@react-navigation/bottom-tabs` etc. +Similarly, you can import `StackNavigationProp` from [`@react-navigation/stack`](stack-navigator.md), `DrawerNavigationProp` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabNavigationProp` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) etc. To get the type for the `route` prop, we need to use the `RouteProp` type from `@react-navigation/native`: @@ -321,7 +321,7 @@ declare global { The `RootParamList` interface lets React Navigation know about the params accepted by your root navigator. Here we extend the type `RootStackParamList` because that's the type of params for our stack navigator at the root. The name of this type isn't important. -Specifying this type is important if you heavily use `useNavigation`, `Link` etc. in your app since it'll ensure type-safety. It will also make sure that you have correct nesting on the `linking` prop. +Specifying this type is important if you heavily use `useNavigation`, [`Link`](link.md) etc. in your app since it'll ensure type-safety. It will also make sure that you have correct nesting on the [`linking`](navigation-container.md#linking) prop. ### Organizing types From c448534d2a9f813cdb8bc8710d6132238b9b3ebb Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Tue, 13 Aug 2024 15:13:04 +0200 Subject: [PATCH 6/8] docs: Added more link to TS section --- versioned_docs/version-7.x/navigation-container.md | 2 ++ versioned_docs/version-7.x/screen-options.md | 2 ++ versioned_docs/version-7.x/typescript.md | 2 +- versioned_docs/version-7.x/use-navigation.md | 2 ++ versioned_docs/version-7.x/use-route.md | 2 ++ 5 files changed, 9 insertions(+), 1 deletion(-) diff --git a/versioned_docs/version-7.x/navigation-container.md b/versioned_docs/version-7.x/navigation-container.md index e4f7e7125ad..cefab489ba2 100644 --- a/versioned_docs/version-7.x/navigation-container.md +++ b/versioned_docs/version-7.x/navigation-container.md @@ -166,6 +166,8 @@ export default function App() { If you're using a regular ref object, keep in mind that the ref may be initially `null` in some situations (such as when linking is enabled). To make sure that the ref is initialized, you can use the [`onReady`](#onready) callback to get notified when the navigation container finishes mounting. +Check how to setup `ref` with TypeScript [here](typescript.md#annotating-ref-on-navigationcontainer). + See the [Navigating without the navigation prop](navigating-without-navigation-prop.md) guide for more details. ### Methods on the ref diff --git a/versioned_docs/version-7.x/screen-options.md b/versioned_docs/version-7.x/screen-options.md index f2acb029741..1f95d0f3487 100644 --- a/versioned_docs/version-7.x/screen-options.md +++ b/versioned_docs/version-7.x/screen-options.md @@ -11,6 +11,8 @@ Each screen can configure various aspects about how it gets presented in the nav In the [configuring the header bar](headers.md) section of the fundamentals documentation we explain the basics of how this works. Also see the [screen options resolution guide](screen-options-resolution.md) to get an idea of how they work when there are multiple navigators. +See [our docs](typescript.md#annotating-options-and-screenoptions) to learn more about how to use TypeScript with `screenOptions` and `options`. + There are 3 ways of specifying options for screens: ### `options` prop on `Screen` diff --git a/versioned_docs/version-7.x/typescript.md b/versioned_docs/version-7.x/typescript.md index f4e216dc611..67e7a97a422 100755 --- a/versioned_docs/version-7.x/typescript.md +++ b/versioned_docs/version-7.x/typescript.md @@ -469,7 +469,7 @@ Specifying this type is important if you heavily use [`useNavigation`](use-navig When writing types for React Navigation, there are a couple of things we recommend to keep things organized. -1. It's good to create a separate file (e.g. `navigation/types.ts`) that contains the types related to React Navigation. +1. It's good to create a separate file (e.g. `navigation/types.tsx`) that contains the types related to React Navigation. 2. Instead of using `CompositeNavigationProp` directly in your components, it's better to create a helper type that you can reuse. 3. Specifying a global type for your root navigator would avoid manual annotations in many places. diff --git a/versioned_docs/version-7.x/use-navigation.md b/versioned_docs/version-7.x/use-navigation.md index cc30ac0b581..b0a6e35396e 100755 --- a/versioned_docs/version-7.x/use-navigation.md +++ b/versioned_docs/version-7.x/use-navigation.md @@ -143,6 +143,8 @@ export default App; +Check how to setup `useNavigation` with TypeScript [here](typescript.md#annotating-usenavigation). + See the documentation for the [`navigation` object](navigation-object.md) for more info. ## Using with class component diff --git a/versioned_docs/version-7.x/use-route.md b/versioned_docs/version-7.x/use-route.md index 2a3ecba8744..05cba0813e8 100755 --- a/versioned_docs/version-7.x/use-route.md +++ b/versioned_docs/version-7.x/use-route.md @@ -142,6 +142,8 @@ export default App; +Check how to setup `useRoute` with TypeScript [here](typescript.md#annotating-useroute). + See the documentation for the [`route` object](route-object.md) for more info. ## Using with class component From 30c73e045636fd2528a134207f7ffe356eceee54 Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Tue, 13 Aug 2024 15:24:52 +0200 Subject: [PATCH 7/8] docs: Fixed Build pages error --- versioned_docs/version-6.x/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-6.x/typescript.md b/versioned_docs/version-6.x/typescript.md index 915653fb504..ed79e8d0cca 100755 --- a/versioned_docs/version-6.x/typescript.md +++ b/versioned_docs/version-6.x/typescript.md @@ -50,7 +50,7 @@ And then we can use it: ``` -This will provide type checking and intelliSense for props of the [`Navigator`](navigator.md) and [`Screen`](screen.md) components. +This will provide type checking and intelliSense for props of the `Navigator` and [`Screen`](screen.md) components. :::note From a47694634cf95174e4f910a9820e2ed09844a0e8 Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Wed, 14 Aug 2024 08:46:09 +0200 Subject: [PATCH 8/8] docs: FIxed Build pages error --- versioned_docs/version-6.x/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/versioned_docs/version-6.x/typescript.md b/versioned_docs/version-6.x/typescript.md index ed79e8d0cca..75bbdc3b39f 100755 --- a/versioned_docs/version-6.x/typescript.md +++ b/versioned_docs/version-6.x/typescript.md @@ -88,7 +88,7 @@ If you have an `id` prop for your navigator, you can do: type Props = NativeStackScreenProps; ``` -This allows us to type check route names and params which you're navigating using [`navigate`](navigation-object.md#navigate), [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). +This allows us to type check route names and params which you're navigating using `navigate`, [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams). Similarly, you can import `StackScreenProps` from [`@react-navigation/stack`](stack-navigator.md), `DrawerScreenProps` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabScreenProps` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) and so on.