REGISTER

Getting started with ReasonML and React Native

Mateusz Zatorski
2018-05-29

blog content

Need help with React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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, hence I enable the 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:

You should see:

ReasonML in React Native app

Happy hacking! 🎉

Here is the link to the repo with the above setup: https://github.com/knowbody/ReasonReactNativeApp

Summary

Thanks to lanqy, this blog post is also available in Chinese: https://lanqy.xyz/2018/05/30/getting-started-with-reasonml-and-react-native/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 docs.

Author:
Mateusz Zatorski
arrow icon
MORE posts from this author

learn more

More posts from this category

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.