Skip to content

Commit 827c1f7

Browse files
committed
Improve docs for navigator-specific types
1 parent b5947fa commit 827c1f7

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

versioned_docs/version-7.x/typescript.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,11 @@ There are 2 steps to configure TypeScript with the static API:
6969

7070
## Navigator specific types
7171

72-
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):
72+
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, e.g. `setOptions` to update navigator options, `push`, `pop`, `popTo` etc. with stacks, `openDrawer`, `closeDrawer` etc. with drawer and so on, you need to manually annotate [`useNavigation`](use-navigation.md):
7373

7474
```ts
75+
import type { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
76+
7577
type BottomTabParamList = StaticParamList<typeof BottomTabNavigator>;
7678
type ProfileScreenNavigationProp = BottomTabNavigationProp<
7779
BottomTabParamList,
@@ -83,7 +85,13 @@ type ProfileScreenNavigationProp = BottomTabNavigationProp<
8385
const navigation = useNavigation<ProfileScreenNavigationProp>();
8486
```
8587

86-
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.
88+
Similarly, you can import `NativeStackNavigationProp` from [`@react-navigation/native-stack`](native-stack-navigator.md), `StackNavigationProp` from [`@react-navigation/stack`](stack-navigator.md), `DrawerNavigationProp` from [`@react-navigation/drawer`](drawer-navigator.md) etc.
89+
90+
:::danger
91+
92+
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. So try to keep manual annotations to a minimum and use the default types instead.
93+
94+
:::
8795

8896
## Nesting navigator using dynamic API
8997

0 commit comments

Comments
 (0)