Getting Started With ReasonML and React Native

In short

Welcome to ReasonML, a statically typed functional language that has its roots in OCaml, a language with a well-established legacy of more than twenty years. ReasonML harmoniously merges the resilience of OCaml's type system with a contemporary, JavaScript-inspired syntax. Discover the basics of React Native and ReasonML with this concise guide crafted by the skilled engineers at Callstack.

Starting point

Let’s start by installing React Native CLI:

Now we can initialize a new React Native project, just like we would do with every React Native app:

Adding the “Reason bits”

We will need 3 packages:

bs-platform — compiles ReasonML/OCaml to clean, readable and performant JavaScript code
reason-react — Reason bindings for ReactJS
bs-react-native — BuckleScript bindings for React Native

Let’s add them to our project:

Now we need to create a <rte-code>bsconfig.json<rte-code>, which is a BuckleScript’s configuration file:

Let’s stop for a minute here. There are a few bits that are different from the usual setup.

First is <rte-code>"subdirs": true<rte-code>, makes BuckleScript aware that it should check subdirectories for code that should be compiled.

The other one is <rte-code>"in-source": true <rte-code>, this one is pretty handy, generates output alongside source files (by default they are output to <rte-code>lib/js<rte-code>). This is pretty useful when we reference <rte-code>.js<rte-code> files or assets files. Without it, to import an image you will reference it like:

with the option <rte-code>"in-source": true<rte-code>, it’s going to look like:

I prefer the latter, so I enable that option.

Let’s also add a few scripts to the <rte-code>package.json<rte-code> that we will use later to compile our code:

ReasonML in React Native

We are done with the configuration, to recap, we added three packages: <rte-code>bs-platform<rte-code>, <rte-code>reason-react<rte-code> and <rte-code>bs-react-native<rte-code>. Then we added BuckleScript’s config file <rte-code>bsconfig.json<rte-code>, that’s all!

Let’s write some Reason now.

As we previously defined in the <rte-code>bsconfig.json<rte-code> we will keep all of our ReasonML code in the <rte-code>src<rte-code> directory. In the newly created <rte-code>src<rte-code> directory (in the root of our project), let’s add App.re, it could look something like:

I also removed the <rte-code>App.js<rte-code> from the root of the project (that’s the file that is generated by React Native CLI).

Last thing we need to do is import our compiled <rte-code>App<rte-code> into the <rte-code>index.js<rte-code>:

Finally, we can compile our code by running:

This will watch for any changes you do to your Reason code and compile (if there are no errors).

Now let’s start the React Native app:

This is what you should see:

Happy hacking! 🎉

Here is the link to the repo with the above setup.

Summary

Here is a guide on how to get started with React Native and ReasonML. For the purpose of this blog post I assume that you are already familiar with React Native and partially with ReasonML. If you are not set with ReasonML yet, check out the ReasonML docs.