fix: improve TM explanation (#3364)

Author: Riccardo

docs/the-new-architecture/backward-compatibility-turbomodules.md

@@ -178,7 +178,9 @@ This changes do three main things:
 
 The second step is to instruct Xcode to avoid compiling all the lines using the New Architecture types and files when we are building an app with the Old Architecture.
 
-The file to change is the module implementation file, which is usually a `<your-module>.mm` file. That file is structured as follows:
+There are two files to change. The module implementation file, which is usually a `<your-module>.mm` file, and the module header, which is usually a `<your-module>.h` file.
+
+That implementation file is structured as follows:
 
 - Some `#import` statements, among which there is a `<GeneratedSpec>.h` file.
 - The module implementation, using the various `RCT_EXPORT_xxx` and `RCT_REMAP_xxx` macros.
@@ -205,7 +207,27 @@ The **goal** is to make sure that the `Turbo Native Module` still builds with th
 @end
 ```
 
-This snippet uses the same `RCT_NEW_ARCH_ENABLED` flag used in the previous [section](#dependencies-ios). When this flag is not set, Xcode skips the lines within the `#ifdef` during compilation and it does not include them into the compiled binary.
+A similar thing needs to be done for the header file. Add the following lines at the bottom of your module header. You need to first import the header and then, if the New Architecture is enabled, make it conform to the Spec protocol.
+
+```diff
+#import <React/RCTBridgeModule.h>
++ #ifdef RCT_NEW_ARCH_ENABLED
++ #import <YourModuleSpec/YourModuleSpec.h>
++ #endif
+
+@interface YourModule: NSObject <RCTBridgeModule>
+
+@end
+
++ #ifdef RCT_NEW_ARCH_ENABLED
++ @interface YourModule () <YourModuleSpec>
+
++ @end
++ #endif
+
+```
+
+This snippets uses the same `RCT_NEW_ARCH_ENABLED` flag used in the previous [section](#dependencies-ios). When this flag is not set, Xcode skips the lines within the `#ifdef` during compilation and it does not include them into the compiled binary.
 
 ### Android
 

docs/the-new-architecture/pillars-turbomodule.md

@@ -427,11 +427,11 @@ Now add the Native code for your Turbo Native Module. Create two files in the `R
 ##### RTNCalculator.h
 
 ```objc title="RTNCalculator.h"
-#import <React/RCTBridgeModule.h>
+#import <RTNCalculatorSpec/RTNCalculatorSpec.h>
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RTNCalculator : NSObject <RCTBridgeModule>
+@interface RTNCalculator : NSObject <NativeCalculatorSpec>
 
 @end
 
@@ -448,13 +448,9 @@ This file defines the interface for the `RTNCalculator` module. Here, we can add
 
 @implementation RTNCalculator
 
-RCT_EXPORT_MODULE(RTNCalculator)
+RCT_EXPORT_MODULE()
 
-RCT_REMAP_METHOD(add, addA:(NSInteger)a
-                      andB:(NSInteger)b
-                withResolver:(RCTPromiseResolveBlock) resolve
-                withRejecter:(RCTPromiseRejectBlock) reject)
-{
+- (void)add:(double)a b:(double)b resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
     NSNumber *result = [[NSNumber alloc] initWithInteger:a+b];
     resolve(result);
 }
@@ -470,7 +466,7 @@ RCT_REMAP_METHOD(add, addA:(NSInteger)a
 
 The most important call is to the `RCT_EXPORT_MODULE`, which is required to export the module so that React Native can load the Turbo Native Module.
 
-Then the `RCT_REMAP_METHOD` macro is used to expose the `add` method.
+Then the `add` method, whose signature must match the one specified by the Codegen in the `RTNCalculatorSpec.h`.
 
 Finally, the `getTurboModule` method gets an instance of the Turbo Native Module so that the JavaScript side can invoke its methods. The function is defined in (and requested by) the `RTNCalculatorSpec.h` file that was generated earlier by Codegen.
 

website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-turbomodules.md

@@ -163,7 +163,9 @@ This changes do three main things:
 
 The second step is to instruct Xcode to avoid compiling all the lines using the New Architecture types and files when we are building an app with the Old Architecture.
 
-The file to change is the module implementation file, which is usually a `<your-module>.mm` file. That file is structured as follow:
+There are two files to change. The module implementation file, which is usually a `<your-module>.mm` file, and the module header, which is usually a `<your-module>.h` file.
+
+That implementation file is structured as follows:
 
 - Some `#import` statements, among which there is a `<GeneratedSpec>.h` file.
 - The module implementation, using the various `RCT_EXPORT_xxx` and `RCT_REMAP_xxx` macros.
@@ -190,7 +192,27 @@ The **goal** is to make sure that the `Turbo Native Module` still builds with th
 @end
 ```
 
-This snippet uses the same `RCT_NEW_ARCH_ENABLED` flag used in the previous [section](#dependencies-ios). When this flag is not set, Xcode skips the lines within the `#ifdef` during compilation and it does not include them into the compiled binary.
+A similar thing needs to be done for the header file. Add the following lines at the bottom of your module header. You need to first import the header and then, if the New Architecture is enabled, make it conform to the Spec protocol.
+
+```diff
+#import <React/RCTBridgeModule.h>
++ #ifdef RCT_NEW_ARCH_ENABLED
++ #import <YourModuleSpec/YourModuleSpec.h>
++ #endif
+
+@interface YourModule: NSObject <RCTBridgeModule>
+
+@end
+
++ #ifdef RCT_NEW_ARCH_ENABLED
++ @interface YourModule () <YourModuleSpec>
+
++ @end
++ #endif
+
+```
+
+This snippets uses the same `RCT_NEW_ARCH_ENABLED` flag used in the previous [section](#dependencies-ios). When this flag is not set, Xcode skips the lines within the `#ifdef` during compilation and it does not include them into the compiled binary.
 
 ### Android
 

website/versioned_docs/version-0.70/the-new-architecture/pillars-turbomodule.md

@@ -182,7 +182,6 @@ require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-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|
@@ -208,7 +207,7 @@ Pod::Spec.new do |s|
   }
 
   s.dependency "React-Codegen"
-  s.dependency "RCT-Folly", folly_version
+  s.dependency "RCT-Folly"
   s.dependency "RCTRequired"
   s.dependency "RCTTypeSafety"
   s.dependency "ReactCommon/turbomodule/core"
@@ -415,11 +414,11 @@ Now add the Native code for your Turbo Native Module. Create two files in the `R
 ##### RTNCalculator.h
 
 ```objc title="RTNCalculator.h"
-#import <React/RCTBridgeModule.h>
+#import <RTNCalculatorSpec/RTNCalculatorSpec.h>
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RTNCalculator : NSObject <RCTBridgeModule>
+@interface RTNCalculator : NSObject <NativeCalculatorSpec>
 
 @end
 
@@ -436,13 +435,9 @@ This file defines the interface for the `RTNCalculator` module. Here, we can add
 
 @implementation RTNCalculator
 
-RCT_EXPORT_MODULE(RTNCalculator)
+RCT_EXPORT_MODULE()
 
-RCT_REMAP_METHOD(add, addA:(NSInteger)a
-                      andB:(NSInteger)b
-                withResolver:(RCTPromiseResolveBlock) resolve
-                withRejecter:(RCTPromiseRejectBlock) reject)
-{
+- (void)add:(double)a b:(double)b resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
     NSNumber *result = [[NSNumber alloc] initWithInteger:a+b];
     resolve(result);
 }
@@ -458,7 +453,7 @@ RCT_REMAP_METHOD(add, addA:(NSInteger)a
 
 The most important call is to the `RCT_EXPORT_MODULE`, which is required to export the module so that React Native can load the Turbo Native Module.
 
-Then the `RCT_REMAP_METHOD` macro is used to expose the `add` method.
+Then the `add` method, whose signature must match the one specified by the Codegen in the `RTNCalculatorSpec.h`.
 
 Finally, the `getTurboModule` method gets an instance of the Turbo Native Module so that the JavaScript side can invoke its methods. The function is defined in (and requested by) the `RTNCalculatorSpec.h` file that was generated earlier by Codegen.