When rescript, @rescript/react and rescript-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 .res files to their .bs.js counterparts.

This means if you have an src/App.res 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.

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

To get the best development experience possible, we recommend you to use VSCode with ReScript plugin 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 ReScript editor plugin.

By having an IDE that handle ReScript 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 ReScript files being compiled to JavaScript.

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

When you open VSCode with the ReScript plugin, you won't have to do anything. The plugin will detect ReScript & will offer you to handle compilation.

⛑ 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.

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 ReScript 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

In one terminal:

yarn re:watch

As soon as .res 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 ReScript code to the React Native client.

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

Read more about starting the project in your environment of choice.

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.

@todo

Meanwhile, check out ReScript Import from/Export to JS page.

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

@todo

Meanwhile, check out ReScript Import from/Export to JS page