React-native: Errors in flow

[trsh]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes, kind of.

Environment

Environment:
OS: Windows 10
Node: 8.9.4
Yarn: Not Found
npm: 5.5.1
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3

Steps to Reproduce

Create a new project create-react-native-app. Update react-native to 0.53.3 in package json. Add flow-bin 0.66.0. Clear node_modules. Clear npm cache. Do npm install. Add & run npm run flow.

Expected Behavior

Errors from my code, and 3rd party libraries.

Actual Behavior

Errors all over the place from react-native, metro. etc.

Error ----------------------------------------------- node_modules/react-native/Libraries/CameraRoll/CameraRoll.js:120:5

`ReactPropsChainableTypeChecker` [1] is not a React propType.

   node_modules/react-native/Libraries/CameraRoll/CameraRoll.js:120:5
            v-----------------------------
   120|     createStrictShapeTypeChecker({
   121|       node: createStrictShapeTypeChecker({
   122|         type: PropTypes.string.isRequired,
   123|         group_name: PropTypes.string.isRequired,
   124|         image: createStrictShapeTypeChecker({
   125|           uri: PropTypes.string.isRequired,
   126|           height: PropTypes.number.isRequired,
   127|           width: PropTypes.number.isRequired,
   128|           isStored: PropTypes.bool,
   129|           playableDuration: PropTypes.number.isRequired,
   130|         }).isRequired,
   131|         timestamp: PropTypes.number.isRequired,
   132|         location: createStrictShapeTypeChecker({
   133|           latitude: PropTypes.number,
   134|           longitude: PropTypes.number,
   135|           altitude: PropTypes.number,
   136|           heading: PropTypes.number,
   137|           speed: PropTypes.number,
   138|         }),
   139|       }).isRequired,
   140|     }),
            -^

References:
   node_modules/react-native/Libraries/Utilities/createStrictShapeTypeChecker.js:19:4
    19| ): ReactPropsChainableTypeChecker {
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]


Error ------------------------------------------------------ node_modules/react-native/Libraries/Lists/FlatList.js:632:9

Cannot create `MetroListView` element because:
 - null or undefined [1] is incompatible with boolean [2] in property `refreshing`.
 - null or undefined [3] is incompatible with boolean [2] in property `refreshing`.
 - read-only array type [4] is incompatible with array type [5] in property `items`.

   node_modules/react-native/Libraries/Lists/FlatList.js:632:9
                v-------------
   632|         <MetroListView
   633|           {...this.props}
   634|           items={this.props.data}
   635|           ref={this._captureRef}
   636|         />
                -^

References:
   node_modules/react-native/Libraries/Lists/FlatList.js:190:16
   190|   refreshing?: ?boolean,
                       ^^^^^^^^ [1]
   node_modules/react-native/Libraries/Lists/MetroListView.js:46:16
    46|   refreshing?: boolean,
                       ^^^^^^^ [2]
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:179:16
   179|   refreshing?: ?boolean,
                       ^^^^^^^^ [3]
   node_modules/react-native/Libraries/Lists/FlatList.js:73:10
    73|   data: ?$ReadOnlyArray<ItemT>,
                 ^^^^^^^^^^^^^^^^^^^^^ [4]
   node_modules/react-native/Libraries/Lists/MetroListView.js:34:12
    34|   items?: ?Array<Item>, // By default, an Item is assumed to be {key: string}
                   ^^^^^^^^^^^ [5]


Error -------------------------------------------------- node_modules/react-native/Libraries/Lists/SectionList.js:331:12

Cannot create `List` element because:
 - null or undefined [1] is incompatible with boolean [2] in property `refreshing`.
 - null or undefined [3] is incompatible with boolean [2] in property `refreshing`.
 - null or undefined [4] is incompatible with boolean [2] in property `refreshing`.
 - undefined [5] is incompatible with `renderItemType` [6] in property `renderItem`.

   node_modules/react-native/Libraries/Lists/SectionList.js:331:12
   331|     return <List {...this.props} ref={this._captureRef} />;
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
   node_modules/react-native/Libraries/Lists/SectionList.js:165:16
   165|   refreshing?: ?boolean,
                       ^^^^^^^^ [1]
   node_modules/react-native/Libraries/Lists/MetroListView.js:46:16
    46|   refreshing?: boolean,
                       ^^^^^^^ [2]
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:179:16
   179|   refreshing?: ?boolean,
                       ^^^^^^^^ [3]
   node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js:119:16
   119|   refreshing?: ?boolean,
                       ^^^^^^^^ [4]
   node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js:68:16
                       v-------
    68|   renderItem?: (info: {
    69|     item: Item,
    70|     index: number,
    71|     section: SectionT,
    72|     separators: {
    73|       highlight: () => void,
    74|       unhighlight: () => void,
    75|       updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
    76|     },
    77|   }) => ?React.Element<any>,
          ------------------------^ [5]
   node_modules/react-native/Libraries/Lists/VirtualizedList.js:57:15
    57|   renderItem: renderItemType,
                      ^^^^^^^^^^^^^^ [6]

[FLGMwt]

I just encountered this and realized it was because installed latest flow-bin (0.66.0), then updated the .flowconfig version (currently 0.63.0) to match it. I got the same List and CameraRoll type errors. I reverted both my package.json flow-bin and .flowconfig versions to 0.63.0 and the type errors no longer occurred.

Not a "fix", but since RN scaffolded the .flowconfig version, I'm personally okay letting RN dictate the flow version. (and I assume a future RN version will 1) uptick flow and 2) fix these few type errors)

[hramos]

We run Flow as part of our CI, and it's currently not raising any of these issues, at least not on master. See the Flow step at https://circleci.com/gh/facebook/react-native/35835

[aubreywahl]

I'm seeing the issue with renderItemType when using a SectionList RN 0.51 with flow 0.66 (obviously a different version of flow than what ships with RN 0.51)

possibly related: https://github.com/facebook/react-native/blob/da3424c929220304ff01032a9bf473fb251375f1/Libraries/Lists/VirtualizedList.js#L54-L58

[hramos]

FWIW, Flow checks did not fail in the most recent CI run for the 0.51-stable branch: https://circleci.com/gh/facebook/react-native/26635

[hramos]

Flow checks are not failing in 0.53-stable either: https://circleci.com/gh/facebook/react-native/34560

[EdwardDrapkin]

I get the same errors on RN 0.54, but they're fixed in master. Can the changes get backported to 54 so we don't have to wait a month for fixes in 55?

[hramos]

I'm afraid not. FWIW, 0.54-stable does not show this issue: https://circleci.com/gh/facebook/react-native/tree/0.54-stable

[trsh]

@FLGMwt switching back to Flow 0.63.0 worked for me also. So a mix of RN 0.53.3 and 0.63.0 works. Haven't tested newer versions.

[rumax]

@hramos The issue is closed, but is it flow or eact-native bug? I could not find such bug in flow repo. Moreover is there any official react-native documentation that states that we should use only flow 0.54?

[trsh]

@rumax if you use older RN, use older Flow. But I don't think this mapping is documented. :/

[awaseem]

I was also getting this issue when upgrading to RN 0.55.3 using flow version 0.67.1. I solved the problem by actually copying there flow suppressing comments within there .flowconfig into my projects .flowconfig. These were the lines I copied from RN's .flowconfig to mine:

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)?:? #[0-9]+

assuming you have those suppress types ($FlowFixMe, $FlowIssue) already defined which looks like the following:

suppress_type=$FlowIssue
suppress_type=$FlowFixMe

Hope that helps!

[ericketts]

I'm afraid not. FWIW, 0.54-stable does not show this issue: https://circleci.com/gh/facebook/react-native/tree/0.54-stable

because they $FlowIgnored everything that was erroring 😂