[0.70] Clarify New Architecture Terminology (#3315)

Author: cortinico

website/versioned_docs/version-0.70/new-architecture-app-intro.md

@@ -226,7 +226,7 @@ React Native supports also a local version of this file `.xcode.env.local`. This
 
 ## iOS: Use Objective-C++ (`.mm` extension)
 
-TurboModules can be written using Objective-C or C++. In order to support both cases, any source files that include C++ code should use the `.mm` file extension. This extension corresponds to Objective-C++, a language variant that allows for the use of a combination of C++ and Objective-C in source files.
+Turbo Native Modules can be written using Objective-C or C++. In order to support both cases, any source files that include C++ code should use the `.mm` file extension. This extension corresponds to Objective-C++, a language variant that allows for the use of a combination of C++ and Objective-C in source files.
 
 :::info
 

website/versioned_docs/version-0.70/new-architecture-app-modules-android.md

@@ -100,7 +100,7 @@ yarn react-native run-android
 
 ## 2. Java/Kotlin - Provide a `ReactPackageTurboModuleManagerDelegate`
 
-Now is time to actually use the TurboModule.
+Now is time to actually use the Turbo Native Module.
 First, we will need to create a `ReactPackageTurboModuleManagerDelegate` subclass, like the following:
 
 <Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
@@ -193,7 +193,7 @@ protected constructor(
 
 Please note that the `SoLoader.loadLibrary` parameter (in this case `"myapplication_appmodules")` should be the same as the one specified for `project()` inside the `CMakeLists.txt` file you created before.
 
-This class will then be responsible of loading the TurboModules and will take care of loading the native library build with the NDK at runtime.
+This class will then be responsible of loading the Turbo Native Modules and will take care of loading the native library build with the NDK at runtime.
 
 ## 3. Adapt your `ReactNativeHost` to use the `ReactPackageTurboModuleManagerDelegate`
 
@@ -259,7 +259,7 @@ class MyApplication : Application(), ReactApplication {
 
 ## 4. Extend the `getPackages()` from your `ReactNativeHost` to use the TurboModule
 
-Still on the `ReactNativeHost` , we need to extend the the `getPackages()` method to include the newly created TurboModule. Update the method to include the following:
+Still on the `ReactNativeHost` , we need to extend the the `getPackages()` method to include the newly created Turbo Native Module. Update the method to include the following:
 
 <Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
 <TabItem value="java">
@@ -493,7 +493,7 @@ std::shared_ptr<TurboModule> MyApplicationModuleProvider(const std::string modul
 Please adapt the `samplelibrary.h` import to match the same library name you provided when building the apps.
 This is the C++ generated file that is created by the codegen.
 
-Here you can also specify more than one provider, should you have more than one TurboModule. Specifically in this example we look for a TurboModule from `samplelibrary` (the one we specified) and we fallback to the `rncore` Module Provider (containing all the Core modules).
+Here you can also specify more than one provider, should you have more than one Turbo Native Module. Specifically in this example we look for a Turbo Native Module from `samplelibrary` (the one we specified) and we fallback to the `rncore` Module Provider (containing all the Core modules).
 
 ```cpp
 #include "MyApplicationModuleProvider.h"
@@ -532,7 +532,7 @@ JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
 
 ## 6. Enable the `useTurboModules` flag in your Application `onCreate`
 
-Now you can finally enable the `TurboModule `support in your Application. To do so, you need to turn on the `useTurboModule` flag inside your Application `onCreate` method.
+Now you can finally enable the `Turbo Native Module` support in your Application. To do so, you need to turn on the `useTurboModule` flag inside your Application `onCreate` method.
 
 <Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
 <TabItem value="java">

website/versioned_docs/version-0.70/new-architecture-app-modules-ios.md

@@ -18,7 +18,7 @@ Add the following imports at the top of your bridge delegate (e.g. `AppDelegate.
 #import <React/CoreModulesPlugins.h>
 ```
 
-You will also need to declare that your AppDelegate conforms to the `RCTTurboModuleManagerDelegate` protocol, as well as create an instance variable for our Turbo Module manager:
+You will also need to declare that your AppDelegate conforms to the `RCTTurboModuleManagerDelegate` protocol, as well as create an instance variable for our Turbo Native Module manager:
 
 ```objc
 @interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate> {
@@ -31,8 +31,8 @@ You will also need to declare that your AppDelegate conforms to the `RCTTurboMod
 To conform to the `RCTTurboModuleManagerDelegate` protocol, you will implement these three methods:
 
 - `getModuleClassFromName:` - This method should return the Class for a native module. You may use the `RCTCoreModulesClassProvider()` method to handle the default, core modules.
-- `getTurboModule:jsInvoker:` - This should return `nullptr`. This method may be used later to support C++ TurboModules.
-- `getModuleInstanceFromClass:moduleClass:` - This method allows you to perform any side-effects when your TurboModules are initialized. This is the TurboModule analogue to your bridge delegate’s `extraModulesForBridge` method. At this time, you’ll need to initialize the default RCTNetworking and RCTImageLoader modules as indicated below.
+- `getTurboModule:jsInvoker:` - This should return `nullptr`. This method may be used later to support C++ Turbo Native Modules.
+- `getModuleInstanceFromClass:moduleClass:` - This method allows you to perform any side-effects when your Turbo Native Modules are initialized. This is the Turbo Native Module analogue to your bridge delegate’s `extraModulesForBridge` method. At this time, you’ll need to initialize the default RCTNetworking and RCTImageLoader modules as indicated below.
 
 #### TurboModuleManagerDelegate Example
 
@@ -147,9 +147,9 @@ Next, you will create a `RCTTurboModuleManager` in your bridge delegate’s `jsE
 }
 ```
 
-## 3. Enable TurboModule System
+## 3. Enable Turbo Native Module System
 
-Finally, enable TurboModules in your app by executing the following statement before React Native is initialized in your app delegate (e.g. within `didFinishLaunchingWithOptions:`):
+Finally, enable Turbo Native Modules in your app by executing the following statement before React Native is initialized in your app delegate (e.g. within `didFinishLaunchingWithOptions:`):
 
 ```objc
 RCTEnableTurboModule(YES);

website/versioned_docs/version-0.70/new-architecture-app-renderer-android.md

@@ -11,7 +11,7 @@ Make sure your application meets all the [prerequisites](new-architecture-app-in
 
 ## 1. Provide a `JSIModulePackage` inside your `ReactNativeHost`
 
-In order to enable Fabric in your app, you would need to add a `JSIModulePackage` inside your `ReactNativeHost`. If you followed the TurboModule section of this guide, you probably already know where to find your `ReactNativeHost`. If not, you can locate your `ReactNativeHost` by searching for the `getReactNativeHost()`. The `ReactNativeHost` is usually located inside your `Application` class.
+In order to enable Fabric in your app, you would need to add a `JSIModulePackage` inside your `ReactNativeHost`. If you followed the Turbo Native Module section of this guide, you probably already know where to find your `ReactNativeHost`. If not, you can locate your `ReactNativeHost` by searching for the `getReactNativeHost()`. The `ReactNativeHost` is usually located inside your `Application` class.
 
 Once you located it, you need to add the `getJSIModulePackage` method as from the snippet below:
 
@@ -113,12 +113,12 @@ LOG Running "App" with {"fabric":true,"initialProps":{},"rootTag":1}
 
 ## Migrating Android ViewManagers
 
-First, make sure you followed the instructions to [Enabling the New Renderer (Fabric) in Your Android Application](#enabling-the-new-renderer-fabric-in-your-android-application). Plus we will also assume that you followed the instructions from [Enabling the New NativeModule System (TurboModule) in Your Android Application](#enabling-the-new-nativemodule-system-turbomodule-in-your-android-application) as the native builds setup steps are presented over there and won’t be repeated here.
+First, make sure you followed the instructions to [Enabling the New Renderer (Fabric) in Your Android Application](#enabling-the-new-renderer-fabric-in-your-android-application). Plus we will also assume that you followed the instructions from [Enabling the New Native Module System (Turbo Module) in Your Android Application](#enabling-the-new-nativemodule-system-turbomodule-in-your-android-application) as the native builds setup steps are presented over there and won’t be repeated here.
 
 ### JavaScript changes
 
 1. Make sure your other JS changes are ready to go by following Preparing your JavaScript codebase for the new React Native Renderer (Fabric)
-2. Replace the call to `requireNativeComponent` with `codegenNativeComponent`. This tells the JS codegen to start generating the native implementation of the component, consisting of C++ and Java classes. This is how it looks for the WebView component:
+2. Replace the call to `requireNativeComponent` with `codegenNativeComponent`. This tells the JS codegen to start generating the native implementation of the Native Component, consisting of C++ and Java classes. This is how it looks for the WebView component:
 
 ```ts
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -131,7 +131,7 @@ export default (codegenNativeComponent<NativeProps>(
 ): HostComponent<NativeProps>);
 ```
 
-4. **[Flow users]** Make sure your native component has Flow types for its props, since the JS codegen uses these types to generate the type-safe native implementation of the component. The codegen generates C++ classes during the build time, which guarantees that the native implementation is always up-to-date with its JS interface. Use [these c++ compatible types](https://github.com/facebook/react-native/blob/main/Libraries/Types/CodegenTypes.js#L28-L30).
+4. **[Flow users]** Make sure your Native Component has Flow types for its props, since the JS codegen uses these types to generate the type-safe native implementation of the Component. The codegen generates C++ classes during the build time, which guarantees that the native implementation is always up-to-date with its JS interface. Use [these c++ compatible types](https://github.com/facebook/react-native/blob/main/Libraries/Types/CodegenTypes.js#L28-L30).
 
 ```ts title="RNTMyNativeViewNativeComponent.js"
 import type {Int32} from 'react-native/Libraries/Types/CodegenTypes';
@@ -428,7 +428,7 @@ void MyComponentsRegistry::registerNatives() {
 
 4. **Load your file in the OnLoad.cpp**
 
-If you followed the TurboModule instructions, you should have a `OnLoad.cpp` file inside the `src/main/jni` folder. There you should add a line to load the `MyComponentsRegistry` class:
+If you followed the Turbo Native Module instructions, you should have a `OnLoad.cpp` file inside the `src/main/jni` folder. There you should add a line to load the `MyComponentsRegistry` class:
 
 ```cpp title="OnLoad.cpp"
 #include <fbjni/fbjni.h>

website/versioned_docs/version-0.70/new-architecture-appendix.md

@@ -7,7 +7,16 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
 <NewArchitectureWarning/>
 
-## I. Flow Type to Native Type Mapping
+## I. Terminology
+
+The whole New Architecture related guides will stick to the following **terminology**:
+
+- **Legacy Native Components** - To refer to Components which are running on the old React Native architecture.
+- **Legacy Native Modules** - To refer to Modules which are running on the old React Native architecture.
+- **Fabric Native Components** - To refer to Components which have been adapted to work well with the New Architecture, namely the new renderer. For brevity you might find them referred as **Fabric Components**.
+- **Turbo Native Modules** - To refer to Modules which have been adapted to work well with the New Architecture, namely the new Native Module System. For brevity you might find them referred as **Turbo Modules**
+
+## II. Flow Type to Native Type Mapping
 
 You may use the following table as a reference for which types are supported and what they map to in each platform:
 
@@ -85,7 +94,7 @@ Callback functions are not type checked, and are generalized as `Object`s.
 You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.
 :::
 
-## II. TypeScript to Native Type Mapping
+## III. TypeScript to Native Type Mapping
 
 You may use the following table as a reference for which types are supported and what they map to in each platform:
 
@@ -105,7 +114,7 @@ You may use the following table as a reference for which types are supported and
 
 You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.
 
-## III. Invoking the code-gen during development
+## IV. Invoking the code-gen during development
 
 > This section contains information specific to v0.66 of React Native.
 
@@ -182,7 +191,7 @@ node node_modules/react-native/scripts/generate-specs-cli.js \
 
 In the above example, the code-gen script will generate several files: `MyLibSpecs.h` and `MyLibSpecs-generated.mm`, as well as a handful of `.h` and `.cpp` files, all located in the `ios` directory.
 
-## IV. Note on Existing Apps
+## V. Note on Existing Apps
 
 This guide provides instructions for migrating an application that is based on the default app template that is provided by React Native. If your app has deviated from the template, or you are working with an application that was never based off the template, then the following sections might help.
 

website/versioned_docs/version-0.70/new-architecture-intro.md

@@ -9,7 +9,7 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
 # Getting Started with the New Architecture
 
-This migration guide is designed for React Native **library authors** and **application developers**. It outlines the steps you need to follow to roll out the new Architecture, composed by the **new NativeModule system (TurboModule) and the new Renderer (Fabric)** to your **Android** and **iOS** libraries and apps.
+This migration guide is designed for React Native **library authors** and **application developers**. It outlines the steps you need to follow to roll out the new Architecture, composed by the **New Native Module system (Turbo Module) and the new Renderer (Fabric)** to your **Android** and **iOS** libraries and apps.
 
 ## Table of Contents
 
@@ -22,7 +22,7 @@ The guide is divided into five sections:
     - [iOS](new-architecture-library-ios)
 - **Supporting the New Architecture in your App**
   - [Prerequisites for Supporting the New Architecture in your App](new-architecture-app-intro)
-  - Enabling the New NativeModule System (TurboModule) in your App
+  - Enabling the New Native Module System (Turbo Module) in your App
     - [Android](new-architecture-app-modules-android)
     - [iOS](new-architecture-app-modules-ios)
   - Enabling the New Renderer (Fabric) in your App

website/versioned_docs/version-0.70/new-architecture-library-intro.md

@@ -23,7 +23,7 @@ Currently, this guide is written under the assumption that you will be using [Fl
 
 To adopt the New Architecture, you start by creating these specs for your native modules and native components. You can do this prior to actually migrating to the New Architecture: the specs will be used later on to generate native interface code for all the supported platforms, as a way to enforce uniform APIs across platforms.
 
-#### Turbomodules
+#### Turbo Native Modules
 
 JavaScript spec files **must** be named `Native<MODULE_NAME>.js` and they export a `TurboModuleRegistry` `Spec` object. The name convention is important because the Codegen process looks for modules whose `js` (`jsx`, `ts`, or `tsx`) spec file starts with the keyword `Native`.
 
@@ -70,7 +70,7 @@ export default TurboModuleRegistry.get<Spec>('<MODULE_NAME>');
 </TabItem>
 </Tabs>
 
-#### Fabric Components
+#### Fabric Native Components
 
 JavaScript spec files **must** be named `<FABRIC COMPONENT>NativeComponent.js` (for TypeScript use extension `.ts` or `.tsx`) and they export a `HostComponent` object. The name convention is important: the Codegen process looks for components whose spec file (either JavaScript or TypeScript) ends with the suffix `NativeComponent`.
 
@@ -214,7 +214,7 @@ Codegen can be configured in the `package.json` file of your Library. Add the fo
 
 - The `codegenConfig` is the key used by the Codegen to verify that there is some code to generate.
 - The `name` field, is the name of the library.
-- The `type` field is used to identify the type of module we want to create. Our suggestions is to keep `all` to support libraries that contains both TurboModule and Fabric Components.
+- The `type` field is used to identify the type of module we want to create. Our suggestion is to keep `all` to support libraries that contain both Turbo Native Module and Fabric Native Components.
 - The `jsSrcsDir` is the directory where the codegen will start looking for JavaScript specs.
 - The `android.javaPackageName` is the name of the package where the generated code wil end up.
 

website/versioned_docs/version-0.70/new-architecture-library-ios.md

@@ -32,7 +32,7 @@ Pod::Spec.new do |s|
   }
 
   s.dependency "React-Core"
-  s.dependency "React-RCTFabric" # This is for Fabric Component
+  s.dependency "React-RCTFabric" # This is for Fabric Native Component
   s.dependency "React-Codegen"
   s.dependency "RCT-Folly"
   s.dependency "RCTRequired"

website/versioned_docs/version-0.70/react-18-and-react-native.md

@@ -31,7 +31,7 @@ The concurrent features in React 18 are built on top of the new concurrent rende
 
 Previous versions of React Native built on the old architecture **cannot** support concurrent rendering or concurrent features. This is because the old architecture relied on mutating the native trees, which doesn’t allow for React to prepare multiple versions of the tree at the same time.
 
-Fortunately, the New Architecture was written bottom-up with concurrent rendering in mind, and is fully compatible with React 18. This means, in order to upgrade to React 18 in your React Native app, your application needs to be migrated to the React Native's New Architecture including Fabric and TurboModules.
+Fortunately, the New Architecture was written bottom-up with concurrent rendering in mind, and is fully compatible with React 18. This means, in order to upgrade to React 18 in your React Native app, your application needs to be migrated to the React Native's New Architecture including Fabric Native Components and Turbo Native Modules.
 
 ## React 18 enabled by default
 

website/versioned_docs/version-0.70/the-new-architecture/_markdown_native_deprecation.mdx

@@ -1,4 +1,4 @@
 :::info
 Native Module and Native Components are our stable technologies used by the legacy architecture.
-They will be deprecated in the future when the New Architecture will be stable. The New Architecture uses [TurboModule](./the-new-architecture/pillars-turbomodules) and [Fabric Components](./the-new-architecture/pillars-fabric-components) to achieve similar results.
+They will be deprecated in the future when the New Architecture will be stable. The New Architecture uses [Turbo Native Module](./the-new-architecture/pillars-turbomodules) and [Fabric Native Components](./the-new-architecture/pillars-fabric-components) to achieve similar results.
 :::