ReasonML in React Native

It not only allows to use JS in the middle of ReasonML code but also using JS libraries and their management system - NPM/Yarn.

Syntactically Reason is very similar to JavaScript and the differences are well described in official ReasonML Cheatsheet https://reasonml.github.io/docs/en/syntax-cheatsheet. Reason Although has very powerful parts which aren’t present in JS, such as Variants:

In the code above you can see variant data structure which consists of Red/Green/Blue options, which are not string values, but rather special constructor types. Colors variant is used in the switch statement, which returns proper hex value. Notice how functions and variables syntax is similar to JavaScript.

Static Typing

The most powerful thing distinguishing JS from ReasonML seems to be static typing. Instead of using Prop-types, Flow or TypeScript, you can choose rock-solid static typing system from mature and battle-tested OCaml language. On the other hand, static typing is not enforced. When prototyping, you can simply omit types and Reason will handle that, thanks to types inference. While creating ReasonML code you can use libraries from NPM, but in order to use JavaScript ones, you need to provide Reason bindings. In other words, you need to provide types for untyped JS library. You can search already prepared bindings in Redex website https://redex.github.io/

Reason React and Functional Programming

When React was created, Its author, Jordan Walke used language similar to OCaml, and later It was transcribed to JavaScript because of Its popularity. That’s why some concepts used in React are foreign for JavaScript, like eg. Immutability, which is not out-of-hand in this language.

In ReasonML, for variables, there is only let binding, which is immutable. Reassigning variable value throws an error at compilation time. The one way is to create the same binding which is shadowing previous one:

you can read more about mutating variable value in docs. https://reasonml.github.io/docs/en/mutation

When working with data sets Reason provides us List and Array. The main difference is that the List is immutable, while the array can mutate Its elements. You can find more use cases for them in ReasonML docs https://reasonml.github.io/docs/en/list-and-array

Functions in ReasonML are curried by default like in most functional programming languages. It’s much easier to partially apply some arguments, which in JavaScript requires usage of the libraries such as Lodash or Ramda.

React Native and ReasonML

ReasonML is language backed by Facebook and so are bindings for React known as Reason-React. Bindings for React Native are created mostly by the community as BS-React-Native. Currently, Reason-React has brand new syntax with “zero cost” bindings, created thanks to React hooks update. Unfortunately, React Native bindings need many changes and the newest update is still in progress.

To try out React Native with ReasonML is as simple as typing one CLI command:

react-native init MyApp --template reason

You can also add two simple scripts to package.json file in order to make the compilation process easier:

"scripts": {
  "start": "node node_modules/services/mobile-development/react-native-development/local-cli/cli.js start",
  "test": "jest",
  "build": "bsb -make-world -clean-world",
  "watch": "bsb -make-world -clean-world -w"
}

yarn build performs a single build and yarn watch enters watch mode. If you followed previous steps, you can use yarn watch and then open your project just like any other React Native app.

On the Reason website, you can find plugins for your favorite code editor: https://reasonml.github.io/docs/en/editor-plugins

Let’s create a simple component in Reason React Native. Put this Reason code below in src/App.re:

compiled JavaScript code should be in lib/js/src/App.js. React native should render screen with “Hello Reason World!” text.

Reason Future

ReasonML compiles to readable JavaScript and allows to use about 80% of its ecosystem & tooling. Moreover, It compiles to assembly and even to iOS and Android. Right now, with React Native we can only use bindings for JS and React, but in the future, React Native written in ReasonML could be compiled without JavaScript bridge, straight to native iOS and Android languages. The same code could be reused even in apps targeting desktop platforms such as Windows, Linux, and MacOS. At the moment of writing this article, It’s possible to use ReasonML for such purposes thanks to Revery, and the first Reason library targeting both mobile and desktop apps is Brisk. Both of them are “work in progress”.