blog content
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:
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.