react-navigation / react-navigation/react-navigation
CompositeScreenProps - route correctly typed, navigation set to any
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
Trying to type a Tab Navigator as a parent of a Stack Navigator. Followed the docs on Typescript - https://reactnavigation.org/docs/typescript/
When I use my type helper that utilises CompositeScreenProps, my route prop is typed but my navigation prop is:
Here are the only types I use:
Expected behavior
I'd expect my navigation.navigate to be typed when using CompositeScreenProps.
Reproduction
Repo - https://github.com/D-Pagey/react-navigation-repro/blob/main/types/navigation.ts
File that is typed incorrectly - https://github.com/D-Pagey/react-navigation-repro/blob/main/types/navigation.ts
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | 6.0.8 |
| @react-navigation/bottom-tabs | 6.3.1 |
| @react-navigation/stack | 6.2.1 |
| @react-navigation/native-stack | 6.5.0 |
| react-native-safe-area-context | 3.3.2 |
| react-native-screens | 3.10.1 |
| react-native | 0.64.3 |
| expo | 44.0.0 |
| node | 14.18.2 |
| npm or yarn | 1.22.17 |
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 reproduction's types/navigation.ts and compare the CompositeScreenProps usage against the TypeScript documentation. Reproduce the typing in the linked repository, then verify that navigation.navigate is typed while route remains correctly typed.
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