One drawback of writing in React Native is the lack of type-checking that is common in Javascript. While using a separate language like TypeScript is a possibility, it also requires full commitment to the build process and for developers familiar with Javascript to learn a new technology. Flow is a popular alternative that actually ships with React Native. This post intends to show you how to get the flow errors and warnings in your Atom editor as well as how to set up pre-commit to restrict committing code that has Flow errors.

Note: This post will be using a new project but feel free to use the steps here to use Flow in an existing project.

Adding Flow-bin The first step is to figure out what version of flow your project is using. You can do this by opening the .flowconfig file and looking at the last line. DevelopinginReactNativeusingAtomandFlow 1 Knowing that we are using version 0.33.0 means we need to include this flow-bin version in our project. Install it with:

npm install --save-dev flow-bin@0.33.0							

Next, set up a script to run flow by adding this line in the “scripts” object in your package.json:

"flow": "flow; test $? -eq 1 -o $? -eq 2"

This will allow you to run npm run flow and get the error and warning results. While this looks strange, the “test” part is basically telling the command line what to return from the previous command.

Adding Flow to Atom

To get these errors showing up in Atom, you need to install Nuclide. Close your Atom instance so changes will be available on restart. Go to a terminal and run the following command:

apm install nuclide

This will install the suite of Facebook tools for Atom and will make your Atom experience generally more awesome. When you reopen Atom, you need to make sure to install Nuclide’s recommended packages. Navigate to Packages -> Settings View -> Manage Packages and type in “Nuclide” and click on the settings button: DevelopinginReactNativeusingAtomandFlow 2 Next down and check the box that says “Install Recommended Packages on Startup” DevelopinginReactNativeusingAtomandFlow 4 Scroll to Nuclide-Flow and check the box that says “Use the Flow binary included in each project’s flow-bin” DevelopinginReactNativeusingAtomandFlow 3 Restart your Atom and these should be installed. You can verify this is set up correctly by editing a file with @flow in the top and adding:

let x: string = 123;

Prevent Committing Flow Errors The last part is to prevent commits from features with flow errors. For this we will use the pre-commit package.

npm install --save-dev pre-commit

Note: There are two “pre-commit” packages; one with a hyphen and one without. Make sure you get the one with the hyphen: “pre-commit”.

Pre-commit is set up by adding the following code to your package.json:

"precommit.silent": true,
  "pre-commit": [
    "flow:precommit"
  ],

This is using a script command “flow:precommit” that we have not written yet. We’re using this because the “flow” command does not exit with a response which is what we need.

Note: This implementation sets precommit to silent mode which hides some documentation of how to override the errors. (You can skip the precommit verification by adding -n to the commit but this is discouraged as it will skip all your linters.)

The last step is to get the “flow:precommit” script setup. I like to add some extra messaging to highlight the status of the flow process so I’ll present the basic form of validation followed by a method you can customize. Add the following to your “scripts” in your package.json file:

"flow:precommit": "flow; test $? -eq 1 -o $? -eq 2 && exit 1 || exit 0"

Now you are ready to commit help make the world a better place by preventing silly type errors!