Skip to content

Commit 153f77f

Browse files
committed
Update typescript config docs
1 parent ba0b544 commit 153f77f

File tree

1 file changed

+48
-40
lines changed

1 file changed

+48
-40
lines changed

versioned_docs/version-7.x/typescript.md

Lines changed: 48 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,46 +16,51 @@ There are 2 steps to configure TypeScript with the static API:
1616

1717
1. Each screen component needs to specify the type of the `route.params` prop that it accepts. The `StaticScreenProps` type makes it simpler:
1818

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.
5964

6065
## Navigator specific types
6166

@@ -106,10 +111,13 @@ type HomeTabsParamList = {
106111
Profile: undefined;
107112
};
108113

114+
// highlight-start
109115
type HomeTabsProps = StaticScreenProps<
110116
NavigatorScreenParams<HomeTabsParamList>
111117
>;
118+
// highlight-end
112119

120+
// highlight-next-line
113121
function HomeTabs(_: HomeTabsProps) {
114122
return (
115123
<Tab.Navigator>

0 commit comments

Comments
 (0)