A step by step example of creating your own React Native TurboModule.

Discovering Turbo Modules

Note: This example was made in RN 0.63. Some things have changed since then, but the good news is that now the setup should be easier in RN 0.67 / 0.68

A journey to discover React Native TurboModules. Alghough TurboModules aren't officially released yet and there is almost no documentation, there are already some libraries based on new infrastructure, including awesome Reanimated 2 by SWM. I digged through React Native source code and various Github repositories to learn how it is done. I managed to get it working, so I share my step-by-step journey here.

Each commit is a different stage towards a fully featured Turbo Module.

  1. see commit - Basic initialization and boilerplate (use npx create-react-native-library with C++ template)
  2. see commit - Adding fbjni for Android - it greatly improves Java - C++ interop.
  3. see commit - Migrating from legacy RN bridge to JSI.
  4. see commit - Implementing the "Real" Turbo Module.
  5. see commit - Calling Kotlin/Swift code from C++ module.
  6. TODO: Multithreading / asynchronous operations (a commit with experiments)

I'm not so creative in examples, I ended up with something simple, but demonstrating: The module consists of two methods:

  • sumSquares(a: number, b: number): number - calculates a^2 + b^2 - this method has C++ only implementation
  • makeGreetingFor(name: string): string - returns [Tag] Hello, {name}! - we want this method to be implemented for each platform separately in Kotlin/Swift.

Useful repositories and articles about Turbo Modules:

Known issues

  • In iOS project, after each pod install you have to manually add GreetingManager.swift to project in Xcode. Adding *.swift to podfile sources causes conflicts with React dependencies, because they're not modularized. You could also try with use_frameworks!.

Below is a react-native-builder-bob generated readme:

Installation

npm install my-turbo-utils

Usage

import MyTurboUtils from 'my-turbo-utils';

// 3*3 + 4*4 = 25
const result = await MyTurboUtils.sumSquares(3, 7);

const greeting = await MyTurboUtils.makeGreetingFor('TurboModules');

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Similar Resources

A (very) basic example of how to implement a Pawn native in open.mp.

open.mp Pawn native example Tools CMake 3.19+ Conan 1.33+ Tools on Windows Visual Studio 2019+ Visual Studio needs the Desktop development with C++ wo

May 5, 2022

Example-application - Example out-of-tree application that is also a module

Zephyr Example Application This repository contains a Zephyr example application. The main purpose of this repository is to serve as a reference on ho

Apr 29, 2022

KePOS is a 64-bit operating system. Design and implement your own operating system

KePOS is a 64-bit operating system. Design and implement your own operating system

KePOS is a 64-bit operating system. The purpose of this system is to combine the theoretical knowledge and practice of the operating system, and to deepen the understanding of the operating system.

Apr 6, 2022

A continuation of FSund's pteron-keyboard project. Feel free to contribute, or use these files to make your own! Kits and PCBs are also available through my facebook page.

A continuation of FSund's pteron-keyboard project. Feel free to contribute, or use these files to make your own! Kits and PCBs are also available through my facebook page.

pteron-pcb Intro This project is the evolution of the Pteron-Keyboard project, an incredible ergonomic keyboard that was handwired only. I aimed to in

Mar 20, 2022

Control Heidelberg Wallbox Energy Control over WiFi using ESP8266 and configure your own local load management

Control Heidelberg Wallbox Energy Control over WiFi using ESP8266 and configure your own local load management

scroll down for English version and additional information wbec WLAN-Anbindung der Heidelberg WallBox Energy Control über ESP8266 Die Heidelberg W

Apr 26, 2022

Bring your own print driver privilege escalation tool

Concealed Position Concealed Position is a local privilege escalation attack against Windows using the concept of "Bring Your Own Vulnerability". Spec

May 5, 2022

Apex cheat without R/W. can implement your own R/W and it will work fine

pubApexCheat Apex cheat without R/W. can implement your own R/W and it will work fine. will update readme later Aimbot Prediction and imGui draw funct

May 9, 2022

A fully customisable assembler for your own instruction sets

CASM A fully customisable assembler for your own instruction sets! What Is CASM? 🇨 Documentation 📚 Command-Line Usage 💻 How To Install CASM 💾 Buil

May 7, 2022

MyOwnBricks - A library for building your own sensors and devices compatible with the modern LEGO PoweredUp system.

MyOwnBricks - A library for building your own sensors and devices compatible with the modern LEGO PoweredUp system.

English version (See at the end for the French version) MyOwnBricks MyOwnBricks is a library for building your own sensors and devices compatible with

Mar 26, 2022
Comments
  • Global is not registered on the iOS side... sometimes.

    Global is not registered on the iOS side... sometimes.

    Hi,

    I've been implementing a very very simple multiply module, hello world is boring, and I followed your exact implementation. I am not sure if you also encountered this issue, but on the iOS sometimes it does not find any turboModule on global on the JS side. Hot-reloading it again makes it available, but this might be an issue in a production build and very annoying during development.

    Did you also encounter this issue? If not feel free to close this and I will mess around myself a bit. Your repo has been a massive help with the registering of my turbomodule.

    repo.

  • [Doubt] - Async Operations

    [Doubt] - Async Operations

    Hi @barthap . Thank you very mutch for sharing your discoverys. I'm trying to contribute with a project that you mention in your repo (react-native-quick-sqlite), implementing some async operations, but I have some doubts and problems that I couldn't overcome yeat.

    I need to use turbo modules in order to use callinvoker, or I can use it with a regular JSI Non Turbo Module implementation?

Step-by-step guide through the abstract and complex universe of Fragment Shaders.

The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment S

May 10, 2022
A fast base64 module for React Native

react-native-quick-base64 A native implementation of Base64 in C++ for React Native. 4x faster than base64-js on an iPhone 11 Pro.

May 18, 2022
Template library and blog that explain how JSI modules are built from scratch in React Native

react-native-jsi-template This is an example library that explains how anyone can build jsi modules from scratch in React Native. This code is written

Apr 29, 2022
A framework for building native Windows apps with React.
A framework for building native Windows apps with React.

React Native for Windows Build native Windows apps with React. See the official React Native website for an introduction to React Native. React Native

May 11, 2022
A contacts library for React Native using JSI

react-native-jsi-contacts The current react-native-contacts library uses the React Native Bridge to convert the native Java/Objective-C types to JavaS

May 14, 2022
React-Native build of Hyperswarm and dependencies

Testing Hyperbeam Start hyperbeam on your computer and copy-paste address to packages/mobile/App.tsx. Then in another terminal run yarn mobile:start a

Jan 3, 2022
A React Native library for accessing an ArrayBuffer of a Blob instance.
A React Native library for accessing an ArrayBuffer of a Blob instance.

react-native-blob-jsi-helper A React Native library for directly accessing an ArrayBuffer of a Blob instance. Note: This is a workaround. A long-term

May 6, 2022
React Native polyfill for crypto.getRandomValues. Used in libraries like uuid.

react-native-random-values-jsi-helper React Native polyfill for crypto.getRandomValues. Used in libraries like uuid. Installation yarn add react-nativ

Apr 24, 2022
Plays native alert sound and shows native dialogs/alerts in your Flutter app.
Plays native alert sound and shows native dialogs/alerts in your Flutter app.

flutter_platform_alert 2021 © Weizhong Yang a.k.a zonble. A simple plugin to present native alerts, including playing alert sounds and showing alert d

May 16, 2022
Visual Studio native debugger extension to help debug native applications using Mono.
Visual Studio native debugger extension to help debug native applications using Mono.

Unity Mixed Callstack UnityMixedCallstack is a Visual Studio 2017/2019 extension to help debug native applications embedding Mono, like Unity. If you

Apr 1, 2022