diff --git a/docs/the-new-architecture/pure-cxx-modules.md b/docs/the-new-architecture/pure-cxx-modules.md index 0a1875e9d1c..3fff6355e42 100644 --- a/docs/the-new-architecture/pure-cxx-modules.md +++ b/docs/the-new-architecture/pure-cxx-modules.md @@ -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: {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} @@ -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`. @@ -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 { @@ -257,7 +257,7 @@ std::shared_ptr cxxModuleProvider( // return std::make_shared(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(jsInvoker); + } @@ -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: @@ -448,7 +448,7 @@ function App(): React.JSX.Element { Welcome to C++ Turbo Native Module Example - Write down here he text you want to revert + Write down here the text you want to reverse {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} @@ -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`. @@ -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 { @@ -256,7 +256,7 @@ std::shared_ptr cxxModuleProvider( // return std::make_shared(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(jsInvoker); + } @@ -397,7 +397,7 @@ function App(): React.JSX.Element { Welcome to C++ Turbo Native Module Example - Write down here he text you want to revert + Write down here the text you want to reverse {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} @@ -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`. @@ -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 { @@ -256,7 +256,7 @@ std::shared_ptr cxxModuleProvider( // return std::make_shared(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(jsInvoker); + } @@ -397,7 +397,7 @@ function App(): React.JSX.Element { Welcome to C++ Turbo Native Module Example - Write down here he text you want to revert + Write down here the text you want to reverse {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} @@ -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`. @@ -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 { @@ -256,7 +256,7 @@ std::shared_ptr cxxModuleProvider( // return std::make_shared(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(jsInvoker); + } @@ -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: @@ -447,7 +447,7 @@ function App(): React.JSX.Element { Welcome to C++ Turbo Native Module Example - Write down here he text you want to revert + Write down here the text you want to reverse {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} @@ -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`. @@ -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 { @@ -256,7 +256,7 @@ std::shared_ptr cxxModuleProvider( // return std::make_shared(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(jsInvoker); + } @@ -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: @@ -447,7 +447,7 @@ function App(): React.JSX.Element { Welcome to C++ Turbo Native Module Example - Write down here he text you want to revert + Write down here the text you want to reverse {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} @@ -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`. @@ -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 { @@ -256,7 +256,7 @@ std::shared_ptr cxxModuleProvider( // return std::make_shared(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(jsInvoker); + } @@ -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: @@ -447,7 +447,7 @@ function App(): React.JSX.Element { Welcome to C++ Turbo Native Module Example - Write down here he text you want to revert + Write down here the text you want to reverse {`npx @react-native-community/cli@latest init SampleApp --version ${getCurrentVersion()}`} @@ -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`. @@ -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 { @@ -256,7 +256,7 @@ std::shared_ptr cxxModuleProvider( // return std::make_shared(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(jsInvoker); + } @@ -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: @@ -447,7 +447,7 @@ function App(): React.JSX.Element { Welcome to C++ Turbo Native Module Example - Write down here he text you want to revert + Write down here the text you want to reverse