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: