HOME
|
COMMUNITY
|
BLOG
|
Getting Started With ReasonML and React Native

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:

ReasonML in React Native app

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.

React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook
Download

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.