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/new-architecture-app-intro.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -188,7 +188,7 @@ React Native also supports a local version of this file `.xcode.env.local`. This
188
188
189
189
## iOS - Use Objective-C++ (`.mm` extension)
190
190
191
-
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.
191
+
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.
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.
195
195
196
-
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.
196
+
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.
197
197
198
198
## 3. Adapt your `ReactNativeHost` to use the `ReactPackageTurboModuleManagerDelegate`
199
199
@@ -259,7 +259,7 @@ class MyApplication : Application(), ReactApplication {
259
259
260
260
## 4. Extend the `getPackages()` from your `ReactNativeHost` to use the TurboModule
261
261
262
-
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:
262
+
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:
@@ -493,7 +493,7 @@ std::shared_ptr<TurboModule> MyApplicationModuleProvider(const std::string modul
493
493
Please adapt the `samplelibrary.h` import to match the same library name you provided when building the apps.
494
494
This is the C++ generated file that is created by the codegen.
495
495
496
-
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).
496
+
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).
## 6. Enable the `useTurboModules` flag in your Application `onCreate`
534
534
535
-
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.
535
+
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.
Copy file name to clipboardExpand all lines: docs/new-architecture-app-renderer-android.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -113,7 +113,7 @@ LOG Running "App" with {"fabric":true,"initialProps":{},"rootTag":1}
113
113
114
114
## Migrating Android ViewManagers
115
115
116
-
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.
116
+
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 (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.
Copy file name to clipboardExpand all lines: docs/new-architecture-appendix.md
+13-4Lines changed: 13 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,16 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
7
7
8
8
<NewArchitectureWarning/>
9
9
10
-
## I. Flow Type to Native Type Mapping
10
+
## I. Terminology
11
+
12
+
The whole New Architecture related guides will stick to the following **terminology**:
13
+
14
+
-**Legacy Native Components** - To refer to Components which are running on the old React Native architecture.
15
+
-**Legacy Native Modules** - To refer to Modules which are running on the old React Native architecture.
16
+
-**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**.
17
+
-**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**
18
+
19
+
## II. Flow Type to Native Type Mapping
11
20
12
21
You may use the following table as a reference for which types are supported and what they map to in each platform:
13
22
@@ -85,7 +94,7 @@ Callback functions are not type checked, and are generalized as `Object`s.
85
94
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.
86
95
:::
87
96
88
-
## II. TypeScript to Native Type Mapping
97
+
## III. TypeScript to Native Type Mapping
89
98
90
99
You may use the following table as a reference for which types are supported and what they map to in each platform:
91
100
@@ -105,7 +114,7 @@ You may use the following table as a reference for which types are supported and
105
114
106
115
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.
107
116
108
-
## III. Invoking the code-gen during development
117
+
## IV. Invoking the code-gen during development
109
118
110
119
> This section contains information specific to v0.66 of React Native.
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.
184
193
185
-
## IV. Note on Existing Apps
194
+
## V. Note on Existing Apps
186
195
187
196
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.
Copy file name to clipboardExpand all lines: docs/new-architecture-intro.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
9
9
10
10
# Getting Started with the New Architecture
11
11
12
-
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.
12
+
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.
13
13
14
14
## Table of Contents
15
15
@@ -23,7 +23,7 @@ The guide is divided into five sections:
23
23
-**Supporting the New Architecture in your App**
24
24
-[Prerequisites for Supporting the New Architecture in your App](new-architecture-app-intro)
25
25
- Android
26
-
-[Enabling the New NativeModule System (TurboModule) in your App](new-architecture-app-modules-android)
26
+
-[Enabling the New Native Module System (Turbo Module) in your App](new-architecture-app-modules-android)
27
27
-[Enabling the New Renderer (Fabric) in your App](new-architecture-app-renderer-android)
Copy file name to clipboardExpand all lines: docs/new-architecture-library-intro.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,7 @@ Currently, this guide is written under the assumption that you will be using [Fl
23
23
24
24
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.
25
25
26
-
#### Turbomodules
26
+
#### Turbo Native Modules
27
27
28
28
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`.
JavaScript spec files **must** be named `<FABRICCOMPONENT>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`.
76
76
@@ -214,7 +214,7 @@ Codegen can be configured in the `package.json` file of your Library. Add the fo
214
214
215
215
- The `codegenConfig` is the key used by the Codegen to verify that there is some code to generate.
216
216
- The `name` field is the name of the library.
217
-
- 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 TurboModule and Fabric Components.
217
+
- 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.
218
218
- The `jsSrcsDir` is the directory where the codegen will start looking for JavaScript specs.
219
219
- The `android.javaPackageName` is the name of the package where the generated code wil end up.
Copy file name to clipboardExpand all lines: docs/react-18-and-react-native.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ The concurrent features in React 18 are built on top of the new concurrent rende
31
31
32
32
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.
33
33
34
-
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.
34
+
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.
Native Module and Native Components are our stable technologies used by the legacy architecture.
3
-
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.
3
+
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.
0 commit comments