Skip to content

Commit d6e3d54

Browse files
satya164satya164
committed
Update the TS related docs
1 parent c34905d commit d6e3d54

File tree

1 file changed

+60
-83
lines changed

1 file changed

+60
-83
lines changed

‎versioned_docs/version-6.x/typescript.md

Lines changed: 60 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -54,83 +54,27 @@ This will provide type checking and intelliSense for props of the `Navigator` an
5454

5555
### Type checking screens
5656

57-
To type check our screens, we need to annotate the `navigation` prop and the `route` prop received by a screen.
57+
To type check our screens, we need to annotate the `navigation` prop and the `route` prop received by a screen. The navigator packages in React Navigation export a generic types to define types for both the `navigation` and `route` props from the corresponding navigator.
5858

59-
To annotate the `navigation` prop, we need to import the corresponding type from the navigator. For example, `StackNavigationProp` for `@react-navigation/stack`:
59+
For example, you can use `NativeStackScreenProps` for the Native Stack Navigator.
6060

6161
```tsx
62-
import { StackNavigationProp } from '@react-navigation/stack';
63-
64-
type ProfileScreenNavigationProp = StackNavigationProp<
65-
RootStackParamList,
66-
'Profile'
67-
>;
68-
69-
type Props = {
70-
navigation: ProfileScreenNavigationProp;
71-
};
72-
```
73-
74-
The type for the navigation prop takes 2 generics, the param list object we defined earlier, and the name of the current route. 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 when you call `setParams`.
75-
76-
Similarly, you can import `DrawerNavigationProp` from `@react-navigation/drawer`, `BottomTabNavigationProp` from `@react-navigation/bottom-tabs` etc.
77-
78-
To annotate the `route` prop, we need to use the `RouteProp` type from `@react-navigation/native`:
79-
80-
```tsx
81-
import { RouteProp } from '@react-navigation/native';
82-
83-
type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
84-
85-
type Props = {
86-
route: ProfileScreenRouteProp;
87-
};
88-
```
89-
90-
This allows us to type check the route object, such as `route.params`.
91-
92-
To summarize:
93-
94-
```tsx
95-
import { RouteProp } from '@react-navigation/native';
96-
import { StackNavigationProp } from '@react-navigation/stack';
62+
import { NativeStackScreenProps } from '@react-navigation/native-stack';
9763

9864
type RootStackParamList = {
9965
Home: undefined;
10066
Profile: { userId: string };
10167
Feed: { sort: 'latest' | 'top' } | undefined;
10268
};
10369

104-
type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
105-
106-
type ProfileScreenNavigationProp = StackNavigationProp<
107-
RootStackParamList,
108-
'Profile'
109-
>;
110-
111-
type Props = {
112-
route: ProfileScreenRouteProp;
113-
navigation: ProfileScreenNavigationProp;
114-
};
70+
type Props = NativeStackScreenProps<RootStackParamList, 'Profile'>;
11571
```
11672

117-
Alternatively, you can also import a generic type to define types for both the `navigation` and `route` props from the corresponding navigator:
73+
The type takes 2 generics, the param list object we defined earlier, and the name of the current route. 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`.
11874

119-
```tsx
120-
import { StackScreenProps } from '@react-navigation/stack';
75+
Similarly, you can import `StackScreenProps` for `@react-navigation/stack`, `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` and so on.
12176

122-
type RootStackParamList = {
123-
Home: undefined;
124-
Profile: { userId: string };
125-
Feed: { sort: 'latest' | 'top' } | undefined;
126-
};
127-
128-
type Props = StackScreenProps<RootStackParamList, 'Profile'>;
129-
```
130-
131-
Similarly, you can import `DrawerScreenProps` from `@react-navigation/drawer`, `BottomTabScreenProps` from `@react-navigation/bottom-tabs` etc.
132-
133-
Then you can use the `Props` type to annotate your component.
77+
Then you can use the `Props` type you defined above to annotate your component.
13478

13579
For function components:
13680

@@ -150,6 +94,37 @@ class ProfileScreen extends React.Component<Props> {
15094
}
15195
```
15296

97+
You can get the types for `navigation` and `route` from the `Props` type as follows:
98+
99+
```ts
100+
type ProfileScreenNavigationProp = Props['navigation'];
101+
102+
type ProfileScreenRouteProp = Props['route'];
103+
```
104+
105+
Alternatively, you can also annotate the `navigation` and `route` props separately.
106+
107+
To get the type for the `navigation` prop, we need to import the corresponding type from the navigator. For example, `NativeStackNavigationProp` for `@react-navigation/native-stack`:
108+
109+
```tsx
110+
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
111+
112+
type ProfileScreenNavigationProp = NativeStackNavigationProp<
113+
RootStackParamList,
114+
'Profile'
115+
>;
116+
```
117+
118+
Similarly, you can import `StackNavigationProp` from `@react-navigation/stack`, `DrawerNavigationProp` from `@react-navigation/drawer`, `BottomTabNavigationProp` from `@react-navigation/bottom-tabs` etc.
119+
120+
To get the type for the `route` prop, we need to use the `RouteProp` type from `@react-navigation/native`:
121+
122+
```tsx
123+
import { RouteProp } from '@react-navigation/native';
124+
125+
type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
126+
```
127+
153128
We recommend creating a separate `types.tsx` file where you keep the types and import them in your component files instead of repeating them in each file.
154129

155130
### Nesting navigators
@@ -178,43 +153,43 @@ type TabParamList = {
178153

179154
#### Combining navigation props
180155

181-
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 navigator, you can use the `CompositeNavigationProp` type:
156+
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:
182157

183158
```ts
184-
import { CompositeNavigationProp } from '@react-navigation/native';
185-
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
186-
import { StackNavigationProp } from '@react-navigation/stack';
159+
import { CompositeScreenProps } from '@react-navigation/native';
160+
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
161+
import { StackScreenProps } from '@react-navigation/stack';
187162

188-
type ProfileScreenNavigationProp = CompositeNavigationProp<
189-
BottomTabNavigationProp<TabParamList, 'Profile'>,
190-
StackNavigationProp<StackParamList>
163+
type ProfileScreenNavigationProp = CompositeScreenProps<
164+
BottomTabScreenProps<TabParamList, 'Profile'>,
165+
StackScreenProps<StackParamList>
191166
>;
192167
```
193168

194-
The `CompositeNavigationProp` type takes 2 parameters, first parameter is the primary navigation type (type for the navigator that owns this screen, in our case the tab navigator which contains the `Profile` screen) and second parameter is the secondary navigation type (type for a parent navigator). The primary navigation type should always have the screen's route name as it's second parameter.
169+
The `CompositeScreenProps` type takes 2 parameters, first parameter is the type of props for the primary navigation (type for the navigator that owns this screen, in our case the tab navigator which contains the `Profile` screen) and second parameter is the type of props for secondary navigation (type for a parent navigator). The primary type should always have the screen's route name as it's second parameter.
195170

196171
For multiple parent navigators, this secondary type should be nested:
197172

198173
```ts
199-
type ProfileScreenNavigationProp = CompositeNavigationProp<
200-
BottomTabNavigationProp<TabParamList, 'Profile'>,
201-
CompositeNavigationProp<
202-
StackNavigationProp<StackParamList>,
203-
DrawerNavigationProp<DrawerParamList>
174+
type ProfileScreenNavigationProp = CompositeScreenProps<
175+
BottomTabScreenProps<TabParamList, 'Profile'>,
176+
CompositeScreenProps<
177+
StackScreenProps<StackParamList>,
178+
DrawerScreenProps<DrawerParamList>
204179
>
205180
>;
206181
```
207182

208-
If you're using helpers such as `StackScreenProps`, you can use `CompositeScreenProps` to combine them:
183+
If annotating the `navigation` prop separately, you can use `CompositeNavigationProp` instead. The usage is similar to `CompositeScreenProps`:
209184

210185
```ts
211-
import { CompositeScreenProps } from '@react-navigation/native';
212-
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
213-
import { StackScreenProps } from '@react-navigation/stack';
186+
import { CompositeNavigationProp } from '@react-navigation/native';
187+
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
188+
import { StackNavigationProp } from '@react-navigation/stack';
214189

215-
type ProfileScreenNavigationProp = CompositeScreenProps<
216-
BottomTabScreenProps<TabParamList, 'Profile'>,
217-
StackScreenProps<StackParamList>
190+
type ProfileScreenNavigationProp = CompositeNavigationProp<
191+
BottomTabNavigationProp<TabParamList, 'Profile'>,
192+
StackNavigationProp<StackParamList>
218193
>;
219194
```
220195

@@ -254,6 +229,8 @@ const options: StackNavigationOptions = {
254229

255230
Similarly, you can import `DrawerNavigationOptions` from `@react-navigation/drawer`, `BottomTabNavigationOptions` from `@react-navigation/bottom-tabs` etc.
256231

232+
When using the function form of `options` and `screenOptions`, you can annotate the arguments with the same type you used to annotate the `navigation` and `route` props.
233+
257234
### Annotating `ref` on `NavigationContainer`
258235

259236
If you use the `createNavigationContainerRef()` method to create the ref, you can annotate it to type-check navigation actions:

0 commit comments

Comments
 (0)