react-navigation / react-navigation/react-navigation

getState typescript error after version 6.1.10

Open
#11,893 2 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug repro provided
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

Current behavior

I have an existing function that accepts the navigation object as a prop:

navigation: NavigationProp<ParamListBase, string>,

After upgrading to the latest version of react navigation, this type gives the following typescript error:

Argument of type 'Omit<NavigationProp<RootParamList>, "getState"> & { getState(): Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<...>[]; type: string; stale: false; }> | undefined; }' is not assignable to parameter of type 'NavigationProp<ParamListBase, string>'.
  Type 'Omit<NavigationProp<RootParamList>, "getState"> & { getState(): Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<...>[]; type: string; stale: false; }> | undefined; }' is not assignable to type 'Omit<NavigationHelpersCommon<ParamListBase, Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<ParamListBase, string>[]; type: string; stale: false; }>>, "getParent">'.
    The types returned by 'getState()' are incompatible between these types.
      Type 'Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<ParamListBase, string>[]; type: string; stale: false; }> | undefined' is not assignable to type 'Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<ParamListBase, string>[]; type: string; stale: false; }>'.
        Type 'undefined' is not assignable to type 'Readonly<{ key: string; index: number; routeNames: string[]; history?: unknown[] | undefined; routes: NavigationRoute<ParamListBase, string>[]; type: string; stale: false; }>'.ts(2345)
Expected behavior

I would expect the type here continues to work, or a decent alternative be proposed for how to type a function that accepts the navigation prop.

I can copy the change from inside react navigation in order to work around this issue for now:

navigation: Omit<NavigationProp<ParamListBase, string>, 'getState'> & {
    getState(): NavigationState | undefined;
  },

However, I'm wondering if NavigationProp should be updated accordingly?

Reproduction

https://www.typescriptlang.org/play?#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCbvCwDKgU8JkY7p7ehCTkVDQS2E6gnPCxGcwmZqDSTgzxxWWVoASMFmgYkAAeRJTInN3ymj4d-jSCeNsMq-wuoPaOltigAKoASgAywhK7SbGQZIIz5VWCFzSeCrZagNYbChbHaxUDcCjJZLfSDbExIAgUdxkUBIursJzCFJtXydaiKKEEeBkGgAb1AADkGDoKMw6g1OLQ2AR+LRHAxEM8hKgAEIMQSQfjscWM5ms+qNUAAXxxbEQoAA5AABSawVClThMllsxrAA31PTqgDcwQQnEENDMAFFVvyFpAAGqOCgMaTuUAAXlAACIABIwaAYcBU6JBxS2wTwdwBCPMAAUTpdiDdnsoPvcAEpgskuLr2Wh9KhUwbZcbOPkGYa5ezOfACAAeXlkfmC+2i8V2VCUTjMAB8+dANMUJRK1aN8s4AWYkFQxFQdUgqfz1sVNsa9v6jdrAdAUsgMrn7M31oU9qrh-nW+CKhwzQ8ZC8iCpzmB7BoXzcZjMOwDBLvwsDQOoiQ+vAegiF4QbOq67iCEGSTYkG4AOKg6rCPSkASEGQQqAA8l8ZDvP2WjLlca7UpArjSHgoBOJ+zLDlg+goAgiDQsIlz-hI0auKIhj4vMjAsGwXDcEEJRAA

Platform
  • Android
  • iOS
  • Web
  • Windows
  • MacOS
Packages
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-top-tabs
  • @react-navigation/stack
  • @react-navigation/native-stack
  • react-native-tab-view
Environment
  • I've removed the packages that I don't use
package version
@react-navigation/native 6.1.16
@react-navigation/bottom-tabs 6.5.19
@react-navigation/drawer 6.6.14
@react-navigation/material-top-tabs 6.6.12
@react-navigation/native-stack 6.9.25
react-native-safe-area-context 4.9.0
react-native-screens 3.29.0
react-native 0.71.16
node 20.11.1
yarn 1.22.19

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the NavigationProp and getState types in @react-navigation/native, then compare them with the TypeScript playground reproduction and the reported workaround. Done means the existing NavigationProp<ParamListBase, string> usage type-checks again, or the package documents and supports a clear alternative.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
api, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.