Getting Started With ReasonML and React Native

Authors

Mateusz Zatorski

Software Engineer

Callstack

Let’s start by installing React Native CLI:

npm i -g react-native-cli

view raw ReactNativeCLI hosted with ❤ by GitHub

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

react-native init MyReasonApp

view raw reactnative_init hosted with ❤ by GitHub

Adding the “Reason bits”

We will need 3 packages:

bs-platform — compiles ReasonML/OCaml to clean, readable and performant JavaScript code
reason-react — Reason bindings for ReactJS
bs-react-native — BuckleScript bindings for React Native

Let’s add them to our project:

npm i -P bs-platform reason-react bs-react-native

view raw reason_bits hosted with ❤ by GitHub

Now we need to create a <rte-code>bsconfig.json<rte-code>, which is a BuckleScript’s configuration file:

  
          {
        
            "name": "my-reason-app",
        
            "bsc-flags": ["-bs-no-version-header", "-bs-super-errors"],
        
            "refmt": 3,
        
            "bs-dependencies": ["reason-react", "bs-react-native"],
        
            "reason": {
        
              "react-jsx": 2
        
            },
        
            "package-specs": {
        
              "module": "commonjs",
        
              "in-source": true
        
            },
        
            "sources": [
        
              {
        
                "dir": "src",
        
                "subdirs": true
        
              }
        
            ]
        
          }

view raw bsconfig.json hosted with ❤ by GitHub

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

  
          <Image
        
            style=Styles.icon
        
            source=(
        
              Required(Packager.require("../../../assets/right.png"))
        
            )
        
          />

view raw input_image.js hosted with ❤ by GitHub

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

  
          <Image
        
            style=Styles.icon
        
            source=(Required(Packager.require(“./assets/right.png”)))
        
          />

view raw in_source_true.js hosted with ❤ by GitHub

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:

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

view raw package.json hosted with ❤ by GitHub

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:

  
          open BsReactNative;
        
          /* here we define some styles */
        
          module Styles = {
        
            open Style;
        
            let container =
        
              style([
        
                flex(1.),
        
                justifyContent(Center),
        
                alignItems(Center),
        
                backgroundColor(String("tomato")),
        
              ]);
        
            let text = style([color(String("#fff")), fontSize(Float(24.))]);
        
          };
        
          module Main = {
        
            let component = ReasonReact.statelessComponent("Main");
        
            let make = _children => {
        
              ...component,
        
              render: _self =>
        
                <View style=Styles.container>
        
                  <Text style=Styles.text>
        
                    (ReasonReact.string("Let's play with ReasonML!"))
        
                  </Text>
        
                </View>,
        
            };
        
          };
        
          let app = () => <Main />;

view raw App.re hosted with ❤ by GitHub

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

  
          import { AppRegistry } from 'react-native';
        
          import { app } from './src/App';
        
          /*
        
          if the "in-source" option is false (the defualt), you will import app this way:
        
          import { app } from "./lib/js/src/App.js";
        
          */
        
          AppRegistry.registerComponent('MyReasonApp', () => app);

view raw index.js hosted with ❤ by GitHub

Finally, we can compile our code by running:

npm run watch

view raw npm_run_watch hosted with ❤ by GitHub

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:

react-native run-ios

view raw start_react_native_app hosted with ❤ by GitHub

This is what you should see:

Happy hacking! 🎉

Here is the link to the repo with the above setup.

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.

Need help with React or React Native projects?

We support teams building scalable apps with React and React Native.

Let’s chat

Insights

Learn more about React Native

View all

Aug 4Podcast

VisionCamera V5 With Marc Rousavy

Marc Rousavy joins Mike Grabowski to unpack VisionCamera v5, Nitro Modules, the constraints API, migration work, and what changed for React Native camera apps.

Jul 1Podcast

Redraw for Effects Beyond Skia

William Candillon talks about where Redraw fits next to Skia, from physics-based rendering to camera effects, AR, and new UI patterns.

Jun 29Article

Less Boilerplate, More Type Safety: React Navigation 8's Typed Hooks

React Navigation 8 improves typed hooks with screen-aware types, less boilerplate, and fewer unsafe casts in shared UI and nested navigators.

Apr 30Live Stream

Build a React Native App With the TanStack Stack

Join Callstack’s live stream on building a React Native app from the ground up using the TanStack toolbelt.

Apr 28Article

React Native production lessons from React Universe Meetup x Zalando

Lessons from React Universe Meetup x Zalando on React Native in production, covering brownfield performance, feed video, native API access, and on-device AI.

Apr 23Talk

Shipping iOS Live Activities with React: The Voltra Story

How Voltra enables Live Activities and Dynamic Island views using React without writing Swift. A deep dive into iOS constraints and architecture.

Apr 16Live Stream

React Native 0.85: Animation Backend and Key Updates

A recap of React Native 0.85, covering the new animation backend, DevTools improvements, and ecosystem takeaways.

Mar 5Article

Keeping Screens Visible With <Activity mode="hidden">

A cross‑platform workaround to keep screens visible while <Activity mode="hidden"> unmounts effects on inactive screens by setting mode="hidden".

Feb 25Article

React Native Monorepo With pnpm Workspaces

Set up a React Native monorepo with pnpm workspaces for mobile and Next.js web, including Metro fixes, hoisted node-linker, and shared packages.

Feb 18Article

A Practical Guide to React Native Monorepo With Yarn Workspaces

Learn how to set up a React Native monorepo with Yarn workspaces for mobile and web, including Metro, Gradle, and shared packages.

Feb 17Podcast

From Teddy Bears to Voice Agents: Kraen Hansen on Voice AI, Local-First & App Security

What happens when you combine voice agents and teddy bears? A hands-on look at local-first systems, voice AI, and security lessons from poking real apps.

Jan 28Article

Bringing CSS Clipping to React Native

A deep look at how a single CSS feature moves through React Native’s New Architecture, from JavaScript styles to native rendering on iOS and Android.

Mar 19Tutorial

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Learn how React Native AI uses a unified provider model to switch between cloud and on-device LLMs without rewriting application logic, enabling reliable AI experiences online and offline.

Mar 12Tutorial

Build Smarter Apps: Tool Calling & AI Orchestration Explained

Learn how on-device models in React Native can call tools, interact with external APIs, and return structured outputs you can use directly in application logic.

Mar 5Tutorial

MLC LLM + React Native: On-Device AI Without the Pain

Learn how to run third-party on-device LLMs in React Native using MLC LLM. Choose your models, run them efficiently across platforms, and keep a unified JavaScript API with React Native AI.

Feb 24Tutorial

Intelligent Fallbacks with Apple Intelligence in React Native

Learn how to use Apple’s built-in Foundation Models in React Native apps, reduce memory usage, and enable fast, fully on-device AI with React Native AI Apple.

Feb 10Tutorial

What Is the React Native AI SDK? A Complete Intro & Quickstart

Learn why on-device AI matters for React Native apps, how local LLMs behave offline, and what problems React Native AI is designed to solve from day one.

Jan 29Tutorial

Implementing an Android TurboModule with Kotlin

Learn how to implement a React Native TurboModule on Android, from the TypeScript spec and Codegen to the Kotlin implementation and package registration.

Jan 19Tutorial

Working with Different Threads in Swift TurboModules

Learn how JavaScript, native module, background, and main threads interact in React Native TurboModules, and how to use GCD queues to run async work safely in Swift.

Jan 9Tutorial

How to Add Type-Safe Constants to Swift TurboModules

Learn how to expose typed, immutable constants from a Swift TurboModule using Codegen, and get full end-to-end type safety between native and JavaScript.

Dec 30Tutorial

Adding Event Emitters to Your TurboModule in Swift

Learn how to emit native events from a Swift TurboModule and subscribe to them in JavaScript, including proper memory management and Codegen integration.

Dec 22Tutorial

Writing Your First TurboModule in Swift

Learn how to build a fully working TurboModule in Swift, integrate it with Codegen, and bridge it through Objective‑C inside an Expo app.

	{
	"name": "my-reason-app",
	"bsc-flags": ["-bs-no-version-header", "-bs-super-errors"],
	"refmt": 3,
	"bs-dependencies": ["reason-react", "bs-react-native"],
	"reason": {
	"react-jsx": 2
	},
	"package-specs": {
	"module": "commonjs",
	"in-source": true
	},
	"sources": [
	{
	"dir": "src",
	"subdirs": true
	}
	]
	}

	<Image
	style=Styles.icon
	source=(
	Required(Packager.require("../../../assets/right.png"))
	)
	/>

	<Image
	style=Styles.icon
	source=(Required(Packager.require(“./assets/right.png”)))
	/>

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

	open BsReactNative;

	/* here we define some styles */
	module Styles = {
	open Style;

	let container =
	style([
	flex(1.),
	justifyContent(Center),
	alignItems(Center),
	backgroundColor(String("tomato")),
	]);

	let text = style([color(String("#fff")), fontSize(Float(24.))]);
	};

	module Main = {
	let component = ReasonReact.statelessComponent("Main");

	let make = _children => {
	...component,
	render: _self =>
	<View style=Styles.container>
	<Text style=Styles.text>
	(ReasonReact.string("Let's play with ReasonML!"))
	</Text>
	</View>,
	};
	};

	let app = () => <Main />;

	import { AppRegistry } from 'react-native';
	import { app } from './src/App';

	/*
	if the "in-source" option is false (the defualt), you will import app this way:
	import { app } from "./lib/js/src/App.js";
	*/

	AppRegistry.registerComponent('MyReasonApp', () => app);