react-navigation / react-navigation/react-navigation
getState typescript error after version 6.1.10
Nobody has claimed this yet.
- 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
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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