When migrating a component to Fabric, there is a step documented here https://reactnative.dev/docs/next/the-new-architecture/pillars-fabric-components#centeredtextmanagerjava which adds the following

    private final ViewManagerDelegate<CenteredText> mDelegate;

    public CenteredTextManager(ReactApplicationContext context) {
        mDelegate = new RTNCenteredTextManagerDelegate<>(this);
    }

    @Nullable
    @Override
    protected ViewManagerDelegate<CenteredText> getDelegate() {
        return mDelegate;
    }

I'd like to know what the purpose of the delegate is. Is it mandatory? Implementing the RTNCenteredTextManagerInterface does not enforce the presence of getDelegate() and I'm wondering what it's purpose is, because all the delegate does is that is ends up calling the methods on the ViewManager. Is it for imperative command dispatching?

I implemented a Fabric component without getDelegate() and it appears to work properly.

Thank you for the answer :)

At present, I have tried to use the new architecture in my project, but many third-party libraries cannot be used, and many libraries have been stopped for a long time without maintenance. How can you solve this problem

example ： react-native-video

Hi!

The Swift example as it is does not support apps using use_frameworks! in their Podfile.
When using frameworks, the Swift import is different.

Instead of:

#import "ProductModuleName-Swift.h"

It should be:

#import <ProductName/ProductModuleName-Swift.h>

So users with use_frameworks! will get an error at build stating that:

fatal error: 'ProductModuleName-Swift.h' file not found

To handle both cases from inside the library, we can use #if __has_include as recommended on this Cocoapods issue.
I'd recommend changing the import in calculator/ios/RNCalculator.mm to be (not tested):

#if __has_include("calculator-Swift.h")
#import <calculator-Swift.h>
#else
#import <calculator/calculator-Swift.h>
#endif

For reference, here is the link to the change we ended up making.

Hi!

First, thanks a lot for the work on this, it helped me a lot!

Also I'm opening an issue as I don't think using a PR would be useful here as we want to keep a strict commit order, but I have a branch ready with all the changes I'm describing next so you can push force it if it works for you: https://github.com/louiszawadzki/RNNewArchitectureLibraries/commits/feat/turbomodule-swift
I'm keeping the same commit history and I also updated the commit hashes in the readme :)

Maybe my changes are not optimal, feel free to let me know if there's a better way to make this work!

Issue with building the Swift example

I tried to test the feat/turbomodule-swift branch by doing the following (my NewArchitecture app uses RN 0.71.8):

1. Navigate to the NewArchitecture root folder:
2. yarn add ../calculator
3. cd ios
4. RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
5. cd ..
6. xed ios and run the app from XCode

When I do so I get the following error:

Fixing the issue (for my package)

I realized that the error goes away for my library when removing this part of the Podspec that was added for the Swift example:

-  s.pod_target_xcconfig    = {
-    "DEFINES_MODULE" => "YES",
-    "BUILD_LIBRARY_FOR_DISTRIBUTION" => "YES",
-    "SWIFT_OBJC_BRIDGING_HEADER" => "../../node_modules/calculator/ios/calculator-Bridging-Header.h",
-    "OTHER_CPLUSPLUSFLAGS" => "-DRCT_NEW_ARCH_ENABLED=1"
-  }

But then I get this error in RNCalculator.mm when doing the same in this project:

Additional steps to fix this package

Instead of using RCT_EXPORT_MODULE and RCT_REMAP_METHOD, I use RCT_EXTERN_MODULE and RCT_EXTERN_METHOD as recommended here: https://reactnative.dev/docs/native-modules-ios#exporting-swift

Making the change to this approach makes everything work without any error.

To do so, remove calculator/ios/RNCalculator.h then apply the following changes:

calculator/ios/Calculator.swift:

 import Foundation

-@objc
+@objc(RNCalculator)
 class Calculator: NSObject {

-  @objc
-  static func add(a: Int, b: Int) -> Int {
-    return a+b;
+  @objc(add:andB:withResolver:withRejecter:)
+  func add(a: Int, b: Int, resolve:RCTPromiseResolveBlock, reject:RCTPromiseRejectBlock) -> Void {
+    resolve(a+b);
   }
 }

calculator/ios/RNCalculator.mm:

-#import "RNCalculator.h"
 // Thanks to this guard, we won't import this header when we build for the old architecture.
 #ifdef RCT_NEW_ARCH_ENABLED
 #import "RNCalculatorSpec.h"
 #endif

-#import "calculator-Swift.h"
-
-@implementation RNCalculator
+@interface RCT_EXTERN_MODULE(RNCalculator, NSObject)

-RCT_EXPORT_MODULE()
-
-RCT_REMAP_METHOD(add, addA:(NSInteger)a
+RCT_EXTERN_METHOD(add:(NSInteger)a
                         andB:(NSInteger)b
                 withResolver:(RCTPromiseResolveBlock) resolve
                 withRejecter:(RCTPromiseRejectBlock) reject)
-{
-  return [self add:a b:b resolve:resolve reject:reject];
-}

// Thanks to this guard, we won't compile this code when we build for the old architecture.
#ifdef RCT_NEW_ARCH_ENABLED
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:  // <- Actually not removed, just diff formatting here
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeCalculatorSpecJSI>(params);
}
#endif

-- (void)add:(double)a b:(double)b resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
-  NSNumber *result = @([Calculator addWithA:a b:b]);
-  resolve(result);
-}

calculator/ios/calculator-Bridging-Header.h:

 //
 // Add the Objective-C headers that must imported by Swift files
 //
+#import <React/RCTBridgeModule.h>

Summary:

• Tried to create a module following the feat/back-turbomodule-070 branch
• My module was called RNTfLitening so I replaced all examples of Calculator with TfLitening
• The RN Prefix is not removed from the name RNTfLitening so accessing NativeModules.TfLitening in src/index.js returns null.
• Changing the import to NativeModules.RNTfLitening seems to fix the issue.

Suggestion: Either change the example code to include the RN prefix, OR if the issue is with having a pascal-case module name then include a warning about selecting appropriate module names.

Background:

Per the react native docs:

If you do not specify a name, the JavaScript module name will match the Objective-C class name, with any "RCT" or "RK" prefixes removed.

In the example code the module is named RNCalculator but then accessed vial NativeModules.Calculator

But because the prefix is RN and not RCT or RK the prefix isn't removed.

My steps to reproduce

1. Follow the example in the feat/back-turbomodule-070 branch, but changing the name from Calculator to TfLitening (And RNCalculator to RNTfLitening etc.)

2. On the step [Native Module] Test The Native Module running the command npx react-native run-ios throws this error when you press the "Calculate" button.

 BUNDLE  ./index.js

 LOG  Running "OldArchitecture" with {"rootTag":21,"initialProps":{}}
 WARN  Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'add' of null
TypeError: Cannot read property 'add' of null
    at ?anon_0_ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.OldArchitecture:93214:48)

I was able to correct the error after changing the code of my-module/src/index.js to include the RN prefix:

// tf-litening/src/index.js
 
import {NativeModules} from 'react-native'

export default NativeModules.RNTfLitening;

Notes

It's possible that the issue is that I have a PascalCase module name, or that it begins with a T?

If so then maybe changing the example code isn't necessary, but instead a small warning or hint about choosing the module name carefully could be helpful. Something like:

You can choose any module you like, but it may affect how the module is exported.

React Native will automatically remove some prefixes from module names (i.e. "RN" , "RCT", "RK", see the docs for more info) but if you choose a ["name in pascal case" | "name that begins with a T" | ... ] the prefix will not be removed and you'll need to include the prefix when you access it as a property of NativeModules.

Happy to submit a draft PR if this a seems worthwhile change.

I can't find any...

This repo is a very great reference for building a new library that supports the new and old architecture at once and it would be really great if we had a CLI that generates the library automatically kinda like create-react-native-library and create-react-native-module or better yet have it in one of those already existing CLIs.

Thank you for creating this repo.

I was looking into the steps of creating a Fabric component and had some confusion so writing it down here.

• This line indicates renaming RNColoredView.m to RNColoredViewManager.mm but doesn't indicate what to put in RNColoredViewManager.mm. I think it's missing the step 8 from this section.

I also have some questions regarding ViewManager in Fabric example component.

1. Do we need to return view here? I believe RNColoredView.mm also initialises the View.

2. Do we need to write setter code here since RNColoredView.mm also updates the prop here?

Let me know If I am getting it wrong. Thanks.

reproduction:
just cloned the repo and add it to a local react native app proejct to test if things are working. but in ios i'm gettin' RNCalculatorSpec.h file not found error.

i assume that the repo is updated as it's got multiple separate branches.
this's frustrating actually. can't find much information in docs as well.