Creating a JSI module

About JSI modules

JSI, TurboModules, Codegen, and New Architecture are often talked about in the same breath as if they're all part of the same thing, but in actuality, they're not. You can create JSI-based TurboModules without Codegen, and they can run on Old Architecture, at that.

I've never got on well with the official guides for creating a TurboModule. The Codegen step has a massive surface area for failure, and trying to hide all that complexity away using a CLI tool just prevents developers from properly mastering the fundamentals.

I prefer to build my JSI modules from zero. No CLI tool, no Codegen, no unknowns. It only takes a few files.

What do you mean by "JSI module"?

I'm avoiding saying "TurboModule" because in Old Architecture, native modules seem to be registered into both NativeModules and TurboModuleRegistry. In other words, both of these calls return a module:

import { NativeModules, TurboModuleRegistry } from "react-native";

// ① TurboModule
const MyModule = TurboModuleRegistry.get("MyModule");

// ② Legacy native module
const { MyModule } = NativeModules;

To add to the confusion, you can write a TurboModule that uses a mixture of both the legacy Batched Bridge APIs (e.g. RCT_EXPORT_METHOD) and JSI code (by grabbing the JSI Runtime from the Bridge, as you'll see below). React Native Windows makes it particularly clear that they're not genetically that different, as you can make a module be turbo or non-turbo simply by flipping a boolean when initialising it.

See the next pages for some boilerplates on how to create a simple JSI module for each different platform.