---
title: "Getting Started With ReasonML and React Native"
description: "Learn how to get started with React Native and ReasonML with the short guide prepared by Callstack engineers team."
url: https://www.callstack.com/blog/getting-started-with-reasonml-and-react-native
updated: 2026-10-24T08:39:30.134Z
---

# Getting Started With ReasonML and React Native

Learn how to get started with React Native and ReasonML with the short guide prepared by Callstack engineers team.

_By Mateusz Zatorski, Software Engineer @ Callstack · Published 2018-05-29 · Category: React Native_

Let’s start by [installing React Native CLI](https://reasonml.github.io/docs/en/global-installation.html):

[GitHub Gist](https://gist.github.com/callstack-bot/dead7f15448e0baf51e31951e35e0325)

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

[GitHub Gist](https://gist.github.com/callstack-bot/9f169eb746d77d84fbf07d51184c9730)

## Adding the “Reason bits”

We will need 3 packages:

- [bs-platform](https://bucklescript.github.io/docs/en/what-why.html) — compiles ReasonML/OCaml to clean, readable and performant JavaScript code
- [reason-react](https://reasonml.github.io/reason-react) — Reason bindings for ReactJS
- [bs-react-native](https://github.com/reasonml-community/bs-react-native) — BuckleScript bindings for React Native

Let’s add them to our project:

[GitHub Gist](https://gist.github.com/callstack-bot/166aef19eceb816f3f24b8cabd26d60f)

Now we need to create a \<rte-code\>bsconfig.json\<rte-code\>, which is a [BuckleScript’s configuration file](https://bucklescript.github.io/docs/en/build-configuration.html):

[GitHub Gist](https://gist.github.com/callstack-bot/c96b0f105da85be9264b17cc99b9645d)

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](https://bucklescript.github.io/docs/en/build-configuration.html#sources)\<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](https://bucklescript.github.io/docs/en/build-configuration.html#package-specs) \<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:  


[GitHub Gist](https://gist.github.com/callstack-bot/3476551d00594677f8bcd3fe1a598b65)

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


[GitHub Gist](https://gist.github.com/callstack-bot/2b4a71dbb8675580a8d8f39b97bb7a5f)

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:  


[GitHub Gist](https://gist.github.com/callstack-bot/b944ecb559dc8ff5a80e31c43b7a2307)

## 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:

[GitHub Gist](https://gist.github.com/callstack-bot/8e6b22c14b2cadb13674419353b0df60)

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\>:

[GitHub Gist](https://gist.github.com/callstack-bot/77fa0d802fdb4e340c351ed2b292b98d)

Finally, we can compile our code by running:

[GitHub Gist](https://gist.github.com/callstack-bot/b85a01aa88a49c6ac7550ff5c1e7b4e8)

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:

[GitHub Gist](https://gist.github.com/callstack-bot/07afc2b8c2c6fc9b7964d431a66113c8)

This is what you should see:

![ReasonML in React Native app](https://www.callstack.com/assets/ReasonML-in-React-Native.png)

Happy hacking! 🎉

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

## 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](https://reasonml.github.io/docs/en/global-installation.html).