Create-react-native-app: Adding Flow Broken

Created on 17 Feb 2018 · 14Comments · Source: expo/create-react-native-app

Description

I created a new project using
create-react-native-app myproject
and attempted to add flow using the instructions at Adding Flow

Expected Behavior

These are the following steps I took.
create-react-native-app myproject
yarn add --dev [email protected]
Added "flow: flow" to package.json.
npm run flow
I expected the output to show no flow type errors.

Observed Behavior

Instead, there were 21 errors. All of them came from node_module folders.

Here are the error messages:

Error: node_modules/metro/src/Bundler/util.js.flow:47
 47: ): Ast {
        ^^^ identifier `Ast`. Could not resolve name

Error: node_modules/metro/src/ModuleGraph/worker/collectDependencies.js.flow:46
 46:   ast: Ast,
            ^^^ identifier `Ast`. Could not resolve name

Error: node_modules/metro/src/ModuleGraph/worker/optimizeDependencies.js.flow:28
 28:   ast: Ast,
            ^^^ identifier `Ast`. Could not resolve name

Error: node_modules/metro/src/Resolver/index.js.flow:20
 20:   compactMapping,
       ^^^^^^^^^^^^^^ property `compactMapping`. Property not found in
 23: } = require('metro-source-map');
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:22
 22:   toRawMappings,
       ^^^^^^^^^^^^^ property `toRawMappings`. Property not found in
 23: } = require('metro-source-map');
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ object literal. This type is incompatible with the expected param type of
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
  Property `assetRegistryPath` is incompatible:
    131:     opts: Options,
                   ^^^^^^^ property `assetRegistryPath`. Property not found in. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
                                                         v
     78:     const depGraph = await DependencyGraph.load({
     79:       assetDependencies: [opts.assetRegistryPath],
     80:       assetExts: opts.assetExts,
    ...:
     99:     });
             ^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ object literal. This type is incompatible with the expected param type of
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
  Property `getPolyfills` is incompatible:
    131:     opts: Options,
                   ^^^^^^^ property `getPolyfills`. Property not found in. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
                                                         v
     78:     const depGraph = await DependencyGraph.load({
     79:       assetDependencies: [opts.assetRegistryPath],
     80:       assetExts: opts.assetExts,
    ...:
     99:     });
             ^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ object literal. This type is incompatible with the expected param type of
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
  Property `projectRoots` is incompatible:
    131:     opts: Options,
                   ^^^^^^^ property `projectRoots`. Property not found in. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131
                                                         v
     78:     const depGraph = await DependencyGraph.load({
     79:       assetDependencies: [opts.assetRegistryPath],
     80:       assetExts: opts.assetExts,
    ...:
     99:     });
             ^ object literal

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `assetDependencies`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `forceNodeFilesystemAPI`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `ignorePattern`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `preferNativePlatform`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `roots`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/Resolver/index.js.flow:78
                                                     v
 78:     const depGraph = await DependencyGraph.load({
 79:       assetDependencies: [opts.assetRegistryPath],
 80:       assetExts: opts.assetExts,
...:
 99:     });
         ^ property `useWatchman`. Property not found in
131:     opts: Options,
               ^^^^^^^ object type. See: node_modules/metro/src/node-haste/DependencyGraph.js.flow:131

Error: node_modules/metro/src/index.js.flow:238
       v--------------------------------------------
238:   httpServer.listen(port, options.host, () => {
239:     options.onReady && options.onReady(httpServer);
240:   });
       -^ call of method `listen`. Function cannot be called on any member of intersection type
238:   httpServer.listen(port, options.host, () => {
       ^^^^^^^^^^^^^^^^^ intersection
  Member 1:
  1094:     listen(port: number, hostname?: string, backlog?: number, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1094
  Error:
                                               v------
  238:   httpServer.listen(port, options.host, () => {
  239:     options.onReady && options.onReady(httpServer);
  240:   });
         ^ function. This type is incompatible with the expected param type of
  1094:     listen(port: number, hostname?: string, backlog?: number, callback?: Function): Server;
                                                              ^^^^^^ number. See lib: /tmp/flow/flowlib_183d7a81/node.js:1094
  Member 2:
  1095:     listen(path: string, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1095
  Error:
  238:   httpServer.listen(port, options.host, () => {
                           ^^^^ number. This type is incompatible with the expected param type of
  1095:     listen(path: string, callback?: Function): Server;
                         ^^^^^^ string. See lib: /tmp/flow/flowlib_183d7a81/node.js:1095
  Member 3:
  1096:     listen(handle: Object, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1096
  Error:
  238:   httpServer.listen(port, options.host, () => {
                           ^^^^ number. This type is incompatible with the expected param type of
  1096:     listen(handle: Object, callback?: Function): Server;
                           ^^^^^^ object type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1096

Error: node_modules/metro/src/index.js.flow:238
       v--------------------------------------------
238:   httpServer.listen(port, options.host, () => {
239:     options.onReady && options.onReady(httpServer);
240:   });
       -^ call of method `listen`. Function cannot be called on any member of intersection type
238:   httpServer.listen(port, options.host, () => {
       ^^^^^^^^^^^^^^^^^ intersection
  Member 1:
  1128:     listen(port: number, hostname?: string, backlog?: number, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1128
  Error:
                                               v------
  238:   httpServer.listen(port, options.host, () => {
  239:     options.onReady && options.onReady(httpServer);
  240:   });
         ^ function. This type is incompatible with the expected param type of
  1128:     listen(port: number, hostname?: string, backlog?: number, callback?: Function): Server;
                                                              ^^^^^^ number. See lib: /tmp/flow/flowlib_183d7a81/node.js:1128
  Member 2:
  1129:     listen(path: string, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1129
  Error:
  238:   httpServer.listen(port, options.host, () => {
                           ^^^^ number. This type is incompatible with the expected param type of
  1129:     listen(path: string, callback?: Function): Server;
                         ^^^^^^ string. See lib: /tmp/flow/flowlib_183d7a81/node.js:1129
  Member 3:
  1130:     listen(handle: Object, callback?: Function): Server;
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1130
  Error:
  238:   httpServer.listen(port, options.host, () => {
                           ^^^^ number. This type is incompatible with the expected param type of
  1130:     listen(handle: Object, callback?: Function): Server;
                           ^^^^^^ object type. See lib: /tmp/flow/flowlib_183d7a81/node.js:1130

Error: node_modules/react-native/Libraries/Components/StatusBar/StatusBar.js:350
350:         StatusBar._propsStack,
             ^^^^^^^^^^^^^^^^^^^^^ empty array literal. This type is incompatible with the expected param type of
 67:   propsStack: Array<Object>,
                   ^^^^^^^^^^^^^ array type
  Type argument `T` is incompatible:
    327:     const index = StatusBar._propsStack.indexOf(this._stackEntry);
                                                         ^^^^^^^^^^^^^^^^ null. This type is incompatible with
     67:   propsStack: Array<Object>,
                             ^^^^^^ object type

Error: node_modules/react-native/Libraries/Components/StatusBar/StatusBar.js:350
350:         StatusBar._propsStack,
             ^^^^^^^^^^^^^^^^^^^^^ empty array literal. This type is incompatible with the expected param type of
 67:   propsStack: Array<Object>,
                   ^^^^^^^^^^^^^ array type
  Type argument `T` is incompatible:
    334:     const index = StatusBar._propsStack.indexOf(this._stackEntry);
                                                         ^^^^^^^^^^^^^^^^ null. This type is incompatible with
     67:   propsStack: Array<Object>,
                             ^^^^^^ object type

Error: node_modules/react-native/local-cli/bundle/buildBundle.js:123
123:     packagerInstance = new Server(options);
                                       ^^^^^^^ object literal. This type is incompatible with the expected param type of
112:   constructor(options: Options) {
                            ^^^^^^^ object type. See: node_modules/metro/src/Server/index.js.flow:112
  Property `dynamicDepsInPackages` is incompatible:
    112:   constructor(options: Options) {
                                ^^^^^^^ property `dynamicDepsInPackages`. Property not found in. See: node_modules/metro/src/Server/index.js.flow:112
    123:     packagerInstance = new Server(options);
                                           ^^^^^^^ object literal

Error: node_modules/react-native/local-cli/server/runServer.js:133
133:       websocketServer: new HmrServer(packagerServer, reporter),
                                                          ^^^^^^^^ unused function argument
         v--------------------------------------------
   47:   constructor(packagerServer: PackagerServer) {
   48:     this._packagerServer = packagerServer;
   49:     this._reporter = packagerServer.getReporter();
   50:   }
         ^ function expects no more than 1 argument. See: node_modules/metro/src/HmrServer/index.js.flow:47

Error: node_modules/react-native/local-cli/server/runServer.js:174
                                 v
174:   return Metro.createServer({
175:     assetExts: defaultAssetExts.concat(args.assetExts),
176:     assetRegistryPath: ASSET_REGISTRY_PATH,
...:
202:   });
       ^ object literal. This type is incompatible with the expected param type of
146: function createServer(options: Options): Server {
                                    ^^^^^^^ object type. See: node_modules/metro/src/legacy.js.flow:146
  Property `dynamicDepsInPackages` is incompatible:
    146: function createServer(options: Options): Server {
                                        ^^^^^^^ property `dynamicDepsInPackages`. Property not found in. See: node_modules/metro/src/legacy.js.flow:146
                                     v
    174:   return Metro.createServer({
    175:     assetExts: defaultAssetExts.concat(args.assetExts),
    176:     assetRegistryPath: ASSET_REGISTRY_PATH,
    ...:
    202:   });
           ^ object literal


Found 21 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] flow: `flow`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] flow script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Environment

Please run these commands in the project folder and fill in their results:

npm ls react-native-scripts: [email protected]
npm ls react-native: [email protected]
npm ls expo: [email protected]
node -v: v9.5.0
npm -v: 4.6.1
yarn --version: 1.3.2
watchman version: 4.9.0

Also specify:

Operating system: Linux (Arch)
Phone/emulator/simulator & version: Android phone (Samsung Galaxy S7 physical device)

Reproducible Demo

create-react-native-app myapp
cd myapp && yarn add --dev [email protected]
(The version listed in .flowconfig was 0.56.0)
Add "flow": "flow" to package.json scripts.
npm run flow

I understand that the errors are coming from files outside this repo, but the instructions suggest that adding flow works when it doesn't. In my opinion, either the instructions should be updated or the problem should be fixed.

I tried some hacks such as adding node_modules to the [ignore] section of .flowconfig, but then I don't get the benefits of having a typechecker (or autocomplete) for the react native components. This doesn't seem like the ideal solution.

Source

ghost

👍18 🎉2

Most helpful comment

Another solution:

In .flowconfig:

Update to latest flow: ^0.68.0 under [version], also in package.json and run yarn install. Remove unsafe.enable_getters_and_setters=true.
Add <PROJECT_ROOT>/node_modules/react-native/Libraries/.* under a new section [untyped]
Add <PROJECT_ROOT>/node_modules/metro/.* under [ignore]
Add <PROJECT_ROOT>/node_modules/@expo/.* under [ignore] with SDK 26 (edit)

christophehurpeau on 28 Mar 2018

👍11 ❤5

All 14 comments

I can confirm that on OSx, just created a new project and have this same issue, ignoring just that module cascades into other problems.

PiTiLeZarD on 17 Feb 2018

@PiTiLeZarD
I got flow to work using the following steps:

Create a libdefs.js file in the root folder.
Add declare module 'react-native' { declare var exports: any; } to libdefs.js
Add any offending modules (in my case metro and react-native) to .flowconfig under [ignore] section <PROJECT_ROOT>/node_modules/metro/.*
<PROJECT_ROOT>/node_modules/react-native/.*
Add ./libdefs.js under [libs] section in .flowconfig.

The result is that you don't get flow type checking on react native components (bummer), but at least you get to use flow type checking in YOUR code.

ghost on 17 Feb 2018

👍7 😕3

Have the same behavior :(
@mtoujiline it's not good fix :) I've used the same trick in my TypeScript projects for libs which don't have @types/typings, but it's a bad practice.

spamforhope on 27 Mar 2018

Another solution:

In .flowconfig:

Update to latest flow: ^0.68.0 under [version], also in package.json and run yarn install. Remove unsafe.enable_getters_and_setters=true.
Add <PROJECT_ROOT>/node_modules/react-native/Libraries/.* under a new section [untyped]
Add <PROJECT_ROOT>/node_modules/metro/.* under [ignore]
Add <PROJECT_ROOT>/node_modules/@expo/.* under [ignore] with SDK 26 (edit)

christophehurpeau on 28 Mar 2018

👍11 ❤5

@christophehurpeau works for me, thanks!

spamforhope on 28 Mar 2018

🎉2

The solution posted by @christophehurpeau resolves the issues in OP but still leaves me with the following on a fresh CRNA app (Maybe only a problem since SDK26 ?)

$ npm run flow

> [email protected] flow /Users/edward/Projects/react-native-skeleton
> flow

Unhandled exception: Invalid_argument("String.sub / Bytes.sub")
Raised at file "pervasives.ml", line 33, characters 20-45
Called from file "string.ml", line 47, characters 2-23
Called from file "src/common/errors/errors.ml", line 2045, characters 44-70
Called from file "list.ml", line 96, characters 24-34
Called from file "src/common/errors/errors.ml", line 2014, characters 46-1023
Called from file "list.ml", line 96, characters 24-34
Called from file "src/common/errors/errors.ml", line 2007, characters 32-1023
Called from file "map.ml", line 286, characters 19-24
Called from file "src/common/errors/errors.ml", line 1999, characters 22-1023
Called from file "src/common/errors/errors.ml", line 2400, characters 8-170
Called from file "src/common/errors/errors.ml", line 2571, characters 12-320
Called from file "list.ml", line 85, characters 12-15
Called from file "src/common/errors/errors.ml", line 2583, characters 8-62
Called from file "src/flow.ml", line 82, characters 6-34

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
node_modules/@expo/traveling-fastlane-darwin/traveling-fastlane-1.4.7-osx/lib/vendor/ruby/2.2.0/gems/json-1.8.2/tests/fixtures/fail19.json:1:18

Unexpected token null

     1│ {"Missing colon" null}


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
node_modules/@expo/traveling-fastlane-darwin/traveling-fastlane-1.4.7-osx/lib/vendor/ruby/2.2.0/gems/json-1.8.2/tests/fixtures/fail2.json:1:18

Unexpected end of input

     1│ ["Unclosed array"


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
node_modules/@expo/traveling-fastlane-darwin/traveling-fastlane-1.4.7-osx/lib/vendor/ruby/2.2.0/gems/json-1.8.2/tests/fixtures/fail20.json:1:17

Unexpected token :

     1│ {"Double colon":: null}


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
node_modules/@expo/traveling-fastlane-darwin/traveling-fastlane-1.4.7-osx/lib/vendor/ruby/2.2.0/gems/json-1.8.2/tests/fixtures/fail21.json:1:2

Literals cannot be used as shorthand properties.

     1│ {"Comma instead of colon", null}


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
node_modules/@expo/traveling-fastlane-darwin/traveling-fastlane-1.4.7-osx/lib/vendor/ruby/2.2.0/gems/json-1.8.2/tests/fixtures/fail22.json:1:26

Unexpected token :

     1│ ["Colon instead of comma": false]


npm ERR! code ELIFECYCLE
npm ERR! errno 110
npm ERR! [email protected] flow: `flow`
npm ERR! Exit status 110
npm ERR! 
npm ERR! Failed at the [email protected] flow script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/edward/.npm/_logs/2018-04-02T16_15_59_470Z-debug.log

Slessi on 2 Apr 2018

thank you @christophehurpeau

timlorepublic on 4 Apr 2018

@Slessi yes with SDK 26 you need to add
<PROJECT_ROOT>/node_modules/@expo/.* below <PROJECT_ROOT>/node_modules/expo/.* in the [ignore] section

christophehurpeau on 4 Apr 2018

:tada: Everything seems to work with flow 0.70:

If you upgraded to ^0.68.0:

Update to latest flow: ^0.70.0 under [version], also in package.json and run yarn install.
Remove <PROJECT_ROOT>/node_modules/react-native/Libraries/.* under the section [untyped]
Remove <PROJECT_ROOT>/node_modules/metro/.* under [ignore]
Replace suppress_comment=\$.\\|\n\$*\\$FlowFixMe\$$\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\$.[0-9]\\)? *\$site=[a-z,_]*react_native_oss[a-z,_]*\$?)\\) by suppress_comment=\$.\\|\n\$*\\$FlowFixMe\$$\\|[^(]\\|(\\(>=0\\.\\(5[0-8]\\|[1-4][0-9]\\|[0-9]\$.[0-9]\\)? *\$site=[a-z,_]*react_native_oss[a-z,_]*\$?)\\)

or on a new project:

Update to latest flow: ^0.70.0 under [version], also in package.json and run yarn install. Remove unsafe.enable_getters_and_setters=true.
Add <PROJECT_ROOT>/node_modules/@expo/.* under [ignore]
Replace suppress_comment=\$.\\|\n\$*\\$FlowFixMe\$$\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\$.[0-9]\\)? *\$site=[a-z,_]*react_native_oss[a-z,_]*\$?)\\) by suppress_comment=\$.\\|\n\$*\\$FlowFixMe\$$\\|[^(]\\|(\\(>=0\\.\\([1-6][0-9]\\|[0-9]\$.[0-9]\\)? *\$site=[a-z,_]*react_native_oss[a-z,_]*\$?)\\)

christophehurpeau on 24 Apr 2018

Not sure why, but I still get lots of errors with Flow 0.70.0

One of them:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/StyleSheet/flattenStyle.js:39:12

Cannot return getStyle(...) because number [1] is incompatible with object type [2].

 [1][2] 29│ function flattenStyle(style: ?StyleObj): ?Object {
          :
        36│     /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
        37│      * error found when Flow v0.63 was deployed. To see the error delete this
        38│      * comment and run Flow. */
        39│     return getStyle(style);
        40│   }
        41│
        42│   var result = {};

Strayer on 27 Apr 2018

we do not support flow in this project anymore. I should have removed it from the template earlier. done now: https://github.com/react-community/create-react-native-app/commit/58d41288859e6f0e3be801537e355b954fac7c5f

if this is important to anyone and you'd like to take charge of ensuring flow compatibility, let me know at brent at expo dot io and we can coordinate.

brentvatne on 27 Apr 2018

@brentvatne What is the recommended option for type-checking now?

vilanz on 29 Jun 2018

👍3

and how to get it working? I really don't understand how to configure it...and I tried almost everything.

daniele-zurico on 9 Jul 2018

In theory all you would need is to add .flowconfig, current version is 0.77.0

`[ignore]
; We fork some components by platform
./[.]android.js

; Ignore templates for 'react-native init'
/node_modules/react-native/local-cli/templates/.*

; Ignore RN jest
/node_modules/react-native/jest/.*

; Ignore RNTester
/node_modules/react-native/RNTester/.*

; Ignore the website subdir
/node_modules/react-native/website/.*

; Ignore the Dangerfile
/node_modules/react-native/danger/dangerfile.js

; Ignore Fbemitter
/node_modules/fbemitter/.*

; Ignore "BUCK" generated dirs
/node_modules/react-native/.buckd/

; Ignore unexpected extra "@providesModule"
./node_modules/./node_modules/fbjs/.*

; Ignore polyfills
/node_modules/react-native/Libraries/polyfills/.*

; Ignore various node_modules
/node_modules/react-native-gesture-handler/.*
/node_modules/expo/.*
/node_modules/react-navigation/.*
/node_modules/xdl/.*
/node_modules/reqwest/.*
/node_modules/metro-bundler/.*

[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow/
node_modules/expo/flow/

[options]
emoji=true

module.system=haste

module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.ios.js

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'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_type=$FixMe

unsafe.enable_getters_and_setters=true

[version]
^0.77.0`
that was all that was removed, btw people seem to be moving to typescript that have bigger comunity and less breaking changes between versions. also babel added built in support for typescript in babel 7.