Building C++ / JSI Native Modules for React Native in 2024

Cain Hansen works for MongoDB, building developer tools and maintaining a React Native library for the mobile database Realm.

A native module in React Native is a container of related native code that is discoverable by the app during build and runtime, enabling deeper platform integration.

Building a C++ native module allows for platform-independent performance code, although it comes with challenges like increased build times and a higher learning curve.

C++ native modules can lead to increased build times, complex dependency management, and a higher learning curve, potentially lowering developer productivity.

The new architecture in React Native includes the JavaScript Interface (JSI), which improves interaction with JavaScript engines and enables more efficient native module design.

JSI, or JavaScript Interface, is an abstraction over JavaScript engines that allows React Native to interact with C++ modules, enhancing performance and integration.

NitroModules are a recent innovation supporting C++, Swift, and Kotlin; they offer expressive code generation and support both old and new React Native architectures.

Pre-building native code reduces build time and complexity for library users, allowing type failures to be caught during development rather than on user machines.

React Native APIs should be avoided in pre-builds because the ABI is not stable across React Native versions, which could lead to compatibility issues.

The recommended approach is to use NitroModules for complex C++ projects, consider pre-builds to reduce build times, and use a compiler cache to speed up compilation.