Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Improve TM explanation #3364

Merged
merged 1 commit into from
Oct 16, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions docs/the-new-architecture/backward-compatibility-turbomodules.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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

Expand Down
14 changes: 5 additions & 9 deletions docs/the-new-architecture/pillars-turbomodule.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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);
}
Expand All @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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|
Expand All @@ -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"
Expand Down Expand Up @@ -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

Expand All @@ -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);
}
Expand All @@ -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.

Expand Down