Flow says that Text and Image are not React components #18256
Description
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.