[RN][iOS] Update Module Registration (facebook#4525)

* [RN][iOS] Update Module Registration

* Use Cxx instead of C++

Co-authored-by: Nicola Corti <[email protected]>

---------

Co-authored-by: Nicola Corti <[email protected]>

Author: cipolleschi

docs/the-new-architecture/pure-cxx-modules.md

@@ -318,46 +318,95 @@ If you did everything right, your project on the left should look like this:
 
 #### 3. Registering the Cxx Turbo Native Module in your app
 
-:::warning
-If your app has some local modules that are written in C++, you would not be able to use the AppDelegate in Swift that we shipped in React Native 0.77.
+To register a pure Cxx Turbo Native Module in your app, you need to:
 
-If your app falls in this category, please skip the migration of the AppDelegate to Swift, and keep using Objective-C++ for your app's AppDelegate.
+1. Create a `ModuleProvider` for the Native Module
+2. Configure the `package.json` to associate the JS module name with the ModuleProvider class.
 
-React Native core is mostly developed using C++ to encourage code sharing between iOS and Android and other platforms. The interoperability between Swift and C++ is not mature nor stable, yet. We are looking into ways to fill this gap and let you migrate to Swift too.
-:::
+The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.
 
-With this last step, we will tell the iOS app where to look for to find the pure C++ Turbo Native Module.
+##### 3.1 Create the ModuleProvider
 
-In Xcode, open the `AppDelegate.mm` file and modify it as follows:
+1. From Xcode, select the `SampleApp` project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.
+2. Select the `Cocoa Touch Class` template
+3. Add the name `SampleNativeModuleProvider` (keep the other field as `Subclass of: NSObject` and `Language: Objective-C`)
+4. Click Next to generate the files.
+5. Rename the `SampleNativeModuleProvider.m` to `SampleNativeModuleProvider.mm`. The `mm` extension denotes an Objective-C++ file.
+6. Implement the content of the `SampleNativeModuleProvider.h` with the following:
 
-```diff title="SampleApp/AppDelegate.mm"
-#import <React/RCTBundleURLProvider.h>
-+ #import <RCTAppDelegate+Protected.h>
-+ #import "NativeSampleModule.h"
+```objc title="NativeSampleModuleProvider.h"
 
-// ...
-  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#endif
-}
+#import <Foundation/Foundation.h>
+#import <ReactCommon/RCTTurboModule.h>
 
-+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
-+                                                      jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
-+{
-+  if (name == "NativeSampleModule") {
-+    return std::make_shared<facebook::react::NativeSampleModule>(jsInvoker);
-+  }
-+
-+  return [super getTurboModule:name jsInvoker:jsInvoker];
-+}
+NS_ASSUME_NONNULL_BEGIN
+
+@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
 
 @end
+
+NS_ASSUME_NONNULL_END
 ```
 
-These changes are doing a few things:
+This declares a `NativeSampleModuleProvider` object that conforms to the `RCTModuleProvider` protocol.
 
-1. Importing the `RCTAppDelegate+Protected` header to make it visible to the AppDelegate that it is conforming to the `RCTTurboModuleManagerDelegate` protocol.
-2. Importing the Pure C++ Native Turbo Module interface `NativeSampleModule.h`
-3. Overriding the `getTurboModule` method for C++ modules so that when the JS side asks for a module called `NativeSampleModule`, the app knows which module has to be returned.
+7. Implement the content of the `SampleNativeModuleProvider.mm` with the following:
+
+```objc title="NativeSampleModuleProvider.mm"
+
+#import "NativeSampleModuleProvider.h"
+#import <ReactCommon/CallInvoker.h>
+#import <ReactCommon/TurboModule.h>
+#import "NativeSampleModule.h"
+
+@implementation NativeSampleModuleProvider
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
+}
+
+@end
+```
+
+This code implements the `RCTModuleProvider` protocol by creating the pure C++ `NativeSampleModule` when the `getTurboModule:` method is called.
+
+##### 3.2 Update the package.json
+
+The last step consist in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+     // highlight-add-start
+     "ios":
+        "modulesProvider": {
+          "NativeSampleModule":  "NativeSampleModuleProvider"
+        }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
 
 If you now build your application from Xcode, you should be able to build successfully.
 

docs/the-new-architecture/using-codegen.md

@@ -55,6 +55,9 @@ npx @react-native-community/cli@latest init SampleApp --version 0.76.0
       "componentProvider": {
         "<componentName>": "<iOS-class-implementing-the-component>"
       },
+      "modulesProvider": {
+        "<moduleName>": "<iOS-class-implementing-the-RCTModuleProvider-protocol>"
+      }
     }
   },
 ```
@@ -74,6 +77,7 @@ You can add this snippet to your app and customize the various fields:
     - `ios.modulesConformingToProtocol.RCTURLRequestHandler`: list of iOS native module that implements the [`RCTURLRequestHandler` protocol](https://github.com/facebook/react-native/blob/00d5caee9921b6c10be8f7d5b3903c6afe8dbefa/packages/react-native/React/Base/RCTURLRequestHandler.h#L11-L52). You need to pass the class names of iOS classes that implements the `RCTURLRequestHandler`. They must be Native Modules.
     - `ios.modulesConformingToProtocol.RCTImageDataDecoder`: list of iOS native module that implements the [`RCTImageDataDecoder` protocol](https://github.com/facebook/react-native/blob/00d5caee9921b6c10be8f7d5b3903c6afe8dbefa/packages/react-native/Libraries/Image/RCTImageDataDecoder.h#L15-L53). You need to pass the class names of iOS classes that implements the `RCTImageDataDecoder`. They must be Native Modules.
   - `ios.componentProvider`: this field is a map used to generate the association between a custom JS React component and the native class that implements it. The key of the map is the JS name of the component (for example `TextInput`), and the value is the iOS class that implements the component (for example `RCTTextInput`).
+  - `ios.modulesProvider`: this field is a map used to generate the association between a custom JS Native Module and the native class that can provide it. The key of the map is the JS name of the module (for example `NativeLocalStorage`), and the value is the iOS class that implements the [`RCTModuleProvider` protocol](https://github.com/facebook/react-native/blob/0.79-stable/packages/react-native/ReactCommon/react/nativemodule/core/platform/ios/ReactCommon/RCTTurboModule.h#L179-L190). For Objective-C modules, the class implementing the [`RCTTurboModule` protocol](https://github.com/facebook/react-native/blob/0.79-stable/packages/react-native/ReactCommon/react/nativemodule/core/platform/ios/ReactCommon/RCTTurboModule.h#L192-L200) is also implementing the `RCTModuleProvider` protocol. For more information, looks at the [Cross-Platform Native Modules (C++) guide](/docs/next/the-new-architecture/pure-cxx-modules).
 
 When **Codegen** runs, it searches among all the dependencies of the app, looking for JS files that respects some specific conventions, and it generates the required code:
 

docs/turbo-native-modules-ios.md

@@ -78,8 +78,6 @@ static NSString *const RCTNativeLocalStorageKey = @"local-storage";
 
 @implementation RCTNativeLocalStorage
 
-RCT_EXPORT_MODULE(NativeLocalStorage)
-
 - (id) init {
   if (self = [super init]) {
     _localStorage = [[NSUserDefaults alloc] initWithSuiteName:RCTNativeLocalStorageKey];
@@ -111,14 +109,56 @@ RCT_EXPORT_MODULE(NativeLocalStorage)
   }
 }
 
++ (NSString *)moduleName
+{
+  return @"NativeLocalStorage";
+}
+
 @end
 ```
 
 Important things to note:
 
-- `RCT_EXPORT_MODULE` exports and registers the module using the identifier we'll use to access it in the JavaScript environment: `NativeLocalStorage`. See these [docs](./legacy/native-modules-ios#module-name) for more details.
 - You can use Xcode to jump to the Codegen `@protocol NativeLocalStorageSpec`. You can also use Xcode to generate stubs for you.
 
+## Register the Native Module in your app
+
+The last step consist in updating the `package.json` to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those specs in native code.
+
+Modify the `package.json` as it follows:
+
+```json title="package.json"
+     "start": "react-native start",
+     "test": "jest"
+   },
+   "codegenConfig": {
+     "name": "AppSpecs",
+     "type": "modules",
+     "jsSrcsDir": "specs",
+     "android": {
+       "javaPackageName": "com.sampleapp.specs"
+     }
+     // highlight-add-start
+     "ios":
+        "modulesProvider": {
+          "NativeLocalStorage": "RCTNativeLocalStorage"
+        }
+     // highlight-add-end
+   },
+
+   "dependencies": {
+```
+
+At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:
+
+```bash
+# from the ios folder
+bundle exec pod install
+open SampleApp.xcworkspace
+```
+
+If you now build your application from Xcode, you should be able to build successfully.
+
 ## Build and run your code on a Simulator
 
 <Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>