Getting Started With ReasonML and React Native
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.
Learn more about
React Native
Here's everything we published recently on this topic.
We can help you move
it forward!
At Callstack, we work with companies big and small, pushing React Native everyday.
React Native Performance Optimization
Improve React Native apps speed and efficiency through targeted performance enhancements.
Code Sharing
Implement effective code-sharing strategies across all platforms to accelerate shipping and reduce code duplication.
Mobile App Development
Launch on both Android and iOS with single codebase, keeping high-performance and platform-specific UX.
React Native Development
Hire expert React Native engineers to build, scale, or improve your app — from day one to production.
