Skip to main content

Example

As soon as you installed ReScript React Native properly and have you ./package.json and ./bsconfig.json ready, you can create two files:

  • ./App.js: a proxy for React Native to reference ReScript compiled app component
  • ./src/App.re: the actual React Native entry point, using Reason

If you used our template as explained in the installation guide, you should already have these files.

No worries, you can copy paste this if needed without understanding the content for now. Documentation will explain everything 😇.

./App.js​

This can be you only JavaScript file if you want to be full ReScript! It's just a proxy to App.res application wrapper.

/**
 * Do not modify this file - it is a proxy to your `App.re` file
 * located in the `src/` folder.
 */
export { app as default } from "./src/App.bs.js";

./src/App.res​

Please directly grab the App.res of our template, which will match React Native default Hello World!

Differences with React Native JavaScript​

Beside ReScript syntax that is a bit different with JavaScript, you may have noticed this major differences:

  • Modules are not imported, but opened instead (without reference to the filesystem file) and this is due to how modules work in ReScript (filename must be unique),
  • Component definition must be preceded with [@react.component],
  • const is not a thing in Reason, & let is the default as ReScript have a specific way to allow mutable variables,
  • String in JSX must be quoted and explicitely referenced as React.string (you will find similar specific React.* to specify null value (React.null), children from an array React.array...)
  • References to styles keys aren't using dot notation like in JavaScript but ## instead thanks to ReScript syntax sugar for direct JavaScript object access
  • You won't see any explicit export like in JavaScript. By default every variables defined in a ReScript module is exposed.

Start this example​

Now let's run this example.

In comparison with standard React Native development, the only thing you need to be sure that you have successfully compiled App.res as App.bs.js like we explained in the usage section.

As soon as ReScript compilation is successful, nothing should change for your development process. You can normally start your React Native app via react-native run-ios, react-native run-android or your classic web workflow if you use react-native-web!