React-navigation: fixed flow type error with React$

[flbaue]

I just created a new react native project (0.56) and added react-navigation (2.7.0) and flow libdef react-navigation_v2.x.x.
As a result, I get a type error when I try to use the result of createDrawerNavigator (or the others).

yarn flow status
yarn run v1.7.0
$ /Users/.../.../.../App/node_modules/.bin/flow status
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/app.js:18:13

Cannot instantiate React.Element because in type argument ElementType:
 • Either a callable signature is missing in statics of React.Component [1] but exists in
   React.StatelessFunctionalComponent [2].
 • Or a callable signature is missing in withRouter [3] but exists in
   React.StatelessFunctionalComponent [2].
 • Or a callable signature is missing in withOptionalNavigationOptions [4] but exists in
   React.StatelessFunctionalComponent [2].
 • Or React.StatelessFunctionalComponent [1] is incompatible with statics of React.Component [5].
 • Or withRouter [3] is incompatible with statics of React.Component [5].
 • Or withOptionalNavigationOptions [4] is incompatible with statics of React.Component [5].

     src/app.js
      15│ type Props = {}
      16│ export default class App extends Component<Props> {
      17│   render() {
      18│     return <Navigator />
      19│   }
      20│ }
      21│

     flow-typed/npm/react-navigation_v2.x.x.js
 [1] 571│   > = React$ComponentType<{
     572│     ...Props,
     573│     ...NavigationContainerProps<State, Options>
     574│   }> &
 [3] 575│     withRouter<State, Options> &
 [4] 576│     withOptionalNavigationOptions<Options>

     /private/tmp/flow/flowlib_34616c66/react.js
 [2] 160│   | React$StatelessFunctionalComponent<any>
 [5] 161│   | Class<React$Component<any, any>>;



Found 1 error

Only showing the most relevant union/intersection branches.
To see all branches, re-run Flow with --show-all-branches
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

After some researching, I replaced the React$ inside the libdef with React. plus import * as React from "react". This is fixing the type error for me.

Is this the right solution for this? Or are there any better ways?

[sibelius]

cc @Ashoat

[Ashoat]

Some context: @flbaue initially reported this issue in the react-navigation repo, and proposed the same fix. I wasn't sure how to proceed, since it appears to fix his issue, but importing like this is discouraging by the CONTRIBUTING docs.

@sibelius, do you know if any of this has changed? @flbaue, is there anything non-standard about your environment that may be affecting things here?

[sibelius]

I think import does not work yet

[Ashoat]

Hmm, but the docs page I linked above says:

You can import types built into Flow (e.g. from react), only if you put the import statement inside the module declaration

[Ashoat]

What's confusing me is that the React.* types should be the same as the React$* types.

After reading a bit and remembering that import statements outside a declare module block get any-typed, I think I have a theory. This PR gets rid of the error @flbaue was seeing because it unintentionally any-types the imports.

@flbaue, if you move the import statement to inside the declare module, do the errors reoccur?

[flbaue]

@Ashoat If I move the import inside, the error does reoccur. So you might be right.

Also I just noticed something. I am able to reproduce the type error in any project, when I render the navigator as a child of a react-redux provider. If the react-redux typedef is installed, I have the type error. If I render the Navigator as a child to a normal, self written, component, I don't have the error.
Also if I remove the react-redux typedef, the error goes away as well.

I created an example here: https://github.com/flbaue/TestProject

[Ashoat]

Hmm. My first thought was that the issue must be with react-redux then, but that libdef seems to any-type Provider's children, so I'm not sure why there would be any error...

Either way, given that this PR would any-type every use of React in the libdef, we definitely need some changes before we merge it.

[flbaue]

@Ashoat Could you confirm the issue with my example? Just to make sure it's not just something weird on my side.

[Ashoat]

This is certainly strange. If I copy the type definition of Provider from react-redux's libdef into your App.js file, the error goes away. (I also needed to copy the type import of Store from redux, and remove the import of Provider.)

I wonder if it has to do with how react-redux's libdef is importing types from redux.

[flbaue]

I found another way to fix the type issue.
When I replace React$ComponentType in line 568 with React$StatelessFunctionalComponent it also seems to work fine.

[ujwal-setlur]

Using React$StatelessFunctionalComponent worked for me as well

[Ashoat]

I am seeing this issue now after updating the libdef for React Navigation 3.0. I'm not sure what's triggering it, but this patch allows us to circumvent the issue, and I don't have a better idea. Let's get this merged.

[AndrewSouthpaw]

Done! Thanks everyone.