Usage of Turbo Native Modules within existing iOS and Android apps

[flokol120]

This turned out to be more like a guide on how I did this and less of a discussable topic... But maybe the discussion could be if what I did is out-of-spec, and if not, maybe this could be included in the documentation.

When using native modules, it was possible to use them within existing native apps without the necessity of creating a new module:

There are two ways to write a native module for your React Native application:

1. Directly within your React Native application’s iOS/Android projects
2. As a NPM package that can be installed as a dependency by your/other React Native applications (https://reactnative.dev/docs/native-modules-intro)

With Turbo Modules, this option is not mentioned in the documentation. I know that Turbo Modules are quite cutting-edge, but is it possible to use Turbo Modules directly within native apps, just like native modules? Well, it turns out, kind of :) (took me some time to figure out)

Why do I want this? I'm trying to integrate React Native into my existing iOS and Android apps (Brownfield). By using native modules directly within my native apps, I can easily access old implementations/data without having to port them over into standalone modules.

By doing some tinkering, I got this working on Android by essentially following the standard documentation but doing all the steps within my existing project. After that, I just had to overwrite the javaModuleProvider()within OnLoad.cpp to include my Turbo Native Module:

std::shared_ptr<TurboModule> javaModuleProvider(
    const std::string &name,
    const JavaTurboModule::InitParams &params) {
  auto module = RTNLoggingSpec_ModuleProvider(name, params); // <- this is my module
  if(module != nullptr) {
    return module;
  }

  // By default we just use the module providers autolinked by RN CLI
  return rncli_ModuleProvider(name, params);
}

On iOS, on the other hand, things were getting complicated for me. I placed the CodeGen artifacts within my iOS app (ios/build/generated/ios) and all my Spec files are there, just like on Android. But in order for XCode to recognize the Spec files, I had to include the folder ios/build/generated/ios into the Header Search Paths.

After that, I could create a new objective-c++ file to implement the interface. However, XCode has no direct way to create objective-c++ files. After renaming my Turbo Native Module implementation file to <Moduel_Name>.mm everything worked as expected.

I know this might not be the intended usage of Turbo Modules, but this really helps to adopt the new architecture in a brownfield scenario. Maybe somebody can build upon my approach, and I would appreciate any feedback. If something's not well described, feel free to reach out to me.

[cortinico]

With Turbo Modules, this option is not mentioned in the documentation. I know that Turbo Modules are quite cutting-edge, but is it possible to use Turbo Modules directly within native apps, just like native modules? Well, it turns out, kind of :) (took me some time to figure out)

If I understand correctly, you're asking how to use TurboModules without having to create an NPM package @flokol120 right?

As you mentioned, this is possible, but it's not documented just because we believe there is possibility to polish a bit the local module setup. Once we have that experience polished, we'll document it accordingly.

[NiuGuohui]

Do I have to create a local package? I just want to provide RN with some capabilities in the local app module.
Like (1) in this: #8 (comment)

[satya164]

@NiuGuohui well, you can implement it by looking at the examples there, but local library is the easiest way to do what you need. does it really matter how exactly you do it if it achieves your goal?

[sohayb]

it does matter in a brownfield app where a lot of the logic is on the native side of things and need to provide some glue code to stitch the 2 layers together, I was able to add TurboModules support within a brownfield app, hopefully I can have some time to create a sample project and post it.

[plibr]

you guys, would you give me direction to research, I need epub reader page in my RN app.

Q1. What should I use for it, TurboModule or Fabric Native Component?

Q2. It seems that Swift is not able to work directly in New Architecture. How to create communication with packages that written in Swift like, EPUBKit, FolioReaderKit?

Q3. Is it suitable to install EPUBKit or FolioReaderKit in for example RTNCalculator/ios directory?

[ncstc1]

I do not have much to say about ePub display but, as I use the New Architecture and Swift, I miss your point in Q2.

In case it helps, I found those examples - thank you to their authors! - useful:

• https://github.com/vicary/react-native-citizen-escposprinter
• https://github.com/atlj/react-native-kotlin-swift-backward-compatible-module

Note: this is just the result of my investigations and there are probably many other, maybe better, examples around...

[ncstc1]

@flokol120 This is brilliant ! It took me a while to find this post but this is exactly what we need... and that works perfectly.

Typically our native code depends on the iOS scheme/target or the android variant.
I could not find a way to do this with an actual module that has its own project definition.

[vipindvipin]

@flokol120 can you please help here ?

[flokol120]

@vipindvipin I am sorry but I cannot answer your question. I just wrote my bachelor's thesis on this topic and don't have very deep Insights on how things work internally.

[vipindvipin]

Thanks @flokol120

Hi @cortinico can you please guide me here ?

I have one doubt, as per the TurboModules are automatically registered by the generated code from Codegen.
Then why do we need register our TurboModule in MainApplication.java as well ?

OnLoad.cpp inside JNI folder, does the registration of our TurboModule, so why do we need to do add this TurboModule in MainApplication.java as well. Once I remove TurboModule from MainApplication.java, then it stops working?

For existing apps, only this solution worked for me @cortinico , which @flokol120 helped us with.

[cortinico]

Then why do we need register our TurboModule in MainApplication.java as well ?

TurboModules needs to be registered both in the Java and in the C++ layer. If you use React Native CLI or Expo, the registrations happens automatically for you with Autolinking

[vipindvipin]

@cortinico Actually I have implemented things in my app in the way m we have implemented in this project . So, it set the base line context that is why started a discussion here.

I can create a separate discussion as well, but discussion are around this project only, how these guys have implemented the things

I am using react native cli and on similar line , how we have done here, I am doing the things. So, just want to know why do we need register our TurboModule in MainApplication.java as well ?

[ospfranco]

It's now june, can we get some updated documentation on how to do this @cortinico? I tried following the steps inside of my app to create a internal turbo module, but when I try to generate the Java spec nothing is generated, even though I have the codegen config added into my package.json

[flokol120]

This branch is using codegen and a turbo native module: https://github.com/flokol120/react-native-brownfield-examples/tree/turbo-native-module (at least it should be using it 😅)

Edit: Nope sorry should have looked better... this is not a brownfield example. I got it working though. I'll take a deeper look into this later.

[ospfranco]

Thanks for the link, however, when I run the ./gradlew generateCodegenArtifactsFromSchema I get nothing

[cortinico]

@ospfranco which version of RN are you using? Do you have a repro I could look into? We can add some docs but as you can imagine, our backlog is quite full at the moment post ReactConf

[vipindvipin]

@cortinico In package json we added config for one Spec/Turbo module. How can we have this modified for multiple turbo module for our existing project.

And like flokol120 in their project, suggested a tweak in OnLoad.cpp for registration of turbo module, which is mentioned above and it's different from what is mentioned in official document. So, how can we achieve this?

Stuck here for a while. Please help use here @cortinico

[cortinico]

Stuck here for a while. Please help use here @cortinico

Please create a separate discussion, provide a reproducer, and the me or someone from the community will be more than happy to help you.

[Dunedubby]

One thing I'm confused by: why do we need to add the explicit link to build/generated/ios when the NPM packages and local packages have the exact same structure within node_modules (with the exception of the local packages secretly being behind a symlink)? I'm also seeing Xcode having trouble linking to the generated ...Spec.h, but I don't understand how the NPM packages themselves are linking just fine.

[Dunedubby]

Okay, upon investigating a bit further, it seems that through dark React Native magic ReactCodegen is added as a dependency to all the NPM packages Pods... maybe through some LDFLAGS? It seems like this should be amended to include local packages as well. In the meantime, adding s.dependency "ReactCodegen" in the local .podspec seems to get around this just as well as editing the .pbxproj file.

[cortinico]

cc @cipolleschi

[cipolleschi]

What's your local package setup? How is the podspec written?

If in your podspec you add this configuration, as shown in this example:

//...
install_modules_dependencies(s)
//...

this will add the dependency to Codegen and to all other React Native dependencies you need.

[Dunedubby]

Good catch! I must have accidentally lost that line at some point. Thank you for the heads up on that.