CODEWITHSUNDEEP
react-nativeflowtypereact-native-0.46
Val
Val

Reputation: 22797

How to install flow type correctly for react [email protected]+?

I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.

There was flow installation guide from [email protected] document, but it's gone in [email protected].

However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.

What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.

Upvotes: 10

Views: 6137

Answers (3)

Tyreal Gray
Tyreal Gray

Reputation: 373

I just finished covering half of our project by flow and we use RN 0.44.0.

The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.

Anyway, I disable the error in node_modules, and here is my .flowconfig:

[ignore]

<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]

[libs]
./flowLibs.js
.....
[lints]
[options]

You should install flow first if you not setup correctly,

npm install --save-dev flow-bin

and also run this in you project root after install:

npm run flow init

If npm run flow init does not work, just add "flow": "flow" in npm scripts.

After init, put my .flowconfig in your project .flowconfig file.

Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found

Write down code in flowLibs.js:

declare module 'Module_Name' {  declare var exports: any;  };

After that, you should be good to go with you project now.

BTW, don't forget add //@flow on the top of the file which you want to check type.

Upvotes: 7

Val
Val

Reputation: 22797

I found flowtype is built in with [email protected]+.

For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes@flow, it won't work without flow-bin, they should mention that too.

To make flowtype of best use, I use it with Visual Studio Code.

Steps:

  1. Install flow-bin globally, by npm i flow-bin -g. Make sure your terminal is responsive to command flow.
  2. Install vscode flow extension.
  3. Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place. To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.

then you have flowtype installed with visual result with every key stroke:

enter image description here

Upvotes: 5

A-J-A
A-J-A

Reputation: 2474

Try this one:

Adding Flow to React Native

https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809

Hope this helps!

Upvotes: 1

Related Questions