Typesafe Stack & Navigation

[es-lynn]

I was able to find a way to get both Stack and navigate to be typesafe for the URL, component & props with minimal boilerplate.

In the demo above, you can see the following being demonstrated:

1. Only a simple type mapper Routes is required to map URLs to Components.
2. <TypesafeScreen> knows that only keys in Routes are valid URLs.
3. <TypesafeScreen> disallows components with incompatible props to be passed in.
4. navigate knows that only keys in Routes are valid URLs.
5. navigate knows what props should be passed in based on the URL

Would the react-navigation team be interested in implementing such a feature into the core library? If yes, then I can work on a PR.

[satya164]

Thanks for the RFC, it looks cool but has a problem compared to the current method in the docs: your navigate function seems global, but each screen should have its own navigation prop with proper types, for example navigation.setParams, navigation.push etc. should also have correct types, not just navigate.

Basically, all screens in a navigator needs to be aware of params of other screens (without a global navigate function), so just specifying params for the screen won't be sufficient. That's why current way suggests to define all params in one place and then use that in each screen.