@@ -16,46 +16,51 @@ There are 2 steps to configure TypeScript with the static API:
16
16
17
17
1 . Each screen component needs to specify the type of the ` route.params ` prop that it accepts. The ` StaticScreenProps ` type makes it simpler:
18
18
19
- ``` ts
20
- import type { StaticScreenProps } from ' @react-navigation/native' ;
21
-
22
- type Props = StaticScreenProps <{
23
- username: string ;
24
- }>;
25
-
26
- function ProfileScreen({ route }: Props ) {
27
- // ...
28
- }
29
- ```
30
-
31
- 1 . Generate the ` ParamList ` type for the root navigator and specify it as the default type for the ` RootParamList ` type:
32
-
33
- ``` ts
34
- import type { StaticParamList } from ' @react-navigation/native' ;
35
-
36
- const HomeTabs = createBottomTabNavigator ({
37
- screens: {
38
- Feed: FeedScreen ,
39
- Profile: ProfileScreen ,
40
- },
41
- });
42
-
43
- const RootStack = createNativeStackNavigator ({
44
- screens: {
45
- Home: HomeTabs ,
46
- },
47
- });
48
-
49
- type RootStackParamList = StaticParamList <typeof RootStack >;
50
-
51
- declare global {
52
- namespace ReactNavigation {
53
- interface RootParamList extends RootStackParamList {}
54
- }
55
- }
56
- ```
57
-
58
- This is needed to type-check the ` useNavigation ` hook.
19
+ ``` ts
20
+ import type { StaticScreenProps } from ' @react-navigation/native' ;
21
+
22
+ // highlight-start
23
+ type Props = StaticScreenProps <{
24
+ username: string ;
25
+ }>;
26
+ // highlight-end
27
+
28
+ function ProfileScreen({ route }: Props ) {
29
+ // ...
30
+ }
31
+ ```
32
+
33
+ 2 . Generate the ` ParamList ` type for the root navigator and specify it as the default type for the ` RootParamList ` type:
34
+
35
+ ``` ts
36
+ import type { StaticParamList } from ' @react-navigation/native' ;
37
+
38
+ const HomeTabs = createBottomTabNavigator ({
39
+ screens: {
40
+ Feed: FeedScreen ,
41
+ Profile: ProfileScreen ,
42
+ },
43
+ });
44
+
45
+ const RootStack = createNativeStackNavigator ({
46
+ screens: {
47
+ Home: HomeTabs ,
48
+ },
49
+ });
50
+
51
+ // highlight-next-line
52
+ type RootStackParamList = StaticParamList <typeof RootStack >;
53
+
54
+ // highlight-start
55
+ declare global {
56
+ namespace ReactNavigation {
57
+ interface RootParamList extends RootStackParamList {}
58
+ }
59
+ }
60
+ // highlight-end
61
+ ```
62
+
63
+ This is needed to type-check the ` useNavigation ` hook.
59
64
60
65
## Navigator specific types
61
66
@@ -106,10 +111,13 @@ type HomeTabsParamList = {
106
111
Profile: undefined ;
107
112
};
108
113
114
+ // highlight-start
109
115
type HomeTabsProps = StaticScreenProps <
110
116
NavigatorScreenParams <HomeTabsParamList >
111
117
>;
118
+ // highlight-end
112
119
120
+ // highlight-next-line
113
121
function HomeTabs(_ : HomeTabsProps ) {
114
122
return (
115
123
< Tab .Navigator >
0 commit comments