Getting Started with React Native and Flow

Adding static typing to your React Native application.

Flow allows us to easily add static type checking to our JavaScript. Flow will help you prevent bugs and allow for better code documentation among other things. A lot of the React Native documentation and source code already also uses flow, so there has never been a better time to start using it!

At the end of this article, we will also add SublimeLinter-flow to Sublime Text to give us real time type checking in our editor!

Adding Flow to React Native

To get started, let’s create a new React Native app:

react-native init flowApp
The .flowconfig file is a place to put your specific flow configuration, similar to an .eslintrc file for eslint. New React Native projects come with a pre configured .flowconfig file out of the box. We will be using this default configuration for the rest of the tutorial. If you want to customize your configuration or learn more about configuration, check out the docs.

Now, we need to install flow using the flow-bin package.

cd into the root directory, and open the .flowconfig file in your text editor and look at the bottom to see what version of flow is being required in your app:

For me, it’s version 0.33.0 , so that’s going to be the version I install and save as a dev dependency.

yarn add flow-bin@0.33.0 --dev

or

npm i flow-bin@0.33.0 --save-dev
We are installing flow on a per project basis, in this tutorial, as recommended from the docs and most people I have talked to in the community. The reason that the preferred method of installation is per project is that different .flowconfig configurations call for different versions of flow, and if it is installed globally, it will not work a lot of the times. To learn more about global installation, check out the docs here.

Now that the correct version of flow is installed, the last thing we need to do is set up an easy command for us to run whenever we want to type check. For me, npm run flow makes a lot of sense, so let’s open up package.json and add the flow script to our scripts:

"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"flow": "flow"
},

Now, we can go to the command line to start the flow server for the first time:

npm run flow

And we should get this:

From the docs:

Using the Flow server
For a large project, you probably only want Flow to recheck files incrementally when they change. Flow uses a client/server architecture which allows you to start a Flow server that will run in the background and type check files as they change.

In our project, we start the server by running node_modules/.bin/flow, which we’ve saved as an npm script npm run flow.

You can then check the status of the server again later with the same command: npm run flow, and you should see this if all tests pass:

To stop the server, we can run node_modules/.bin/flow stop to stop the server. I’ve also added this as a script called flow-stop to make it easier to start and stop the flow server in the future:

"scripts": {
...
"flow": "flow",
"flow-stop": "flow stop”
}

Now, let’s get to adding some rules!

Let’s open index.ios.js or index.android.js and create a method that multiplies two numbers:

function multiply(n1: number, n2: number): number {
return n1 * n2;
}

Now, we can use this method in our code:

<Text>{multiply(14, 14)}</Text>

If we run npm run flow we get No errors! . Now, let’s change the multiply method to throw an error:

<Text>{multiply(14, 'a')}</Text>

Now, if we run npm run flow we get something like this:

Flow is working!

There are a lot of things that you can do with flow, and this article is not intended to be a full on introduction to flow. If you’re interested in learning more about what types you can use, and how to implement them, check out the docs here.

Adding SublimeLinter-flow to Sublime Text

SublimeLinter-flow allows us to have instant type checking as we type our code. If you use Sublime Text and want to use Flow in your workflow, SublimeLinter-flow is a must! (similar plugins are also available for Atom, VSCode, and most other popular text editors).

To get started, we first need to make sure we either have flow set up in our project at node_modules/bin/flow (as we have already done above) or installed globally.

Next, we need to either install SublimeLinter or make sure it is already installed. If you do not have SublimeLinter installed, check out the installation instructions here.

Now, we need to open PackageControl by typing Cmd+shift+p, and choosing Package Control: Install Package, then searching for SublimeLinter-flow, and clicking on the package once it is found.

Now, SublimeLinter flow is installed.

Next, restart Sublime Text to make sure the package is working, and open the same file where we placed our original type anotation, index.ios.js or index.android.js.

Now, we should be getting error messages and syntax highlighting directly in our editor:

That’s all you need to know to get started with React Native and flow!

Special shout out to Mike Grabowski for helping me learn Flow. Also check out https://blog.callstack.io/typed-redux-2aa8bff926ff#.e5vp4d7oh if you want to learn how to add Flow to your Redux application.

My Name is Nader Dabit . I am a software consultant and trainer and the founder of React Native Training where we teach developers at top companies around the world how to quickly get up and running with React Native.
If you like React and React Native, checkout out our podcast — React Native Radio on Devchat.tv
Also, check out my book, React Native in Action now available from Manning Publications
If you enjoyed this article, please recommend and share it! Thanks for your time!