Getting Started with React Native and Flow – React Native Training – Medium

Get started with #ReactJS Native and Flow:

  • Using the Flow server For a large project, you probably only want Flow to recheck files incrementally when they change.
  • 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.
  • To stop the server, we can run node_modules/.bin/flow stop to stop the server.
  • In our project, we start the server by running node_modules/.bin/flow , which we’ve saved as an npm script npm run flow .

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…

@ReactiveConf: Get started with #ReactJS 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!

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

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.

package.

file in your text editor and look at the bottom to see what version of flow is being required in your app:

 , 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

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.

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”: “node_modules/.bin/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:

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.

, and you should see this if all tests pass:

to make it easier to start and stop the flow server in the future:

“scripts”: {

Now, let’s get to adding some rules!

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:

{multiply(14, 14)}

 . Now, let’s change the multiply method to throw an error:

{multiply(14, ‘a’)}

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.

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).

(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.

, and clicking on the package once it is found.

Now, SublimeLinter flow is installed.

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 developer at School Status where we help educators make smart instructional decisions by providing all their data in one place. Check us out @schoolstatusapp.

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!

Getting Started with React Native and Flow – React Native Training – Medium