I have encountered some TypeScript errors while using react-navigation 5. It seems that I might be making mistakes in how I am typing things or structuring the app, but I'm uncertain about the exact issue.
I started off by following these guides from the documentation:
https://reactnavigation.org/docs/en/tab-based-navigation.html#a-stack-navigator-for-each-tab https://reactnavigation.org/docs/en/typescript.html
My goal is to organize my app structure as follows:
- Root Tab Navigator
- Home Stack
- Home Page
- News Detail Page
- Settings Stack
- Settings Page
- Home Stack
While everything works when the app runs, I encounter errors when attempting to navigate from a page within one stack to a page in another stack, for example, going from News Detail Page to Settings Page.
Below is the current code snippet I am working with.
(...)The specific error message I receive is:
(...)I suspect that the error arises because the Settings route is not defined within HomeStackParamList. Should I create a union type of all the stacks' page params and use it universally to avoid this issue? Or is there a better way to structure the setup?
My thought is to potentially create a union type of all param lists like this, though I am unsure if this is the correct approach:
(...)Any guidance or advice on navigating me towards the right solution would be highly appreciated. Thank you.