Getting Started with React Native and Flow

Nader Dabit

·

Subscribe

Published in

React Native Training

·

5 min read

·

Nov 8, 2016

6

Share

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…