React 0.68+ Turbo Module starter using codegen with typescript for Objective-C and Java/Kotlin with C++ shared library. 🚀🚀🚀

Overview

t-03

React 0.68+ Turbo Module starter using codegen with typescript for Objective-C and Java/Kotlin with C++ shared library. 🚀 🚀 🚀

Features

  • React Native 0.68+
  • Upgraded react-native-create-library module to TurboModule
  • Codegen with typescript
  • Objective-C using JSI without the bridge
  • Java/Kotlin using JSI without the bridge
  • Shared C++ TurboModule
  • Array/Dictionaries/Promises usage
  • Native usage (battery level)
  • M1 e2e Compilation of RN New Architecture

Considerations and Notes

  1. This module doesn't offer backward compatibility. You will only be able to use it with the new architecture enabled.
  2. The shared C++ library requires JNI bindings on Android, and converting types on iOS from C++ to Objective-C.
  3. We didn't find an easy way to incorporate Swift instead of Objective-C (it's not as easy to call C++ code from Swift).
  4. We pin CMake version to support M1 machines. We also used CMake to compile the shared C++ library because it's the recommended tech (in oppose to ndk-build).
  5. In the .podspec file, the version of folly has to be exactly the same as the react-native's version
  6. In case you are using an M1 machine, you will need to add the following to your local.properties file to build on Android (temporary workaround as mentioned here):
ndk.dir=/Users/{USER}/Library/Android/sdk/ndk/24.0.8215888

Running the example project

yarn bootstrap

iOS

yarn ios

Android

yarn android

Adding new functionality

Native functionality

  1. Open src/NativeTurboStarter.ts
  2. Add your function definition inside the Spec
  3. Open src/index.ts and export your new function via a wrapper
  4. Call your new function from App.tsx to test that it works

iOS

  1. Run RCT_NEW_ARCH_ENABLED=1 pod install in example/ios folder
  2. You can run xed ios to open to workspace, and on the left side-bar navigate to Pods -> Development Pods -> react-native-turbo-starter -> ios -> TurboStarter.mm and next to the @implementation XCode will offer to complete the missing protocol for you
  3. Alternatively, you can open TurboStarter.mm and implement the new function by yourself.
  4. We're done! You can find the generated code in this path: example/ios/build/generated/ios/TurboStarter

Android

  1. run ./gradlew generateCodegenArtifactsFromSchema in example/android
  2. You can open Android Studio and access android/src/main/java/com/reactnativeturbostarter/TurboStarterModule.kt and let android studio complete the missing new function for you
  3. Alternatively, you can open TurboStarterModule.kt and implement it by yourself
  4. We're done! You can find the generated code in this path: android/build/generated/source/codegen

Now you can re-run the example project and watch as your code runs with JSI!

C++ functionality

Follow the steps above, but consider the following:

  1. Declare your C++ function here: cpp/react-native-turbo-starter.h
  2. Implement your C++ function here: cpp/react-native-turbo-starter.cpp

iOS

  1. In TurboStarter.mm, implement the function from the Spec, and you will be able to use it as a wrapper for calling the C++ code.
  2. You will need to convert the types when returning the function like so
- (NSNumber *) turboMultiply:(double)num1 num2:(double)num2{
    double res = turbostarter::multiply(num1, num2);
    return [NSNumber numberWithDouble:res];
}

Android

  1. In TurboStarterModule.kt you will need to declare your native JNI function
private external fun nativeMultiply(num1: Double, num2: Double): Double
  1. Then you will be able to create a wrapper that calls the C++ code
override fun turboMultiply(num1: Double, num2: Double): Double {
  return nativeMultiply(num1, num2)
}
  1. In android/src/main/jni/cpp-adapter.cpp you will need to add the JNI function that wraps around the C++ function
extern "C" JNIEXPORT jdouble JNICALL
Java_com_reactnativeturbostarter_TurboStarterModule_nativeMultiply(JNIEnv *env, jclass type, jdouble num1, jdouble num2)
{
    return turbostarter::multiply(num1, num2);
}

Steps taken to create this repository

  1. Create the repo using react-native-create-library (https://github.com/talknagish/react-native-turbo-starter/commit/f755c6ec6aa653d46a92474592de552cb3ba3f6c)
  2. Upgrade the library to react-native 0.68 (#1)
  3. Upgrade the example to react-native 0.68 and call 1 turbo module function (#2)
  4. Expend the Spec and call complex types (#3)
  5. Call native code (#4)
  6. Add the shared C++ library (#5)

Known Issues

  1. Full refresh (cmd + R) on Android crashes the application because of an issue in shadowTreeRegistry.cpp (didn't find a respective issue in their repo)
  2. When building for Android codegen doesn't always generate the new spec, so sometimes you have to delete the build folders until we find a better solution

BridgeSpy

It's all nice but how do we know this is actually not using the bridge anymore? To see that we enabled JSI correctly, you can log out everything that is passing through the bridge and see that it's now clean (besides some data from metro-bundler)

in App.tsx

  1. Add import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue.js';

const spyFunction = (msg) => {
  console.log(msg);
};
  1. Call MessageQueue.spy(spyFunction);

Clone and create your own library

  1. clone react-native-turbo-starter
  2. cd react-native-turbo-starter
  3. rm -rf .git
  4. rename all files containing starter word (script in the future)
  5. git init
  6. git remote add origin <new repo url>
  7. git add .
  8. git commit -m "Initial Commit"
  9. git push -u origin main

We're Hiring

Nagish makes communication more accessible to all.

We believe that people who are Deaf or Hard-of-Hearing deserve to communicate on their own, without relying on anyone else.

We're always looking for talented humans who are interested in building the future of accessible communication with us.

If you like this project and want to work on similar tech click below

https://talknagish.com/careers

License

MIT

Comments
  • build: upgrade to react-native 0.68.1

    build: upgrade to react-native 0.68.1

    Issue : https://github.com/talknagish/react-native-turbo-starter/issues/24

    I have updated the exemple project to react native 0.68.1 as describe in : https://react-native-community.github.io/upgrade-helper/?from=0.68.0&to=0.68.1

    opened by rvasseur31 0
  • Turbo library setup

    Turbo library setup

    • upgrade react-native to 0.68
    • update podspec
    • android build.gradle and cmake updates
    • upgrade java to kotlin and update module
    • remove cpp module
    • update objective-c module definitions
    • declare spec for codegen
    opened by alon7 0
  • feat(script): add a script to rename the project

    feat(script): add a script to rename the project

    Like you mention in this issue : https://github.com/talknagish/react-native-turbo-starter/issues/23, I have created a script to rename the project.

    I was inspired by what I found in the branch renaming-project-script.

    To use it

    You can find the same doc in the readme.md

    Exemple

    yarn rename -m turbo-tester -c
    

    Options

    | Name | Short name | Required | Description | |:------------------------------|:-----------|:--------------|:-------------------------------------------| | --module-name <name> | -m <name>| yes | Your new module name | | --clean | -c | no |Remove script dependencies in package.json |

    Notes

    I ran the project on android & ios on a simulator with a macbook pro 13 m1

    opened by rvasseur31 1
  • android the app closes and 'TurboStarter' could not be found

    android the app closes and 'TurboStarter' could not be found

    hello, with ios it works perfect, but with android it doesn't, the app closes and i get this error: 2022-04-29 14:50:50.271 28083-28131/com.example.reactnativeturbostarter E/ReactNativeJS: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'TurboStarter' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes

    This my system information: System: OS: macOS 12.3.1 CPU: (4) x64 Intel(R) Core(TM) i7-5650U CPU @ 2.20GHz Memory: 600.11 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 17.8.0 - /usr/local/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 8.5.5 - /usr/local/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8309675 Xcode: 13.3/13E113 - /usr/bin/xcodebuild Languages: Java: 11.0.14.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.1 => 0.68.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

    Originally posted by @direstrepo24 in https://github.com/talknagish/react-native-turbo-starter/issues/27#issuecomment-1112749365

    opened by direstrepo24 1
  • Directly call C++ from JS

    Directly call C++ from JS

    Would it be possible to extend this example with codegen that directly invokes c++ methods from JS? Not sure if that's already possible.

    We've created a JSI library in c++ with a minimal obj-c/java boilerplate where methods are implemented in c++ directly (no need to expose it in obj-c/java) but it isn't set up to work with codegen yet (manual JSI setup).

    See here for the library: https://github.com/animo/react-native-bbs-signatures

    opened by TimoGlastra 6
  • Bridge C++ to Swift through Objective-C

    Bridge C++ to Swift through Objective-C

    I understand that it's pretty impossible to call call C++ from Swift, but Swift could call ObjC methods. In this article there is an example on how to use ObjC to bridge C++ to Swift and might be a good start to make this library support it too

    https://anuragajwani.medium.com/how-to-consume-c-code-in-swift-b4d64a04e989

    opened by gabimoncha 1
Owner
Nagish Inc.
Nagish Inc.
starter project for react native cli setups, typescript included

A starter project with react native 0.68, @storybook/react-native 6.0 beta, storybook/addon-react-native-web getting started To get all the dependenci

Danny 26 Dec 21, 2022
Repositório destinado para projeto da semana Spring React do Dev superior. Utilizando Java, TypeScript e Frameworks

⚛️ DS Meta - Semana Spring-React Repositório destinado para projeto da semana Spring React do Dev superior. Utilizando Java, JavaScript e Frameworks.

João Vítor Queiroz 2 Sep 11, 2022
React Native wrapper around Indy SDK Java and Objective-C wrappers.

React Native Indy SDK React Native Indy SDK wrapper. Installation with npm: $ npm install indy-sdk-react-native --save with Yarn: $ yarn add indy-sdk-

Hyperledger 21 Dec 5, 2022
A springboot-starter that can achieve Intranet penetration. 一款可以实现内网穿透的springboot-starter。

qynat-springboot-starter 基于netty的内网穿透工具在springboot中的整合 protocol协议:protobuf 只需在application.properties中配置少量信息,实现零代码侵入的web项目内网穿透 项目的server端的源码在另一个多模块项目中,

whz11 65 Dec 12, 2022
A springboot-starter that can achieve Intranet penetration. 一款可以实现内网穿透的springboot-starter。

qynat-springboot-starter 基于netty的内网穿透工具在springboot中的整合 protocol协议:protobuf 只需在application.properties中配置少量信息,实现零代码侵入的web项目内网穿透 项目的server端的源码在另一个多模块项目中,

whz11 65 Dec 12, 2022
CodeGen - a secure, high efficiency, and offline-able software, it provides several useful functions

CodeGen Efficiency ToolBox Introduce Download References Issues and Suggestions Software Preview Introduce CodeGen is a secure, high efficiency, and o

null 454 Jan 4, 2023
Spring Boot starter module for gRPC framework.

Spring Boot starter module for gRPC framework.

Michael Zhang 2.8k Jan 4, 2023
Spring Boot starter module for gRPC framework.

Spring Boot starter module for gRPC framework.

Michael Zhang 1.8k Mar 17, 2021
G&C (Good & Cheap) is a web application with the objective of ensuring sustainable consumption and production patterns in our cities.

MUBISOFT ECO Table of Contents G&C, Keep It Fresh! Sustainable Development Goals Application Requirements G&C, Keep It Fresh! G&C (Good & Cheap) is a

null 4 May 2, 2022
With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any other file server

React Native In-App update With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any o

Nepein Andrey 7 Dec 21, 2022
This is a little self hosted shared planner application server.

VPR-Backend This project includes the backend for the VPR-project. Installation and Getting Started To run the server you first have to install a MySQ

Marc Beyer 2 Feb 5, 2022
In this course, we will learn how to build a complete full-stack web application using Spring boot as backend and React (React Hooks) as frontend

In this course, we will learn how to build a complete full-stack web application using Spring boot as backend and React (React Hooks) as frontend. We will use MySQL database to store and retrieve the data.

Ramesh Fadatare 43 Dec 22, 2022
Sceneform React Native AR Component using ARCore and Google Filament as 3D engine. This the Sceneform Maintained Component for React Native

Discord Server Join us on Discord if you need a hand or just want to talk about Sceneform and AR. Features Remote and local assets Augmented Faces Clo

SceneView Open Community 42 Dec 17, 2022
This module explains about the example of Spring MVC + Database Integration with MySQL using Hibernate ORM with practical coding example and required JAR dependencies

SpringMVC-Database-Integration This module explains about the example of Spring MVC + Database Integration with MySQL using Hibernate ORM with practic

GowthamRaj K 3 Nov 2, 2021
This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database

This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database. The example that will be shown here focuses on the ability of two people to message each other in a chat room.

null 3 Jan 30, 2022
Create your Java crypto trading bot in minutes. Our Spring boot starter takes care of exchange connections, accounts, orders, trades, and positions so you can focus on building your strategies.

Quick Start | Documentation | Discord | Twitter Create and run your java crypto trading bot in minutes Our Spring boot starter takes care of exchange

Cassandre 442 Jan 3, 2023
Professional Java Developer Career Starter: Java Foundations Course Exercise Solutions

java-foundations-solutions Professional Java Developer Career Starter: Java Foundations Course Exercise Solutions The solutions are generally to be fo

Neutrino Systems Inc 41 Dec 28, 2022
Projeto criado na semana Spring React organizado pela escola Dev Superior com foco na prática/aprendizado das tecnologias Spring e React.

DSVendas Projeto criado na semana Spring React organizado pela escola Dev Superior com foco na prática/aprendizado das tecnologias Spring e React. htt

João Gabriel 3 May 18, 2021
A springboot starter for retrofit, and supports many functional feature enhancements, greatly simplifying development

retrofit-spring-boot-starter English Document Retrofit是适用于Android和Java且类型安全的HTTP客户端,其最大的特性的是支持通过接口的方式发起HTTP请求。而spring-boot是使用最广泛的Java开发框架,但是Retrofit官方

Ke Technologies 1.4k Jan 5, 2023