Docs: Getting Started with the New Architecture

[cortinico]

Hi all,
This thread is to collect feedback on the section of the website called: Getting Started with the New Architecture - https://reactnative.dev/docs/next/new-architecture-intro

If you happen to go through the guide, feel free to report:

• Any instructions that is not working correctly.
• Any unexpected behavior.
• Any assumption that we're making and that are making hard for you to follow through the instructions.

General feedback is also more than welcome.

[HugoGresse]

I may be wrong but most of the examples are written in flow, could be great to have a vanilla js alternative available.
Example: https://reactnative.dev/docs/next/new-architecture-library-intro#writing-the-javascript-spec

[cortinico]

Thanks for pointing this out.

could be great to have a vanilla js alternative available

That won't be possible as the codegen is understanding only Flow or TypeScript (in beta) at the moment. As the Codegen is generating code for statically typed languages (Java/C++/ObjC), it needs to work with languages that have the concept of types.

Currently, the docs contains only Flow example, but we're going to update them with TS examples in the near future.

[aarongrider]

Worked through the TurboModules guide this weekend, here is a bit of my feedback. I am also happy to create PR with suggested changes if that is helpful.

• Location of js spec file is not described, it's also called NativeCalculator which isn't consistent with the module / package name (should it be NativeRTNCalculator?)
• Directory listing on (https://reactnative.dev/docs/next/the-new-architecture/pillars-turbomodules#write-the-native-android-code) is not consistent with instructions above (RTNCalculatorModule vs CalculatorModule)
• By default my metro and babel config did not support the import style used in App. (import RTNCalculator from 'rtn-calculator/js/NativeCalculator.js'), this could be a hang up.

Planning on moving on to the Fabric tutorial later this week.

[cipolleschi]

Hi @aarongrider, thank you so much for the feedback!

Location of js spec file is not described,

That's because there is not a preferred location: you may use src, you may use lib, or you may use a js folder, depending on your configuration. As long as the same folder is exported by the package.json and used correctly in the codegenConfig block, you should be fine. 😉

Name consistency

Thanks for reporting this. It would be great if you can make a PR for that.

By default my metro and babel config did not support the import style used in App. (import RTNCalculator from 'rtn-calculator/js/NativeCalculator.js'), this could be a hang up.

Every step of the guide has been tested. The JavaScript specs and the App are using Flow as JavaScript dialect.
Which setup are you using? Are you writing the app in TypeScript, perhaps?

[aarongrider]

That makes sense. Wasn't completely clear from the docs that was the case. Might make sense to call that out?

Sounds good, will do.

Yeah, was using TS. TS requires a bunch of extra metro / babel config to get this to work. Do we not assume people going through this flow might be using TS for their app in addition to the module? This might be another thing we want to call out, at least make a mention that a TS project will require additional configuration.

[cortinico]

That's because there is not a preferred location: you may use src, you may use lib, or you may use a js folder, depending on your configuration. As long as the same folder is exported by the package.json and used correctly in the codegenConfig block, you should be fine. 😉

RE to this: I think we should suggest src as default location. Specifically I'm afraid users will leave files in the top level folder. As both the codegen & autolinking rely on globbing, having files in folders where a node_modules can be found is risky. Having a self contained folder is probably easier to maintain in the long run (src/js/or whatever works).

[satya164]

I think src is perfect since most of the community already uses src for JS code. create-react-native-library also uses src for the generated project. lib is usually the compiled files, but some use dist as well.

[rushatgabhane]

I think it'd be helpful if the docs mentioned why setNativeProps was deprecated.

[griffinshuth]

I just want to be clear on this. we cant use swift files with turbo modules correct?

[cipolleschi]

@griffinshuth I created a guide/example you can follow to wrap your library. You can have a look at it here

It is a TurboModule with the main logic in Swift. I also implemented the delegation pattern so you can instantiate your Swift class and call back some of the Objective-C++ APIs. Unfortunately, you'll sill have to write some Objective-C++, but it should be quite straightforward.

[griffinshuth]

@cortinico so i followed all the steps up on those branches and when it came to run the app in xcode i got this error. Here is a link to the repo i made as i followed along with your code.

error build: Using bridging headers with module interfaces is unsupported
error build: Using bridging headers with framework targets is unsupported

https://github.com/griffinshuth/NewRNARCHWITHSWIFT

[griffinshuth]

@cortinico So i was able to get it to build that repo i had to create a new react native project. and do

npx react-native init NewArchitecture --version 0.71.0-rc.3

that was the only way i could do that so i tried to update my current app to that version but it looks like what ever we are doing on the version makes this no longer work.

#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
#import "RNAppAuthAuthorizationFlowManager.h"

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, RNAppAuthAuthorizationFlowManager>

@property (nonatomic, strong) UIWindow *window;

@property(nonatomic, weak)id<RNAppAuthAuthorizationFlowManagerDelegate>authorizationFlowManagerDelegate;

@end

since we need to put the interface like this. Is this correct? IF it is this might be a dumb question but will I be able to add a another interface so i can use RNAppAuthAuthorizationFlowManager.h?

@interface AppDelegate : RCTAppDelegate

[cortinico]

Hey @griffinshuth

s/ @cortinico / @cipolleschi

:)

[cipolleschi]

@griffinshuth, I discovered today that there is a typo in the podspec of the example I provided: react-native-community/RNNewArchitectureLibraries#10. That typos is the cause of the three errors we are seeing in Xcode.
Thanks to @TheInkedEngineer for spotting it.

[cipolleschi]

@griffinshuth Nico is on PTO until January! 😉 But I'll be available almost for the whole holiday period, so I can help with any iOS related issues.

error build: Using bridging headers with module interfaces is unsupported
error build: Using bridging headers with framework targets is unsupported

I saw these errors, but even if Xcode output them, the build is successful and the app can execute properly. I still have to figure out what's the best path to avoid them, but we are at least in a setup where users can develop and test their code.

I had to create a new react native project. and do npx react-native init NewArchitecture --version 0.71.0-rc.3

The reason why you need to create the app with version 0.71 is because the podspec in the example uses a function that requires that version. It should work also with 0.70, if you change those lines in the calculator.podspec:

+folly_version = '2021.07.22.00'
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'

Pod::Spec.new do |s|
  s.name            = "calculator"
  s.version         = package["version"]
  # ...
-  install_modules_dependencies(s)
+  # This guard prevent to install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig    = {
+          "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+          "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+      }
+
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly", folly_version
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+  end

Note: yesterday, we release RC5 for 0.71. We plan to release RN 0.71 stable early in January.
There is another, less verbose way, to install the latest RC is to use ... --version next 😉

Using RCTAppDelegate.

This change is optional, it should work also with the previous setup. In 0.71, we simplified a lot of machinery for the New Architecture, in both Android and iOS. For iOS specifically, we encapsulated a lot of logic in the RCTAppDelegate class so that user can have an easier time to upgrade React Native version, from now on.

This is no longer working: @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, RNAppAuthAuthorizationFlowManager>

This should actually still work. Could you please share which error it is reporting?

will I be able to add a another interface so i can use RNAppAuthAuthorizationFlowManager.h?

Yes, definitely. The code will look like this:

@interface AppDelegate : RCTAppDelegate <RNAppAuthAuthorizationFlowManager>

@property(nonatomic, weak)id<RNAppAuthAuthorizationFlowManagerDelegate>authorizationFlowManagerDelegate;

@end

I hope these suggestions can help you getting through the problems you are having. Let me know if there are any updates!

[cipolleschi]

I can confirm that it works. I did this test:

1. I modified the calculator.podspec:

   install_modules_dependencies(s)
   + s.dependency "BluetoothKit", '0.4.0'

2. I readded the package in my NewArchitecture app: yarn add ../calculator
3. I reinstalled the pods: cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
4. I opened the project on Xcode and added the following code in the Calculator.swift file:

   import Foundation
   +import BluetoothKit
   
   @objc class Calculator: NSObject {
     @objc weak var delegate: CalculatorDelegate? = nil
   
   +  @objc override init() {
   +    super.init()
   +    let peripheral = BKPeripheral()
   +  }
   
   @objc func add(a: Int, b: Int) -> Int {

5. Build and run and it worked

[griffinshuth]

yes it did work im getting closer to getting it to work im hoping by the end of the year i will have it working on ios. the Bluetooth TurboModule that im building was super easy to do with android because we already had it built in java so that was not a headache at all. I am keeping notes to share with everyone on some of the stuff im finding out that is not explained in the docs yet also. The reason i found that was making it not work was i put the s.dependency before the install_modules_dependencies(s) not after so your last messaged helped me with that. @cipolleschi

[cipolleschi]

I am keeping notes to share with everyone on some of the stuff im finding out that is not explained in the docs yet also

This would be extremely useful. Thank you so much for doing this.

The reason i found that was making it not work was i put the s.dependency before the install_modules_dependencies(s) not after so your last messaged helped me with that

...and that's odd. s.dependency should work independently from the order. I'll give it a shot.

[griffinshuth]

I was able to successfully create a bluetooth turbo module for android in java and i have now successfully created the ios side of it in swift I dont have any metrics yet but i can say the connection and the bluetooth flow of me getting information does seem visibly faster than our live app.I will say this i was not able to get the swift code to work in the stable version of react native 70.5 but i could with the 0.71.0-rc.5. I wanted to thank you for your help and i will be writing up all the notes i made as i wrote these. I wanted to thank you guys for your help on this. @cortinico @cipolleschi

[cipolleschi]

(I also confirm that you can add the s.dependency before the install_modules_dependencies. The order does not matter. There was probably something else going on there.)

[cglacet]

I think there are some mistakes in the documentation:

• ios/AppDelegate.mmdoesn't exist, I think the correct path is /ios/RnDiffApp/AppDelegate.mm (with RnDiffApp being your app name). On the other hand, I had no AppDelegate.mm in that folder either.
• ios/AppDelegate.h : same issue, the correct location is ios/RnDiffApp/AppDelegate.h

This part is not clear:

iOS - Use Objective-C++ (.mm extension)

[...] any source files that include C++ code should use the .mm file extension.

Its not clear who these files belong to and where they are located. I assume these are files owned by the project (files we wrote ourselves), so in most cases I guess there are no such files? If that's the case I think you should state it clearly.

I think that would be nice to have something similar to the RnDiffApp to help people check how the folder structure should look like (that would also prevent having path issues like the one I mentioned first).

Talking about this, I noticed the AppDelegate.mm file in RnDiffApp differs from what the docs says in how they import RCTAppDelegate, the doc says:

#import <React-RCTAppDelegate/RCTAppDelegate.h>

While the RnDiffApp contains:

#import <RCTAppDelegate.h>

I have none of these two files on my machine so I can't really say which import is correct, what is the procedure to get this file?

[cipolleschi]

Hi @cglacet, thanks for pointing out these problems. I prepared a PR here: facebook/react-native-website#3559

ios/AppDelegate.mm doesn't exist, I think the correct path is /ios/RnDiffApp/AppDelegate.mm (with RnDiffApp being your app name). On the other hand, I had no AppDelegate.mm in that folder either.

You are right, the right folder is ios/<YourAppName>/AppDelegate.mm. You should have it as the AppDelegate is the entry point of the app. Remember that you have to rename it from .m to .mm so if you say that it's not here, is it probably because you need to rename it first.

I have none of these two files on my machine so I can't really say which import is correct, what is the procedure to get this file?

These files are available ONLY from version 0.71 onwards of react native.
They are in the node_modules/react-native/Libraries/AppDelegate path and are installed in the project as DevelopmentPods(so you should find a React-RCTAppDelegate pod that contains them.

[ykhateeb]

I was reading about Turbo Native Modules and I noticed in the IOS section(https://reactnative.dev/docs/the-new-architecture/pillars-turbomodules#write-the-native-ios-code) that theRTNCalculatorSpec.h header imported differently in the header(https://reactnative.dev/docs/the-new-architecture/pillars-turbomodules#rtncalculatorh) and the implementation(https://reactnative.dev/docs/the-new-architecture/pillars-turbomodules#rtncalculatormm) of RTNCalculator file, is that just a convention?

[okwasniewski]

Hey @ykhateeb,

This looks like a mistake in docs, the import should be the same for the implementation file (.mm) and the header file (.h).

[ykhateeb]

Hey @okwasniewski,

Yes assumed that.

[ykhateeb]

Moving forward in the doc, If we tried to open android project of the RTNCalculator module via android studio we would get the following error during Gradle sync process

A problem occurred evaluating root project 'RTNCalculator'.
> Plugin with id 'com.facebook.react' not found.

to fix we have to:

1- Add settings.gradle

rootProject.name = 'RTNCalculator'
includeBuild('../node_modules/react-native-gradle-plugin')

2- Add com.facebook.react:react-native-gradle-plugin

buildscript {
    ext.safeExtGet = {prop, fallback ->
        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
    }
    repositories {
      ...
    }
    dependencies {
      ...
      classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

Although these are not needed to run the module, because they are already added to the root project.

[cortinico]

If we tried to open android project of the RTNCalculator module via android studio

In general, you should not open the RTNCalculator inside Android Studio as that doesn't contain a valid Gradle Project (i.e. doesn't contain a Gradle Wrapper, doesn't contain a settings.gradle, etc.) so Android Studio will fail in a number of ways.

Libraries should be opened on Android Studio within their app project (being the final project or a sample app).

If you use https://github.com/callstack/react-native-builder-bob to create a library, that creates an example sample app project that you can use to open your library within Android Studio.

[Mukhammadjon-Jalolov]

Hi everyone.

• I created a completely new architecture app using: npx react-native@latest init FabricApp
• Then I enabled: newArchEnabled=true in gradle.properties
• I followed the steps exactly as written in the documentation to use an exemplary Fabric Component
  But when I run yarn android command I'm getting cannot find symbol error. What is wrong with <RTNCenteredText> !!?
  I cannot figure out what's getting wrong in this case. Thank you in advance.
  (P.S. Turbo Modules worked fine (my TurboModule received data from RN and returns it after some modifications))

Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 C:\Users\User\Documents\FabricApp\node_modules\rtn-centered-text\android\src\main\java\com\rtncenteredtext\CenteredTextManager.java:16: error: cannot find symbol public class CenteredTextManager extends SimpleViewManager<RTNCenteredText> implements RTNCenteredTextManagerInterface<RTNCenteredText> { _____________________________________________^

[cortinico]

It's hard to say without having a reproducer.
It seems like you're missing RTNCenteredTextManagerInterface which should be inside your build/generated/source/codegen folder. I'd suggest you make sure the RTNCenteredTextManagerInterface.java file is there and you're using the correct name.

[Mukhammadjon-Jalolov]

Thank you.
So after yarn add ../RTNCenteredText and ./gradlew generateCodegenArtifactsFromSchema commands, I'm getting that generated code in my FabricApp/node_modules/rtn-centered-text/android/build/generated/source/codegen/java/com/facebook/react/viewmanagers folder. Both these files are there. RTNCenteredTextManagerDelegate.java and RTNCenteredTextManagerInterface.java. But the same error
I just want to ask if there any examples of using Fabric Components apart from the official page? What I found on the internet is mostly just description of Fabric without step by step creation of Fabric Component. Thank you

[cortinico]

We do have: https://github.com/react-native-community/RNNewArchitectureApp and https://github.com/react-native-community/RNNewArchitectureLibraries

[Mukhammadjon-Jalolov]

Thank you that helped a lot!

[Huiyeoun]

Hi everyone.
I have a few questions about the turbo module.

(1) Should I define Turbo modules separately from the (android) app ?

(2) How can I get a data or call a method of the android app module from React Native JS layer?
In this case , should I implement legacy native modules based on old RN architecture - Bridge?

please help..

[Huiyeoun]

This might help #8 (comment)

sorry, those are not helpful for me.

https://www.youtube.com/watch?v=OMJLjLwyxIo&list=PLQhQEGkwKZUrempLnmxjt7ZCZJu1W3p2i&index=3
https://www.youtube.com/watch?v=SfWKPIVoS8w&list=PLQhQEGkwKZUrempLnmxjt7ZCZJu1W3p2i&index=6

[cipolleschi]

Hi @Huiyeoun.
Have look into the documentation? This is the official doc for TurboModules.

(1) Should I define Turbo modules separately from the (android) app ?

This is the suggested approach, but it is not strictly required. If you want to use it in your app, the steps to follow are more or less the same, but you have to modify the package.json of the app rather then the one of your separate package. You can see an example here.
While this folder contains an example of a TM defined within an app.

We are aware that the doc is lacking, and we are looking into filling the gap, adding the steps to define modules and components within the app.

(2) How can I get a data or call a method of the android app module from React Native JS layer

I'm not sure I understand the question completely. But you have to:

1. Define your TM specs. Those will define the methods that you can invoke from JS and are executed in the native side
2. When you build, Codegen creates some boilerplate bridging code in C++ that connects the JS side with the Java side
3. You need to implement your Java code, implementing the protocols generated by Codegen.
   Again, the official documentation cover all these steps, one after the other, here

[Huiyeoun]

@cipolleschi thank you so much.
yes, I have already read the official doc for TurboModules several times and implemented sample projects for old and new architecture.
I would like to use data and logic that is tightly coupled with android app module.
But I can't in new architecture.
I even moved a Turbo module folder into android/app folder .
But codegen was failed to connect (android) native and React native javascript layer.
I'll try more and find a way, but it doesn't seem easy.

[cipolleschi]

@cortinico could this be some limitation of the CLI?

As shown in the RNTester example, Turbomodules within the app structure should work. So there could be a bug lying somewhere that we where not able to surface and address yet.

@Huiyeoun: could you try to prepare a reproducer for us, so we can work on that and fix it?

[cortinico]

Nope that's not a limitation of the CLI, but the user probably has to specify a custom CMake file, which is not ideal. Can we move this to a separate discussion and provide a reprodcuer @Huiyeoun as @cipolleschi suggested?

[mashalifshin]

Hello React Native New Architecture team! Thanks so much providing this discussion space.

I'm working on rolling out a new React Native app which uses turbo modules, following the docs here, and I have not been able to get it working. I've prepared a repro example and I am hoping you can take a look and let me know what I might be doing wrong here.

There are a lot of details in the README of the repo, including full stack trace, but I'll post a summary here as well. Let me know if there is any other info I can provide.

The setup:

• A fresh react native app built according to the getting started instructions
• A turbo module set up according to the guide here.

When running npx react-native run-android I am getting the error:

BUILD FAILED in 31s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/Users/masha/Code/turbo-module-cannot-find-symbol-repoducer/AwesomeProject/android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java:15: error: cannot find symbol
import com.rtngreeter.GreeterPackage;
                     ^
  symbol:   class GreeterPackage
  location: package com.rtngreeter
/Users/masha/Code/turbo-module-cannot-find-symbol-repoducer/AwesomeProject/android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java:61: error: cannot find symbol
      new GreeterPackage()
          ^
  symbol:   class GreeterPackage
  location: class PackageList
2 errors

FAILURE: Build completed with 2 failures.

[cortinico]

Thanks for providing a reproducer @mashalifshin and sorry for the late response.

The problem you're facing is that you wrote your module/package in Kotlin, but you haven't applied the Kotlin Gradle plugin so during the complilation, the .kt files are effectively ignored.

You can fix this by updating the RTNGreater/android/build.gradle as follows:

buildscript {
  ext.safeExtGet = {prop, fallback ->
    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
  }
  repositories {
    google()
    gradlePluginPortal()
  }
  dependencies {
    classpath("com.android.tools.build:gradle:7.3.1")
+   classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.22")
  }
}

apply plugin: 'com.android.library'
apply plugin: 'com.facebook.react'
+apply plugin: 'org.jetbrains.kotlin.android'

android {
  compileSdkVersion safeExtGet('compileSdkVersion', 33)
  namespace "com.rtngreeter"
}

repositories {
  mavenCentral()
  google()
}

dependencies {
  implementation 'com.facebook.react:react-native'
}

There are other problems in your code like compilation issues (incompatible types and missing classes) but you should be able to solve them indipendently once you updated the Gradle file as I suggested.

[mashalifshin]

Dear @cortinico,

Not at all, thank you so much for reviewing my code and identifying this issue! I appreciate your time, and now it is my turn to apologize for the slow reply, I've been working on the iOS side of our app and haven't had a moment to try this out until now.

That said, I can finally confirm that your suggested changes worked! I was able to trigger Kotlin compilation and surface those additional fun compilation issues you mentioned.

This conversation gave me an idea for the documentation on Turbo Modules -- it might be nice to add a Kotlin tab here, like you have on some of the other code snippets throughout the documentation, with the above build.gradle.

I also wanted to mention in case its helpful to others reading this discussion, I had success using react-native-builder-bob to scaffold this when I was blocked on the above. The file structure ends up different than what's recommended in the Turbo Modules guide, but it did work for building Kotlin as well.

Thanks again @cortinico ✨

[cortinico]

it might be nice to add a Kotlin tab here, like you have on some of the other code snippets throughout the documentation, with the above build.gradle

Thanks for the feedback 👍 That's a great suggestion. Would you be up for adding this to the website?

[prabakarviji]

May I help with this? Adding it to the documentation..

[mashalifshin]

Thanks @prabakarviji 🙌

[Disfractal]

Hello!

I'm working to migrating react-native-vlc-media-player to New Architecture Fabric. It's a streaming player which requires a lot of callbacks and player state.

The depreciated package uses RCTEventEmitter to communicate player state to JS. I'm attempting to replicate this in NA but I'm not finding documentation on how to implement EventEmitter in Fabric only Turbo.

I've read that RCTEventEmitter is depreciated in Fabric NA and there's two new classes RCTModernEventEmitter and ReactEventEmitter but when I attempt to implement them the app crashes with no errors. When I tried using RCTEventEmitter I get this error

Invariant Violation: Failed to call into JavaScript module method RCTEventEmitter.receiveEvent(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient, AppRegistry, ReactFabric.

I'm also attempting to add the event callbacks to the NativeProps but it doesn't appear that a Function type is support in NA only string, number, boolean and null.

I'm wondering if EventEmitters are possible in Fabric NA, they are shown in the uimanager package so I assumed so. If not then I'm wondering if I have to build this into Turbo and link Native code between Turbo and Fabric.

Any help would be greatly appreciated!

[cortinico]

Hey @Disfractal,
I invite you to try your flow on the latest RC of 0.72
https://www.npmjs.com/package/react-native/v/0.72.0-rc.3
That contains a fix that takes care of registering event constants for both topOnLogEvent and onLogEvent

[Disfractal]

@cortinico Thank you, I've been able to learn how to register events and implement this functionally. However each event received in JS has quiet a lot of information attached to it. A 378 line JSON object. Each event appears to deliver a complete dump of the bridge data and state data between it.

Is this normal or is there a way to dispatch minimal events? My app may need to send a lot of events per second and I'm wondering about performance over the bridge.

If anyone else comes across this thread and is wondering how to dispatch custom events in Android using the New Architecture/Fabric.

Based on the Fabric example on the RN website here: https://reactnative.dev/docs/the-new-architecture/pillars-fabric-components?fabric-component-specs=typescript#android

You have to register each event name you want to dispatch in the [Component Name]Manager.java class by overriding the getExportedCustomDirectEventTypeConstants() function. Basing it from the example on the website it would go in the CenteredTextManager.java file. I've pasted the code below from my own which will align with my code I've pasted above. Note that you have to prefix the event names with the word 'top' and camel case the on to On.

public FabricPlayerManager(ReactApplicationContext context) {
    FLog.i(TAG, "Created");
    mDelegate = new RTNFabricPlayerManagerDelegate<>(this);
  }

  @Override
  public @Nullable Map<String, Object> getExportedCustomDirectEventTypeConstants() {
    @Nullable
    Map<String, Object> baseEventTypeConstants = super.getExportedCustomDirectEventTypeConstants();
    Map<String, Object> eventTypeConstants =
        baseEventTypeConstants == null ? new HashMap<String, Object>() : baseEventTypeConstants;
    eventTypeConstants.putAll(
        MapBuilder.<String, Object>builder()
            .put(
                "topOnLog",
                MapBuilder.of("registrationName", "onLog"))
.put(
                "topOnPlay",
                MapBuilder.of("registrationName", "onPlay"))
            .build());
    return eventTypeConstants;

Also on the JS side the event received is a large JSON object. Any data you've sent from the Android side will be located in the nativeEvent object. Here my updated event handler in my App.tsx.

/**
 * @param event
 */
function onLog(event: any) {
  console.log("onLog", event.nativeEvent.message);
}

return (
  <SafeAreaView>
    <StatusBar barStyle={'dark-content'} />
    <RTNFabricPlayer 
      source="blah" 
      onLog={onLog}
      />
  </SafeAreaView>
);
}

Note that on the JS side the event name maintains the thrown event name onLog without the top prefixing it.

Also an important note to save time. If you reading this thread and follow @cortinico advice on going from React Native 0.71 to 0.72 I strongly advise you to recreate your React Native project over again rather than incrementing the version number in the package.json and updating the dependency. There's been a large change in the RN project architecture and you need to recreate the project or you'll spend 2 days like I did trying to resolve conflicts/build errors.

Here is the command to create a new RN project using 0.72

npx react-native@0.72.0-rc.3 init YourProjectName --version 0.72.0-rc.3

[cortinico]

Is this normal or is there a way to dispatch minimal events?

Nope this is not normal. Can you create a repro so I can take a look at it?

I strongly advise you to recreate your React Native project over again rather than incrementing the version number in the package.json and updating the dependency.

We do have the react native upgrade helper:
https://react-native-community.github.io/upgrade-helper/
There is no need to recreate the project. However just changing the project version won't work as you need to update your template as well.

[Disfractal]

@cortinico Cheers, I saw the upgrade-helper after I rebuilt

Here is the sample: https://github.com/Disfractal/RNFabricPlayerDemo.git
Here's the event json: https://github.com/Disfractal/RNFabricPlayerDemo/blob/main/event.json

[Disfractal]

@cortinico I've been working with it today. It looks like the event data is coming from import com.facebook.react.uimanager.events.Event; It's the serialized Event object.

[mashalifshin]

Hello again @cortinico !

Thanks again for all your hard work on the New Architecture and being so responsive in this forum.

I have another question for you, this time a bit more general. We are working on creating a new architecture turbo module that leverages a Swift library as a dependency, specifically https://github.com/dawnwallet/dawn-key-management. This library only has an SPM definition, and we know React Native is incompatible with SPM. So we're creating a Cocoapod of this library, writing our own .podspec file for it so we can pull it in just like the other turbo modules pull in their dependencies.

We've been having trouble defining the structure of the library in the .podspec in order to get it to build properly, with various No such module errors and various internal symbols of the library not being found. Just replicating their package structure with subspecs was insufficient, we perhaps need additional build flags and/or configuration. We suspect it's an issue of missing headers or module maps, due to the lib not being built correctly as a static library vs dynamic library vs framework.

So we're wondering, do turbo module cocoapod dependencies need to be built as a specific one of the above? And do you have any resources or advice about how to create Swift cocoapods dependencies and integrate them with turbo modules?

Thanks again for taking the time!
-Masha

[mfazekas]

@mashalifshin for what it worth we've used a hack to get CocoaPods module declare an SPM dependency, from CocoaPods post_install hook.

https://github.com/maplibre/maplibre-react-native/blob/fbf72f0164cdff61247e5b1e7ce6c98c97c75cee/maplibre-react-native.podspec#L5-L61

The downside is that users have to add an $RNMBGL.post_install(installer) to the post_install part of the Podfile

[cipolleschi]

Hi @mashalifshin thanks for the question!

I'm looking into it, but it would be very helpful if you can share your podspec or a PR to have a look at.

First things that comes to my mind are:

1. The SwiftPM depends on three other OSS libraries: CryptoSwift, MnemonicSwift, secp256k1.swift. These need to be added to the podspec as spec.dependency. Specifically, secp256k1.swift is not published to Cocoapods (it does not have a podspec file) so you'll need to convert that to a pod as well.
2. The best alternative is probably to create 4 podspecs: 1 for Keychain, 1 for Wallet and 1 for Model and the final KeyManagement. This should let you configure them independently and with much fewer issues. Also, you can specify the spec.module_name that the code needs.

do turbo module cocoapod dependencies need to be built as a specific one of the above?

Starting from 0.72, we support all the three modes: Static Libraries, Frameworks with Static Linking and Frameworks with Dynamic Linking. What you want to support is up to you and your team. For example, Firebase require frameworks and does not work with static libraries.

And do you have any resources or advice about how to create Swift cocoapods dependencies

Nothing a part from the official documentation... But I can have a look around! :D

---

@mfazekas thanks for the suggestion, but I think that that solves the opposite problem. Your suggestion starts from a podspec and creates the SPM, the question was how to create a podspec starting from an SPM package!

[mfazekas]

@mfazekas thanks for the suggestion, but I think that that solves the opposite problem. Your suggestion starts from a podspec and creates the SPM, the question was how to create a podspec starting from an SPM package!

I does solve the same issue, sorry if my description was misleading. The concrete issue was the MapLibre was not publishing the iOS libraries as pods, just as SPM packages. This hack allowed to use the SPM package, from a podspec file, so a react-native wrapper for their iOS lib could be created. I've added an RFC in the Cocoapods repo, to see if they are interested in adopting something similar as part of Cocoapods.

[cipolleschi]

@mfazekas ah, so you have that Podspec in your own repository/project and you add it as a dependency of React Native and when Cocoapods execute the Podspec it tries to parse the SPM package?
So it means that the app xcodeproj has to declare a dependency to the SPM package, correct?

[mfazekas]

@cipolleschi kinda, cocoapods adds the SPM to the Pods-s project, and adds the products as dependency to the pods-s target. No need for the app to do anything. (Other than to execute the pod spec provided post_install hook in the Podfile, something like $RNMGL.post_install(installer), exported by the podspec)

[connorpmullins]

Hello there and thank you in advance for the support! I'm uncertain whether I'm reporting a genuine problem or something I'm struggling to understand.

I am creating a backwards-compatible Fabric Component. It's my first time implementing any native component, so that's my handicap coming into this. I followed the example Fabric component docs, got that example running on a clean project with the new architecture, and then today worked through the Fabric Legacy docs.

I followed the documentation as exactly as possible. The only thing I've changed is the name of the module to fit what I'm building. My legacy-enabled fabric module is compiling for both old-architecture and new-architecture android and ios apps. My module is working and I'm able to update the text on ios and android apps running the new architecture. The module is also fully functional in android apps running the old architecture.

The problem I'm experiencing is that when I try to compile my module for an old architecture ios app, I get the following error:

Exception thrown while executing UI block: -[RCTView setText:]: unrecognized selector sent to instance 0x7f8b8bc29a50

I am able to get the app to compile and run if I remove RCT_EXPORT_VIEW_PROPERTY(text, NSString) from my RTNCenteredTextManager.mm file. Of course I then lose the ability to update text on my component.

In my reading of the ios Update the Code section of the Backwards compatibility docs, there are no required changes to the RTNCenteredTextManager.mm file.

I've also tried working through the Backward compatibility community git repo. It was different enough from the on-site documentation, though, that I decided to post here as well.

For context, here is my RTNMapsGLManager.mm code:

#import <React/RCTLog.h>
#import <React/RCTUIManager.h>
#import <React/RCTViewManager.h>

@interface RTNMapsGLManager : RCTViewManager
@end

@implementation RTNMapsGLManager

RCT_EXPORT_MODULE(RTNMapsGL)

// If commented out, the oldarch iOS error disappears and I lose the ability to update text
RCT_EXPORT_VIEW_PROPERTY(text, NSString)

@end

I realize all code in the documentation has been tested, so I'm sorry if this issue is related to a mistake I've made.

[cipolleschi]

Hi @connorpmullins, thanks for the question and I'm happy you are trying this out.

Do not apologize for asking questions while learning! :D

In the old architecture, the macro RCT_EXPORT_VIEW_PROPERTY has the only purpose of telling to the JS side that the native view has a prop called text of type NSString, but it does not create a @Property if it doesn't exists on the native View.

The ViewManagers have to provide an implementation for the following method that returns the native view:

- (UIView *) view;

For example here.

The returned view is the view that is created in the native layer and must have all the props that you are exposing to JS.

You have not shared the implementation of that method, so I assume that the it is using the default implementaion, from here. This returns an RCTView which, as you can see, does not have any text property.

So, when you execute the code, and React Native tries to set the property on the native view, it can't find the setter.

The simplest way to solve this would be to return a UITextField in the - (UIView *) view; method:

- (UIView *) view
{
  return [UITextField new];
}

I hope this helps unblocking you.

[connorpmullins]

Thank you for your help @cipolleschi!

Do you think it would be worth making the following addition to the end of the iOS section of the Update the Codebase legacy-enablement documentation?

'
After wrapping RNMyComponent.mm with a #ifdef pragma, you need to replicate the functionality of that file inside RNMyComponentView.mm to ensure the same functionality between architectures. For more information on how legacy components work, refer to our documentation.
'

I realize it's outside the scope of the New Architecture documentation to teach developers new to writing native code, so perhaps the above is more information than necessary. Happy to open a PR with that change if it's helpful to you.

[cipolleschi]

I think it is a good call to specify that the implementation for the Old Architecture component must follow the guide for legacy components and add a link. Would you mind opening a PR (and become a contributor? :D)
The website is backed by this repo: you can fork it and submit a PR as usual! ;)

[connorpmullins]

@cipolleschi You're likely already monitoring, but I've made the PR.

Thanks again for your help 🥂

[grabbou]

Hey! Great work on the documentation, reading the introduction to the new architecture makes it all very easy.

Looking at the..., I got confused with one line in particular and have read it a couple of times to understand.

The following sentence explains steps required to create either a turbo module or a fabric component ("the pillars").

The next sections contain a high-level overview of the pillars and the steps to create them. To create one of these pillars, the steps are:

• Define a JavaScript specification using Flow or TypeScript.
• Configure the dependencies management system to generate code from the provided spec.
• Implement the Native code.
• Integrate the code in the app.
  Finally, we dive a little deeper into the Codegen process

I am not a native speaker, I might be just misunderstanding things - in which case, please consider this invalid.

The new architecture has three pillars, including "codegen", so referenced sentence implies you can create "codegen" by following these steps.

I think the original intent was to refer to earlier section on that page:

The New Architecture is composed mainly of two pillars:
The New Native Module System - Turbo Modules
The New Renderer - Fabric

I think a quick solution would be to update the wording to something as follows:

The next sections contain a high-level overview of the pillars of the New Architecture.

< line break >

On a high-level, to create either a Fabric Component or a Turbo Module, the steps are:

• Define a JavaScript specification using Flow or TypeScript.
• Configure the dependencies management system to generate code from the provided spec.
• Implement the Native code.
• Integrate the code in the app.

< line break >

Finally, we dive a little deeper into the Codegen process

[grabbou]

I am also not sure if this is the right place to report any outdated content, but just in case (happy to make the necessary contributions myself):

Hermes is an open-source JavaScript engine optimized for React Native. Hermes will be the default engine in the future, and we highly recommend you use it.

https://reactnative.dev/docs/the-new-architecture/use-app-template#enable-hermes

I think we can drop that section entirely for creating new apps, since it's running by default as of 0.70.

[cipolleschi]

Hi @grabbou, thank you so much for your suggestions.
The new arch docs will definitely benefit for some updates as we worked a lot on it in the last year with little to no time to keep the doc updated (shame on us).

All your suggestions are pretty valid. If you have the time and the will to start working on some PRs for the website, we can definitely help out reviewing them and merging them!

[BugraDemiral]

Hi,

I am trying to enable turbo module for an existing app for iOS at the moment. App is using a package so I applied all the steps from codegen to native definitions to it. I end up a crash sayin unrecognised selector send to instance. I changed parameters tried everything but still getting error. Do I need to modify native ios app files as well? Like for enabling TurboModules? Btw app also support old way of native bridge which works fine. Using 0.71 RN.

[connorpmullins]

@BugraDemiral - I was also receiving an unrecognized selector issue (in a Fabric Component instead of a Turbo Module) - have you looked at that thread?
#8 (comment)

I'm not a new architecture expert, but if you share some code samples and a bit more info I'd be happy to try to help.

[teodorciuraru]

I'm generating a Turbo Module with npx create-react-native-library@latest awesome-module, and I see common C++ logic, but I also have to export each of the C++ functions through all platforms, again (iOS and Android).

Example (iOS):

- (NSNumber *)multiply:(double)a b:(double)b {
    NSNumber *result = @(mytmlibrary::multiply(a, b));

    return result;
}

I managed to bridge them only once (single-source-of-truth, C++) with a Native Module + JSI and exported them to global. Is there a tutorial or sample app that does the same but for a Turbo Module?

[cipolleschi]

What you are looking for is a pure C++ Turbomodule. We have some documentation here.

From 0.74, there is an initial implementation of auto-linking for C++ turbomodule. It should work fine for Android, there are some caveats for iOS. Namely, you have to ask your users to include the header in their app delegate for it to work fine.
We are working to improve it further.

[teodorciuraru]

@cipolleschi Isn't that a tutorial for RN apps on integrating Turbo Modules? I'm trying to build a plugin (what was before called Native Module) but with Turbo Modules instead. Checking your documentation, I'm missing lots of stuff to upgrade my current Native Module to a TM one, such as the android/app, AppDelegate.mm folder, and many other files.

I want to learn how to create an RN TurboModule library/plugin module, and the other docs don't lead me to a pure C++ RN TurboModules plugin.

[cipolleschi]

So, I think you need a mix between the normal guides for Android and for iOS and the pure C++ turbomodule.

In a few words:

• Folder Setup with an extra cxx folder
• JS spec
• Prepare your package.json
• Prepare iOS configurations: you'll need a podspec for the library to be picked up by iOS.
  • the spec.source_files should be something like cxx/*.{h, hpp,cpp}
• Prepare the Android configurations you'll need to tell android how to pickup the cxx files, basically this guide.
• Native code Cxx only

And that should be it.

[vrnDhmn]

I followed Fabric Native Components doc, it worked.
*Used it to port our existing native component to new architecture.
Is there any patch added to avoid manually doing ./gradlew generateCodegenArtifactsFromSchema ?
For now I'm adding "postinstall": "cd android && ./gradlew generateCodegenArtifactsFromSchema" to my reactnative app root package.json.

Thanks

[cipolleschi]

Hi @vrnDhmn!
You don't need to run ./gradlew generateCodegenArtifactsFromSchema manually every time: we created that command to let you see what would be generated, but codegen will run automatically when the app is built.

Starting from 0.74, we are going to release a new command: npx react-native codegen to generate your files with more ease.
You can read more about that here.

[ncwuguowei]

how create turboModule in main app folder，but like the demo as a library in node_modules folder, in app folder，add codegenConfig and gegerate codegen files success，create turboModule and TurboReactPackage, and to PackageListbut , but in App.tsx can not import the TurboModule.

can introduce how to add in app ，but not extranal folder by yarn add XXX ?

structure like this in android

[cipolleschi]

There is a way to do it but we haven't created a guide for it yet.

The way to do it is that you need to configure Codegen in the package.json of your app, and not create a package.json for the library.
The rest should be more or less the same.

We do it in RNTester, inside the React Native repo and you can see the code here.

[ncwuguowei]

I read the rn-tester/package.json, but must this method with create jni files manually?
It is too complex to common developers, and codegen can work?
I do not understand why it run fail in app ，not a library. like as a library in node_modules folder, it can use condegen normally, and gererate jni files successfully, the native implementation is also in the same java package，after build app，so file is maked ok。
but in js file, import turboMdoule is fail, the native implementation is run and funtion getModule、getReactModuleInfoProvider is called.
I will create a issue with the source project, could you can resolve it?
My demo project is fork from https://github.com/react-native-community/reproducer-react-native
the turboModule example link:
https://github.com/ncwuguowei/reproducer-react-native

Thanks very much.

[cipolleschi]

@ncwuguowei nono... the package.json was just shown to let you configure the CodegenConfig properly. Once they are configured like that, and the jsSrcsDir points to a folder that is the parent to all your Native Modules and Native Components, the Codegen should crawl the file system starting from that directory and look for all the Native<Module> and <Component>NativeComponent files and generate the native code for you.

[lovegaoshi]

hi! I'm looking at RNTP's interop layer compatibility, and there is an issue where the module's hooks using event listeners (with a NOBRIDGE log tag?) are not firing, but listeners registered via AppRegistry.registerHeadlessTask (without the NOBRIDGE log tag) are. Would anyone share insight on emitting events? Thank you very much in advance

the way RNTP emits events:
RNTP hooks registering event listeners: here and here
registerHeadlessTask:
logs

[cortinico]

Please open an issue on facebook/react-native, selecting "New Architecture" and providing a link to your projects

[mherda]

Hi. Thank you for the docs. I've just created an example of a Turbo Module in iOS following this tutorial. I believe there might be some very minor typos in there preventing it from running as it currently is. While, perhaps, immediately obvious and easily spotted to most, they may come as show stoppers to some users who are completely new to the subject.

1. In the RTNCalculator.h file, assuming one follows exactly the previous steps of the tutorial:
   @interface RTNCalculator : NSObject <NativeCalculatorSpec>
   should be:
   @interface RTNCalculator : NSObject <NativeRTNCalculatorSpec>

2. The same for the RTNCalculator.mm file. The 'RTN' in-fix should be added:
   return std::make_shared<facebook::react::NativeRTNCalculatorSpecJSI>(params);

3. In App.tsx, the line:
   import RTNCalculator from "rtn-calculator/js/NativeCalculator";
   Should read:
   import RTNCalculator from 'rtn-calculator/js/NativeRTNCalculator';

4. When running node generate-codegen-artifacts.js, there appears to be a missing --targetPlatform option in the body of the tutorial, which seems to be required.

Again, these are small and obvious for seasoned developers, but they may save some time / frustrations for people just starting with the subject.
As I, myself, am not versed with the new architecture / turbo modules, would you add to the tutorial or point me to any other place where the actual functionality (eg. the 'add' function in this example) is written in Swift? Thank you.

[cortinico]

Thanks for reporting this, that's extremely valuable for both us and the whole community. Please send over a pull request with your fixes and we can integrate them

[olokobayusuf]

I'm just getting started with React Native as we need to write an RN client library for our platform. I'm finding that you all have done a great job trying to make this as intuitive as possible, so kudos here.

I think you all need to invest heavily in guidance on marshallng data between JS and C++ (and through Java for non-pure-C++ modules). Coming from the C# ecosystem where Microsoft has done an incredible job with P/Invoke, I think you all can emulate a lot of their success.

Right now I'm stuck trying to figure out the best way to marshal opaque types (raw pointers) and enumerations. There doesn't seem to be much in the way of sample code or written guidance in the docs, so I'm likely gonna end up casting back and forth between number instances.

[olokobayusuf]

Also, exception handling. How can I throw an exception from C++ to JavaScript? Something like JNIEnv::ThrowNew from the Java JNI?

[olokobayusuf]

Also also, how do we marshal buffers, like pixel buffers and tensor storage? Does React Native provide a way to either pin an ArrayBuffer/TypedArray for C++ interop, or perform a block copy?

[cipolleschi]

I feel like @RSNara is the best person to provide some answers here!