Skip to content
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
12 changes: 6 additions & 6 deletions docs/the-new-architecture/pure-cxx-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ In this guide, we will go through the creation of a pure C++ Turbo Native Module
4. Register the module in the Android and iOS application
5. Test your changes in JS

The rest of this guide assume that you have created your application running the command:
The rest of this guide assumes that you have created your application running the command:

<CodeBlock language="bash" title="shell">
{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
Expand Down Expand Up @@ -94,7 +94,7 @@ This configuration tells Codegen to look for spec files in the `specs` folder. I

## 3. Write the Native Code

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.
Writing a C++ Turbo Native Module allows you to share the code between Android and 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.

1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
Expand Down Expand Up @@ -195,7 +195,7 @@ The CMake file does the following things:
Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.

1. Open the `SampleApp/android/app/build.gradle` file.
2. Add the following block into the Gradle file, within the existent `android` block:
2. Add the following block into the Gradle file, within the existing `android` block:

```diff title="android/app/build.gradle"
buildTypes {
Expand Down Expand Up @@ -257,7 +257,7 @@ std::shared_ptr<TurboModule> cxxModuleProvider(
// return std::make_shared<NativeCxxModuleExample>(jsInvoker);
// }

+ // This code register the module so that when the JS side asks for it, the app can return it
+ // This code registers the module so that when the JS side asks for it, the app can return it
+ if (name == NativeSampleModule::kModuleName) {
+ return std::make_shared<NativeSampleModule>(jsInvoker);
+ }
Expand Down Expand Up @@ -377,7 +377,7 @@ This code implements the `RCTModuleProvider` protocol by creating the pure C++ `

##### 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.
The last step consists 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:

Expand Down Expand Up @@ -448,7 +448,7 @@ function App(): React.JSX.Element {
<Text style={styles.title}>
Welcome to C++ Turbo Native Module Example
</Text>
<Text>Write down here he text you want to revert</Text>
<Text>Write down here the text you want to reverse</Text>
<TextInput
style={styles.textInput}
placeholder="Write your text here"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ In this guide, we will go through the creation of a pure C++ Turbo Native Module
4. Register the module in the Android and iOS application
5. Test your changes in JS

The rest of this guide assume that you have created your application running the command:
The rest of this guide assumes that you have created your application running the command:

<CodeBlock language="bash" title="shell">
{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
Expand Down Expand Up @@ -93,7 +93,7 @@ This configuration tells Codegen to look for spec files in the `specs` folder. I

## 3. Write the Native Code

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.
Writing a C++ Turbo Native Module allows you to share the code between Android and 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.

1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
Expand Down Expand Up @@ -194,7 +194,7 @@ The CMake file does the following things:
Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.

1. Open the `SampleApp/android/app/build.gradle` file.
2. Add the following block into the Gradle file, within the existent `android` block:
2. Add the following block into the Gradle file, within the existing `android` block:

```diff title="android/app/build.gradle"
buildTypes {
Expand Down Expand Up @@ -256,7 +256,7 @@ std::shared_ptr<TurboModule> cxxModuleProvider(
// return std::make_shared<NativeCxxModuleExample>(jsInvoker);
// }

+ // This code register the module so that when the JS side asks for it, the app can return it
+ // This code registers the module so that when the JS side asks for it, the app can return it
+ if (name == NativeSampleModule::kModuleName) {
+ return std::make_shared<NativeSampleModule>(jsInvoker);
+ }
Expand Down Expand Up @@ -397,7 +397,7 @@ function App(): React.JSX.Element {
<Text style={styles.title}>
Welcome to C++ Turbo Native Module Example
</Text>
<Text>Write down here he text you want to revert</Text>
<Text>Write down here the text you want to reverse</Text>
<TextInput
style={styles.textInput}
placeholder="Write your text here"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ In this guide, we will go through the creation of a pure C++ Turbo Native Module
4. Register the module in the Android and iOS application
5. Test your changes in JS

The rest of this guide assume that you have created your application running the command:
The rest of this guide assumes that you have created your application running the command:

<CodeBlock language="bash" title="shell">
{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
Expand Down Expand Up @@ -93,7 +93,7 @@ This configuration tells Codegen to look for spec files in the `specs` folder. I

## 3. Write the Native Code

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.
Writing a C++ Turbo Native Module allows you to share the code between Android and 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.

1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
Expand Down Expand Up @@ -194,7 +194,7 @@ The CMake file does the following things:
Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.

1. Open the `SampleApp/android/app/build.gradle` file.
2. Add the following block into the Gradle file, within the existent `android` block:
2. Add the following block into the Gradle file, within the existing `android` block:

```diff title="android/app/build.gradle"
buildTypes {
Expand Down Expand Up @@ -256,7 +256,7 @@ std::shared_ptr<TurboModule> cxxModuleProvider(
// return std::make_shared<NativeCxxModuleExample>(jsInvoker);
// }

+ // This code register the module so that when the JS side asks for it, the app can return it
+ // This code registers the module so that when the JS side asks for it, the app can return it
+ if (name == NativeSampleModule::kModuleName) {
+ return std::make_shared<NativeSampleModule>(jsInvoker);
+ }
Expand Down Expand Up @@ -397,7 +397,7 @@ function App(): React.JSX.Element {
<Text style={styles.title}>
Welcome to C++ Turbo Native Module Example
</Text>
<Text>Write down here he text you want to revert</Text>
<Text>Write down here the text you want to reverse</Text>
<TextInput
style={styles.textInput}
placeholder="Write your text here"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ In this guide, we will go through the creation of a pure C++ Turbo Native Module
4. Register the module in the Android and iOS application
5. Test your changes in JS

The rest of this guide assume that you have created your application running the command:
The rest of this guide assumes that you have created your application running the command:

<CodeBlock language="bash" title="shell">
{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
Expand Down Expand Up @@ -93,7 +93,7 @@ This configuration tells Codegen to look for spec files in the `specs` folder. I

## 3. Write the Native Code

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.
Writing a C++ Turbo Native Module allows you to share the code between Android and 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.

1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
Expand Down Expand Up @@ -194,7 +194,7 @@ The CMake file does the following things:
Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.

1. Open the `SampleApp/android/app/build.gradle` file.
2. Add the following block into the Gradle file, within the existent `android` block:
2. Add the following block into the Gradle file, within the existing `android` block:

```diff title="android/app/build.gradle"
buildTypes {
Expand Down Expand Up @@ -256,7 +256,7 @@ std::shared_ptr<TurboModule> cxxModuleProvider(
// return std::make_shared<NativeCxxModuleExample>(jsInvoker);
// }

+ // This code register the module so that when the JS side asks for it, the app can return it
+ // This code registers the module so that when the JS side asks for it, the app can return it
+ if (name == NativeSampleModule::kModuleName) {
+ return std::make_shared<NativeSampleModule>(jsInvoker);
+ }
Expand Down Expand Up @@ -376,7 +376,7 @@ This code implements the `RCTModuleProvider` protocol by creating the pure C++ `

##### 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.
The last step consists 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:

Expand Down Expand Up @@ -447,7 +447,7 @@ function App(): React.JSX.Element {
<Text style={styles.title}>
Welcome to C++ Turbo Native Module Example
</Text>
<Text>Write down here he text you want to revert</Text>
<Text>Write down here the text you want to reverse</Text>
<TextInput
style={styles.textInput}
placeholder="Write your text here"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ In this guide, we will go through the creation of a pure C++ Turbo Native Module
4. Register the module in the Android and iOS application
5. Test your changes in JS

The rest of this guide assume that you have created your application running the command:
The rest of this guide assumes that you have created your application running the command:

<CodeBlock language="bash" title="shell">
{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
Expand Down Expand Up @@ -93,7 +93,7 @@ This configuration tells Codegen to look for spec files in the `specs` folder. I

## 3. Write the Native Code

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.
Writing a C++ Turbo Native Module allows you to share the code between Android and 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.

1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
Expand Down Expand Up @@ -194,7 +194,7 @@ The CMake file does the following things:
Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.

1. Open the `SampleApp/android/app/build.gradle` file.
2. Add the following block into the Gradle file, within the existent `android` block:
2. Add the following block into the Gradle file, within the existing `android` block:

```diff title="android/app/build.gradle"
buildTypes {
Expand Down Expand Up @@ -256,7 +256,7 @@ std::shared_ptr<TurboModule> cxxModuleProvider(
// return std::make_shared<NativeCxxModuleExample>(jsInvoker);
// }

+ // This code register the module so that when the JS side asks for it, the app can return it
+ // This code registers the module so that when the JS side asks for it, the app can return it
+ if (name == NativeSampleModule::kModuleName) {
+ return std::make_shared<NativeSampleModule>(jsInvoker);
+ }
Expand Down Expand Up @@ -376,7 +376,7 @@ This code implements the `RCTModuleProvider` protocol by creating the pure C++ `

##### 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.
The last step consists 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:

Expand Down Expand Up @@ -447,7 +447,7 @@ function App(): React.JSX.Element {
<Text style={styles.title}>
Welcome to C++ Turbo Native Module Example
</Text>
<Text>Write down here he text you want to revert</Text>
<Text>Write down here the text you want to reverse</Text>
<TextInput
style={styles.textInput}
placeholder="Write your text here"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ In this guide, we will go through the creation of a pure C++ Turbo Native Module
4. Register the module in the Android and iOS application
5. Test your changes in JS

The rest of this guide assume that you have created your application running the command:
The rest of this guide assumes that you have created your application running the command:

<CodeBlock language="bash" title="shell">
{`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`}
Expand Down Expand Up @@ -93,7 +93,7 @@ This configuration tells Codegen to look for spec files in the `specs` folder. I

## 3. Write the Native Code

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.
Writing a C++ Turbo Native Module allows you to share the code between Android and 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.

1. Create a folder named `shared` at the same level as the `android` and `ios` folders.
2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`.
Expand Down Expand Up @@ -194,7 +194,7 @@ The CMake file does the following things:
Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module.

1. Open the `SampleApp/android/app/build.gradle` file.
2. Add the following block into the Gradle file, within the existent `android` block:
2. Add the following block into the Gradle file, within the existing `android` block:

```diff title="android/app/build.gradle"
buildTypes {
Expand Down Expand Up @@ -256,7 +256,7 @@ std::shared_ptr<TurboModule> cxxModuleProvider(
// return std::make_shared<NativeCxxModuleExample>(jsInvoker);
// }

+ // This code register the module so that when the JS side asks for it, the app can return it
+ // This code registers the module so that when the JS side asks for it, the app can return it
+ if (name == NativeSampleModule::kModuleName) {
+ return std::make_shared<NativeSampleModule>(jsInvoker);
+ }
Expand Down Expand Up @@ -376,7 +376,7 @@ This code implements the `RCTModuleProvider` protocol by creating the pure C++ `

##### 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.
The last step consists 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:

Expand Down Expand Up @@ -447,7 +447,7 @@ function App(): React.JSX.Element {
<Text style={styles.title}>
Welcome to C++ Turbo Native Module Example
</Text>
<Text>Write down here he text you want to revert</Text>
<Text>Write down here the text you want to reverse</Text>
<TextInput
style={styles.textInput}
placeholder="Write your text here"
Expand Down
Loading