Using flow with react native

As a best practice when you start a react native project you could take into consideration using a static type checker. We will start talking about flow and how we can use it with react native.

If you don’t know what is flow, I encourage you to take a look at the docs, but as a general idea flow is a static type checker for JavaScript. For react on the other hand we can use PropTypes witch is already into react.

Flow or PropTypes ?

Well with PropTypes you can add rules just for the component props and can give you warnings, which is a good way to find bad code and fix it, on the other hand, Flow is allowing you to add a type annotation to all of your code and catch all the bugs at compile time.

Flow with react native

Let’s start by adding flow to react-native. If you start a fresh project with react-native init and you open App.js the file you will see at the beginning that Flow is already there, but we need to make some changes to have it in action.

You will find also a .flowconfig file where you can add configurations, is like .eslintrc for eslint. New react-native projects come with a .flowconfig . Now next step is to install flow-bin package with yarn add flow-bin@0.86 . I added this version because if you check .flowconfig you will see what flow-bin you need to install. So open .flowconfig file first and look at the end of the file to get your version number.

Now after we added flow package we need to do some changes in package.json file and add flow command.

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

You can run with: yarn run flow or npm run flow

Now you have flow installed, don’t forget to add @flow to the beginning of components to write good code. Check also how to add Redux to your project or because we learned how to add flow you can add also prettier and eslint for a better configuration.

Sharing is caring!