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.

[flokol120]

@ncstc1 Glad it helped! You can also take a look into https://github.com/flokol120/react-native-brownfield-examples. It illustrates several React Native brownfield scenarios, some using turbo-native-modules.

[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]

I would also be very happy if this was better documented. But you could take a look into my repo explaining the brownfield usage of react native: https://github.com/flokol120/react-native-brownfield-examples

It has some turbo native modules examples. You can easily diff different branches to see what I did exactly.

[ospfranco]

I already took a look into the logging example and it is not using codegen/turbo modules. Is there an example where you linked an internal turbo module with a codegen config in 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