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

Overview

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

Issues
  • 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.

    opened by blu3beri 8
  • [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?

    opened by EduFrazao 1
Owner
Bartłomiej Klocek
Bartłomiej Klocek
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

Patricio Gonzalez Vivo 4.6k Aug 7, 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.

Takuya Matsuyama 200 Aug 6, 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

Ammar Ahmed 115 Jul 29, 2022
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

Microsoft 14.9k Aug 7, 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

Marc Rousavy 136 Aug 4, 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

Tomas Ravinskas 4 Jul 30, 2022
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

Marc Rousavy 75 Jul 28, 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

Matei Oprea 27 May 29, 2022
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

Weizhong Yang a.k.a zonble 55 Jul 23, 2022
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

Unity Technologies 73 Aug 5, 2022
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

null 7 May 21, 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

Zephyr Project 67 Jul 19, 2022
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.

null 65 Jul 27, 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.

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

null 15 Mar 20, 2022
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

null 75 Jul 30, 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

Jacob Baines 208 Jul 16, 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

null 22 Jun 20, 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

Sjoerd Vermeulen 2 May 7, 2022
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

null 5 Jun 27, 2022