Flow says that Text and Image are not React components

[JakubRimal]

It is not possible to return JSX with an Image or a Text component from react-native which satisfies return type Element<typeof Image> or Element<typeof Text>.

Environment

Environment:
OS: Linux 4.13
Node: 8.10.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.0.0 => 16.1.1
react-native: ^0.52.0 => 0.52.0

Flow version: 0.66.0

Expected Behavior

Flow should say "No errors".

Actual Behavior

Flow says that it is not a React component (the same errors are shown with an Image component):

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

     -
       4│ import React from 'react';
       5│ import type { Element } from 'react';
       6│
       7│ function MyText(props: Object): Element<typeof Text> {
       8│     return (
       9│         <Text {...props} />
      10│     );

     /tmp/flow/flowlib_10ce9ec3/react.js
 [2] 150│   | React$StatelessFunctionalComponent<any>
 [3] 151│   | Class<React$Component<any, any>>;

     node_modules/react-native/Libraries/react-native/react-native-implementation.js
 [1]  52│   get Text() { return require('Text'); },


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ -:9:10

Cannot create Text element because module Text [1] is not a React component.

     -
      6│
      7│ function MyText(props: Object): Element<typeof Text> {
      8│     return (
      9│         <Text {...props} />
     10│     );
     11│ }
     12│

     node_modules/react-native/Libraries/react-native/react-native-implementation.js
 [1] 52│   get Text() { return require('Text'); },


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ -:9:9

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

     -
       6│
       7│ function MyText(props: Object): Element<typeof Text> {
       8│     return (
       9│         <Text {...props} />
      10│     );
      11│ }
      12│

     /tmp/flow/flowlib_10ce9ec3/react.js
 [2] 150│   | React$StatelessFunctionalComponent<any>
 [3] 151│   | Class<React$Component<any, any>>;

     node_modules/react-native/Libraries/react-native/react-native-implementation.js
 [1]  52│   get Text() { return require('Text'); },



Found 5 errors

Only showing the most relevant union/intersection branches.

Steps to Reproduce

The simplest example:

// @flow

import { Text } from 'react-native';
import React from 'react';
import type { Element } from 'react';

function MyText(props: Object): Element<typeof Text> {
    return (
        <Text {...props} />
    );
}

export default MyText;

It gives the same errors when Text is replaced with Image but it works (no errors) when Text is replaced with View.

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[JakubRimal]

Yes, I can. I have the same results with the following setup:

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: latest => 0.54.0

[elicwhite]

This is complicated to fix but I just finished going through it for View. Hopefully I’ll get to Text and Image by the next release cut.

[JakubRimal]

@TheSavior Thanks that would be great! Because this problem means that every file which uses Text or Image shows errors which is quite uncomfortable.

[elicwhite]

I’m actually not sure why you are getting these errors. We don’t get these errors internally. I am planning on making modifications around this space right now but Text and Image shouldn’t be broken in the previous release... Hmm.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[elicwhite]

We have changed the types of these components a bunch. Does this still repro on 0.56.0-rc.2?

[JakubRimal]

I'd like to try it again with a fresh project but currently I'm blocked by this problem: #19797 I'll write here again when it will be solved.

[elicwhite]

The fix for that has landed has landed but a new version hasn’t been cut yet. You can use the fix to the flowconfig from #19766 to be able to try to repro this issue.

[JakubRimal]

Ok, #19766 led me to play around with .flowconfig file and I've found that we had nothing starting with module.system.haste in [options] section. Adding it solves my original problem even with version 0.55.0 so it looks like we missed somethink while upgrading to the newer version of react-native.

I'm sorry about that and I would like to thank you very much for your cooperation.