Skip to content

Commit

Permalink
Emphasize type safety for useNavigation & useRoute
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Nov 22, 2023
1 parent 1cb6653 commit f6d409a
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 8 deletions.
18 changes: 14 additions & 4 deletions versioned_docs/version-6.x/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,24 +209,34 @@ type ProfileScreenNavigationProp = CompositeNavigationProp<

### Annotating `useNavigation`

:::danger

Annotating `useNavigation` isn't type-safe because the type parameter cannot be statically verified.
Prefer [specifying a default type](#specifying-default-types-for-usenavigation-link-ref-etc) instead.

:::

To annotate the `navigation` prop that we get from `useNavigation`, we can use a type parameter:

```ts
const navigation = useNavigation<ProfileScreenNavigationProp>();
```

It's important to note that this isn't completely type-safe because the type parameter you use may not be correct and we cannot statically verify it.

### Annotating `useRoute`

:::danger

Annotating `useRoute` isn't type-safe because the type parameter cannot be statically verified.
Prefer using the [`route` prop](route-prop.md) instead when possible. Use `useRoute` for generic code that doesn't need specific route type.

:::

To annotate the `route` prop that we get from `useRoute`, we can use a type parameter:

```ts
const route = useRoute<ProfileScreenRouteProp>();
```

It's important to note that this isn't completely type-safe, similar to `useNavigation`.

### Annotating `options` and `screenOptions`

When you pass the `options` to a `Screen` or `screenOptions` prop to a `Navigator` component, they are already type-checked and you don't need to do anything special. However, sometimes you might want to extract the options to a separate object, and you might want to annotate it.
Expand Down
18 changes: 14 additions & 4 deletions versioned_docs/version-7.x/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,24 +209,34 @@ type ProfileScreenNavigationProp = CompositeNavigationProp<

### Annotating `useNavigation`

:::danger

Annotating `useNavigation` isn't type-safe because the type parameter cannot be statically verified.
Prefer [specifying a default type](#specifying-default-types-for-usenavigation-link-ref-etc) instead.

:::

To annotate the `navigation` prop that we get from `useNavigation`, we can use a type parameter:

```ts
const navigation = useNavigation<ProfileScreenNavigationProp>();
```

It's important to note that this isn't completely type-safe because the type parameter you use may not be correct and we cannot statically verify it.

### Annotating `useRoute`

:::danger

Annotating `useRoute` isn't type-safe because the type parameter cannot be statically verified.
Prefer using the [`route` prop](route-prop.md) instead when possible. Use `useRoute` for generic code that doesn't need specific route type.

:::

To annotate the `route` prop that we get from `useRoute`, we can use a type parameter:

```ts
const route = useRoute<ProfileScreenRouteProp>();
```

It's important to note that this isn't completely type-safe, similar to `useNavigation`.

### Annotating `options` and `screenOptions`

When you pass the `options` to a `Screen` or `screenOptions` prop to a `Navigator` component, they are already type-checked and you don't need to do anything special. However, sometimes you might want to extract the options to a separate object, and you might want to annotate it.
Expand Down

0 comments on commit f6d409a

Please sign in to comment.