From f6d409a1b6d9b969a7921c3b63f092c8fda6564f Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Wed, 22 Nov 2023 11:24:31 +0100 Subject: [PATCH] Emphasize type safety for useNavigation & useRoute --- versioned_docs/version-6.x/typescript.md | 18 ++++++++++++++---- versioned_docs/version-7.x/typescript.md | 18 ++++++++++++++---- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/versioned_docs/version-6.x/typescript.md b/versioned_docs/version-6.x/typescript.md index 3b3461cc672..3af1741e622 100755 --- a/versioned_docs/version-6.x/typescript.md +++ b/versioned_docs/version-6.x/typescript.md @@ -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(); ``` -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(); ``` -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. diff --git a/versioned_docs/version-7.x/typescript.md b/versioned_docs/version-7.x/typescript.md index 3b3461cc672..3af1741e622 100755 --- a/versioned_docs/version-7.x/typescript.md +++ b/versioned_docs/version-7.x/typescript.md @@ -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(); ``` -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(); ``` -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.