Flow generates many errors for new project - react-native

Question

Flow seems to generate a lot of errors on a new project. What am I doing wrong ?
What I did:
Created a new React Native project using react-native init FlowProject
Followed the set-up for Flow with yarn and Babel
yarn add --dev babel-cli babel-preset-flow
yarn add --dev flow-bin
Ran yarn run flow (.flowconfig was generated by the init)
Here is the error I get:
.flowconfig:53 Unsupported option specified! (unsafe.enable_getters_and_setters)
error Command failed with exit code 8.
Now if I remove the specified line (and version number), I get a bunch of these two errors:
Error: node_modules/react-native/Libraries/Inspector/Inspector.js:104
104: clearTimeout(_hideWait);
^^^^^^^^^ null. This type is incompatible with the expected param type of
733: declare function clearTimeout(timeoutId?: TimeoutID): void;
^^^^^^^^^ TimeoutID. See lib: /private/tmp/flow/flowlib_171966cc/core.js:733
Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1094
1094: this.props.onEndReachedThreshold * visibleLength / 2;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ undefined. The operand of an arithmetic operation must be a number.
Found 19 errors
error Command failed with exit code 2.
If I delete the generated .flowconfig file (see at the end), recreate it with yarn run flow init, and run yarn run flow again, I get the following errors (I'm just showing those 5, most of them were similar to each other):
Error: node_modules/react-native/Libraries/Animated/src/AnimatedEvent.js:101
101: if (__DEV__) {
^^^^^^^ __DEV__. Could not resolve name
Error: node_modules/react-native/Libraries/Inspector/Inspector.js:104
104: clearTimeout(_hideWait);
^^^^^^^^^ null. This type is incompatible with the expected param type of
733: declare function clearTimeout(timeoutId?: TimeoutID): void;
^^^^^^^^^ TimeoutID. See lib: /private/tmp/flow/flowlib_15451c3f/core.js:733
Error: node_modules/react-native/Libraries/Interaction/InteractionManager.js:107
107: return promise.done(...args);
^^^^^^^^^^^^^^^^^^^^^ call of method `done`. Function cannot be called on
107: return promise.done(...args);
^^^^^^^^^^^^^^^^^^^^^ property `done` of unknown type
Error: node_modules/react-native/Libraries/Interaction/TaskQueue.js:165
165: .done();
^^^^ property `done`. Property not found in
v---------
152: task.gen()
153: .then(() => {
154: DEBUG && infoLog(
...:
164: })
-^ Promise
Error: node_modules/react-native/Libraries/Lists/VirtualizedList.js:1016
1016: distanceFromEnd < onEndReachedThreshold * visibleLength &&
^^^^^^^^^^^^^^^^^^^^^ undefined. The operand of an arithmetic operation must be a number.
... 16 more errors (only 50 out of 66 errors displayed)
To see all errors, re-run Flow with --show-all-errors
error Command failed with exit code 2.
Now I know that I can tell flow to ignore certain files, but first, it seems weird to me that flow gives me these errors for code that I have not produced. I've also seen on a github issue that we shouldn't tell flow to ignore the node_modules. So is the solution to ignore every single file that this first flow analysis gives us ?
Here's a list of the files concerned:
Error node_modules/react-native/Libraries/Inspector/Inspector.js:
Error node_modules/react-native/Libraries/Interaction/InteractionManager.js
Error node_modules/react-native/Libraries/Lists/FlatList.js
Error node_modules/react-native/Libraries/Lists/ViewabilityHelper.js
Error node_modules/react-native/Libraries/Lists/VirtualizedList.js
Error node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js
Error node_modules/react-native/Libraries/StyleSheet/flattenStyle.js
Generated .flowconfig file
[ignore]
; We fork some components by platform
.*/*[.]android.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/
; Ignore unexpected extra "#providesModule"
.*/node_modules/.*/node_modules/fbjs/.*
; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
; Ignore polyfills
.*/Libraries/polyfills/.*
; Ignore metro
.*/node_modules/metro/.*
[include]
[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow/
node_modules/react-native/flow-github/
[options]
emoji=true
module.system=haste
munge_underscores=true
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.native.js
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
unsafe.enable_getters_and_setters=true
[version]
^0.61.0

Answer 1

You cannot delete the React Native .flowconfig, because it defines a lot of custom configuration required for the project to typecheck cleanly.
Let's instead look at the initial error:
.flowconfig:53 Unsupported option specified! (unsafe.enable_getters_and_setters)
error Command failed with exit code 8.
This is caused by the version of Flow you installed with yarn add flow-bin no longer supporting this option (It was removed in 0.62). You'll need to install the exact version of Flow defined on the last line of your .flowconfig
[version]
^0.61.0
You can do this with:
yarn add flow-bin#0.61
Now the project should type check correctly.
Note that in the future, if you upgrade your project template with react-native upgrade and you accept the changes to .flowconfig, you may need to manually upgrade your flow-bin dependency to match.

Answer 2

Found this semi-related issue which recommended updating the flowconfig to use the latest version from create-react-native-app. Seems to have worked for me.

Answer 3

Go to .flowconfig file in your root project folder.
Delete this lines:
esproposal.optional_chaining=enable
esproposal.nullish_coalescing=enable
Done!