[react-navigation] unable to use typing for navigation.state.params

In react-navigation_v2.x.x flow types we have type

type NavigationParams = {
    [key: string]: mixed,
}

So if i define my navigation prop as navigation: NavigationScreenProp<NavigationStateRoute> it assumes that params are of mixed type, but i need exact, like:

type Props = {
    navigation: NavigationScreenProp<NavigationStateRoute<{
        foo: number,
        bar: string
    }>>`
}

Also it would be nice, if navigation.setParams() will have $Shape definition so it can autocomplete and typecheck passed object

So the main problem is, can we somehow tell flow about navigation state params type?

cc @Ashoat

[Ashoat]

It’s admittedly non-obvious how to type a custom navigation route. Here’s how it’s done:

type NavProp = NavigationScreenProp<{|
  ...NavigationLeafRoute,
  params: {|
    color: string,
    threadInfo: ThreadInfo,
    setColor: (color: string) => void,
  |},
|}>;

Also it would be nice, if navigation.setParams() will have $Shape definition so it can autocomplete and typecheck passed object

PRs welcome! Make sure to send them to the react-navigation repo, though. (Give this CONTRIBUTING doc a read for context.)

[schumannd]

Maybe I understand these examples wrong, but they are not working for me.

What I am looking for is a way to define types for navigation.state.params that a Component expects.

So that flow will notice and error: a) if the component A tries to access params, that are not supposed to be there. b) if another component B navigates to component A, and does not provide the expected params.

A way that only solves case a) is

type Props = {
  navigation: { state: {params: {par1: string, par2: number}}},
}

export default class ComponentA extends React.Component<Props> {
  render() {
    console.log(this.props.navigation.state.params.par1) // works
    console.log(this.props.navigation.state.params.par3) // throws flow error
}

However, if I tried to navigate to this component from another one like so

this.props.navigation.navigate('ComponentA', {par1: string});

It does not error, even though par2 is missing.

So case b) might not be possible to do with flow, as the connection through react-navigation might not be easy to extract.