You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/the-new-architecture/pure-cxx-modules.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
4
4
5
-
Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platform, without the need of writing platformspecific code.
5
+
Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.
6
6
7
7
In this guide, we will go through the creation of a pure C++ Turbo Native Module:
Pure C++ Turbo Native Modules are Turbo Native Modules. They needs a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
23
+
Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.
24
24
25
-
Specs files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
25
+
Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.
26
26
27
27
1. Inside the root folder of your app, create a new folder called `specs`.
28
28
2. Create a new file called `NativeSampleModule.ts` with the following code:
@@ -87,13 +87,13 @@ The next step is to configure [Codegen](what-is-codegen.md) in your `package.jso
87
87
"dependencies": {
88
88
```
89
89
90
-
This configuration tells Codegen to look for specs files in the `specs` folder. It also instruct Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
90
+
This configuration tells Codegen to look for spec files in the `specs` folder. It also instructs Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`.
91
91
92
92
## 3. Write the Native Code
93
93
94
-
Writing a C++ Turbo Native Module allow you to share the code between Android an iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
94
+
Writing a C++ Turbo Native Module allows you to share the code between Android an iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.
95
95
96
-
1. Create a folder named `shared` at the same level of the `android` and `ios` folders.
96
+
1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
97
97
2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
98
98
99
99
```cpp title="shared/NativeSampleModule.h"
@@ -141,7 +141,7 @@ Let's have a look at the two files we created:
141
141
- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.
142
142
- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement.
143
143
144
-
The `NativeSampleModule.cpp` files is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
144
+
The `NativeSampleModule.cpp` file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.
145
145
146
146
## 4. Register the Module in the platform
147
147
@@ -159,7 +159,7 @@ To make sure that the Android app can effectively build the C++ Turbo Native Mod
159
159
160
160
#### 1. Create the `CMakeLists.txt` file
161
161
162
-
Android uses CMake to build. CMake needs to access the files we defined in our shared folder, to be able to build them.
162
+
Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.
163
163
164
164
1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives.
165
165
2. Create a `CMakeLists.txt` file and add this context:
@@ -228,7 +228,7 @@ The final step is to register the new C++ Turbo Native Module in the runtime, so
This steps adds the `shared` folder to the project to make it visible to xcode.
298
+
This step adds the `shared` folder to the project to make it visible to Xcode.
299
299
300
300
1. Open the CocoPods generated Xcode Workspace.
301
301
@@ -347,7 +347,7 @@ In Xcode, open the `AppDelegate.mm` file and modify it as follows:
347
347
348
348
These changes are doing a few things:
349
349
350
-
1. Importing the `RCTAppDelegate+Protected` header to make visible to the AppDelegate that it is conforming to the `RCTTurboModuleManagerDelegate` protocol.
350
+
1. Importing the `RCTAppDelegate+Protected` header to make it visible to the AppDelegate that it is conforming to the `RCTTurboModuleManagerDelegate` protocol.
351
351
2. Importing the Pure C++ Native Turbo Module interface `NativeSampleModule.h`
352
352
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.
353
353
@@ -431,10 +431,10 @@ The interesting lines in this app are:
431
431
:::warning
432
432
For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
433
433
The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
434
-
This allow you to prepare the input for the specs and gives you more control over then in JS.
434
+
This allows you to prepare the input for the specs and gives you more control over them in JS.
435
435
:::
436
436
437
-
Congratulation, you wrote your first C++ Turbo Native Module!
437
+
Congratulations, you wrote your first C++ Turbo Native Module!
0 commit comments