Usage

When bs-platform, reason-react and reason-react-native are installed, you can run the following command

yarn bsb -make-world

⚠️ If this process looks fast to you, don't be surprised, that's because ReScript is fast!

This command should compile all .re files to their .bs.js counterparts.

This means if you have an src/App.re file, you should now have src/App.bs.js file too.

You may also notice some compilation artifacts:

.bsb.lock

.merlin

lib/bs

You may want to gitignore all of these:

*.bs.js .bsb.lock .merlin lib/bs

If you used our template, it should be done already.

Automate compilation of *.re files

You have multipes way to not have to think about compilation for your daily workflow

Compile ReasonML files via IDE

To get the best development experience possible, we recommend you to use VSCode with Reason Language Server extension. Optionally you can add Flow Language Server extension if you have existing JavaScript covered by Flow.

⚠️ If you don’t want to use VSCode, we still recommend you to get a ReasonML editor plugin.

By having an IDE that handle ReasonML compilation, you will not have to run a command in the terminal to handle this & will just have to follow the standard React Native workflow, your ReasonML files being compiled to JavaScript.

You will also have inline errors & much more feature that won't be provided by using a CLI workflow.

Vscode workflow

When you open VSCode with the Reason Language Server plugin (RLS), you won't have to do anything. The plugin will detect bs-platform & will handle the compilation/watching process for you.

In case you are facing something weird, you can always trigger a cleanup by doing Cmd/Ctrl + Shift + P and look for Restart Reason Language Server.

Even if you decide to use Vscode or a smiliar IDE to ease your day to day development workflow, you should have a look to CLI workflow so you know how it works.

Compile ReasonML files via CLI

When you use React Native, you usually always have a terminal opened around with Metro Bundler running, which bundle the JavaScript files.

Now you need to also have a process watching for your ReasonML files to compile then to JavaScript. The easiest way is to rely on ReScript bsb watch option -w:

yarn bsb -make-world -w

If you are not familiar with ReScript bsb you should know that you might sometimes have weird compilation errors due to outdated build artifacts. This should not happen often but in case you are facing something weird, you can try using bsb -clean-world option

yarn bsb -clean-world

On a daily basis, you can use this complete command that will clean, build & watch for changes

yarn bsb -clean-world -make-world -w

You might want to add this two commands in your package.json scripts:

"scripts": { "re:build": "bsb -clean-world -make-world", "re:watch": "bsb -clean-world -make-world -w", "start": "react-native start", "ios": "react-native run-ios", "android": "react-native run-android", }

Note: you probably have start already.

If you are doing this change in your scripts, you can now use this development workflow

CLI Development workflow

In one terminal:

yarn re:watch

As soon as .re files are being compiled to .bs.js, you can either start the project on iOS Simulator (included in Xcode) or an Android Emulator (if you are unfamiliar with Android Studio, you might be interested by Genymotion).

In another terminal:

yarn ios

or

yarn android

This commands should open up a virtual device & start React Native metro bundler. This packager will serves the compiled Reason code to the React Native client.

Now you can start coding by editing files in src/!

Note: as soon as you have the app installed in a simulator/emulator, you can just run

yarn start

This avoid rebuilding the entire native parts & will just start React Native metro bundler.

Interoperability with JavaScript

Using JavaScript components from Reason

@todo

Meanwhile, check out Reason React interop page.

You can also browse the source of reason-react-native because that's exactly what this project is doing!

Using Reason React Native components from JavaScript

@todo

Meanwhile, check out Reason React interop page

👉 At this step, you should check our in-depth Example or go directly check our Cheatsheet

Further reading

In case you missed it