diff --git a/versioned_docs/version-6.x/typescript.md b/versioned_docs/version-6.x/typescript.md index 0d4a2162af..75bbdc3b39 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` 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`. +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` 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 diff --git a/versioned_docs/version-7.x/navigation-container.md b/versioned_docs/version-7.x/navigation-container.md index e4f7e7125a..cefab489ba 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 f2acb02974..1f95d0f348 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 8bfa4f242c..67e7a97a42 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'; @@ -60,11 +60,11 @@ 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 -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`. +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,7 +463,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`](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 @@ -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'; diff --git a/versioned_docs/version-7.x/use-navigation.md b/versioned_docs/version-7.x/use-navigation.md index cc30ac0b58..b0a6e35396 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 2a3ecba874..05cba0813e 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