Skip to content

Commit

Permalink
Update TS guide
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Nov 28, 2024
1 parent 3504693 commit 7c681a9
Showing 1 changed file with 13 additions and 1 deletion.
14 changes: 13 additions & 1 deletion versioned_docs/version-7.x/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import TabItem from '@theme/TabItem';

React Navigation can be configured to type-check screens and their params, as well as various other APIs using TypeScript. This provides better intelliSense and type safety when working with React Navigation.

:::note

React Navigation is designed to work with [`strict`](https://www.typescriptlang.org/tsconfig/#strict) mode in TypeScript. If you are not using `strict` mode, some things might not work as expected.

:::

<Tabs groupId="config" queryString="config">
<TabItem value="static" label="Static" default>

Expand Down Expand Up @@ -187,6 +193,12 @@ The type containing the mapping must be a type alias (e.g. `type RootStackParamL

:::

If you have an [`id`](./navigator.md#id) prop for your navigator, you will also need to pass it as a generic:

```tsx
const RootStack = createStackNavigator<RootStackParamList, 'MyStack'>();
```

## Type checking screens

To typecheck our screens, we need to annotate the `navigation` and the `route` props received by a screen. The navigator packages in React Navigation export generic types to define types for both the `navigation` and `route` props from the corresponding navigator.
Expand All @@ -211,7 +223,7 @@ The type takes 3 generics:
- The name of the route the screen belongs to
- The ID of the navigator (optional)

If you have an `id` prop for your navigator, you can do:
If you have an [`id`](./navigator.md#id) prop for your navigator, you can do:

```ts
type Props = NativeStackScreenProps<RootStackParamList, 'Profile', 'MyStack'>;
Expand Down

0 comments on commit 7c681a9

Please sign in to comment.