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
+10-59Lines changed: 10 additions & 59 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,40 +7,25 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
7
7
8
8
<NewArchitectureWarning/>
9
9
10
-
There’s a few prerequisites that should be addressed before the new architecture is enabled in your application.
10
+
There’s a few prerequisites that should be addressed before the New Architecture is enabled in your application.
11
11
12
12
## Use a React Native nightly release
13
13
14
14
At this time, you must use a React Native nightly release in order to get access to the most up to date changes. Eventually, we will recommend targeting a minimum stable open source release.
15
15
16
-
This guide is written with the expectation that you’re using a specific nightly release. As new revisions of this guide are released, the target nightly release may be updated. The specific nightly version that we will be using throughout the rest of this guide is version `0.0.0-20220201-2008-79975d146`.
16
+
This guide is written with the expectation that you’re using a specific nightly release. As new revisions of this guide are released, the target nightly release may be updated. The specific nightly version that we will be using throughout the rest of this guide is version `0.0.0-20220705-2052-71e89213a`.
17
17
18
18
Before upgrading your app to a specific nightly release, we recommend upgrading your app to the latest open source release. By upgrading to a published open source release first, you will be able to take advantage of tools like the [upgrade helper](https://react-native-community.github.io/upgrade-helper/) to determine what other changes may be required for your project.
19
19
20
-
As of this writing, the latest stable release is `0.67.2`. Once you have upgraded your project to this version successfully, you may proceed to targeting the `0.0.0-20220201-2008-79975d146` nightly release. You may target this nightly release the same way you’d target any other version of React Native:
20
+
As of this writing, the latest stable release is `0.69.1`. Once you have upgraded your project to this version successfully, you may proceed to targeting the `0.0.0-20220705-2052-71e89213a` nightly release. You may target this nightly release the same way you’d target any other version of React Native:
Make sure that you're using the latest version of the [`react-native-codegen`](https://www.npmjs.com/package/react-native-codegen) NPM package. At the time of writing it's `0.0.13`.
29
-
30
-
```bash
31
-
yarn add react-native-codegen
32
-
```
33
-
34
-
:::info
35
-
36
-
If you see an error like `***TypeError: RNCodegen.generateFromSchemas is not a function.***`, it means that you're using a older version of `react-native-codegen`.
37
-
Make sure you don't have an older version installed under the `node_modules/react-native/node_modules` folder. You can remove that or reinstall everything in node_modules to fix the problem.
38
-
39
-
:::
40
-
41
26
### Android specifics
42
27
43
-
Using the new architecture on Android has some prerequisites that you need to meet:
28
+
Using the New Architecture on Android has some prerequisites that you need to meet:
While the AGP version should be updated inside the **top level**`build.gradle` file at the `com.android.tools.build:gradle` dependency line.
56
41
57
-
If you’re set with it, let’s now install the new Gradle plugin which is distributed through a NPM package called [**`react-native-gradle-plugin`**](https://www.npmjs.com/package/react-native-gradle-plugin). You can do so with:
58
-
59
-
```bash
60
-
yarn add react-native-gradle-plugin
61
-
```
62
-
63
-
You can control if you have the package already installed by doing:
64
-
65
-
```bash
66
-
ls -la node_modules/react-native-gradle-plugin
67
-
```
68
-
69
42
Now, you can edit your **top level**`settings.gradle` file to include the following line at the end of the file:
Hermes is an open-source JavaScript engine optimized for React Native. We highly recommend using Hermes in your application. With Hermes enabled, you will be able to use the JavaScript debugger in Flipper to directly debug your JavaScript code.
95
+
Hermes is an open-source JavaScript engine optimized for React Native. Hermes is enabled by default and you have to explicitly disable it if you want to use JSC.
123
96
124
-
Please [follow the instructions on the React Native website](hermes) in order to enable Hermes in your application.
97
+
We highly recommend using Hermes in your application. With Hermes enabled, you will be able to use the JavaScript debugger in Flipper to directly debug your JavaScript code.
98
+
99
+
Please [follow the instructions on the React Native website](hermes) to learn how to enable/disable Hermes.
125
100
126
101
:::caution
127
102
128
103
**iOS:** If you opt out of using Hermes, you will need to replace `HermesExecutorFactory` with `JSCExecutorFactory` in any examples used throughout the rest of this guide.
129
104
130
105
:::
131
106
132
-
## iOS: Enable C++17 language feature support
133
-
134
-
Your Xcode project settings need to be updated to support C++17 language features.
135
-
136
-
**Instructions**
137
-
138
-
1. Select your project in the Project navigator on the left (e.g. MyXcodeApp)
139
-
2. Then, make sure your project is selected in the center pane (as opposed to a particular target in your project, e.g. MyXcodeApp under Project, not under Targets).
140
-
3. Go to Build Settings
141
-
4. Search for C++ Language Dialect or CLANG_CXX_LANGUAGE_STANDARD
142
-
5. Make sure **C++17** is selected from the dropdown menu (or enter "c++17" directly into the value box).
143
-
144
-
If done correctly, your diff will show the following changes to your project file:
145
-
146
-
```ruby
147
-
CLANG_CXX_LANGUAGE_STANDARD="c++17"
148
-
```
149
-
150
-
:::info
151
-
152
-
Your project should also be configured to support Folly. This should be done automatically once the library dependency is picked up, so no further changes to your project are necessary.
153
-
154
-
:::
155
-
156
107
## iOS: Use Objective-C++ (`.mm` extension)
157
108
158
109
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.
Copy file name to clipboardExpand all lines: docs/new-architecture-app-renderer-ios.md
+1-15Lines changed: 1 addition & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,7 @@ end
39
39
40
40
## 2. Update your root view
41
41
42
-
The way to render your app with Fabric depends on your setup. Here is an example of how you can enable Fabric in your app with the `RN_FABRIC_ENABLED` compiler flag to enable/disable. Refer [RN-Tester’s AppDelegate](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/AppDelegate.mm) as an example.
42
+
How to render your app with Fabric depends on your setup. Here is an example of how you can enable Fabric in your app with the `RN_FABRIC_ENABLED` compiler flag to enable/disable. Refer [RN-Tester’s AppDelegate](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/AppDelegate.mm) as an example.
43
43
44
44
```objc title="AppDelegate.mm"
45
45
#ifdef RN_FABRIC_ENABLED
@@ -83,20 +83,6 @@ The way to render your app with Fabric depends on your setup. Here is an example
83
83
#endif
84
84
```
85
85
86
-
## 3. Add Babel Plugins
87
-
88
-
This will trigger the codegen that will run at the metro building time.
Copy file name to clipboardExpand all lines: docs/new-architecture-appendix.md
+26-6Lines changed: 26 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,11 +27,31 @@ You may use the following table as a reference for which types are supported and
27
27
28
28
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.
29
29
30
-
## II. Invoking the code-gen during development
30
+
## II. TypeScript to Native Type Mapping
31
+
32
+
You may use the following table as a reference for which types are supported and what they map to in each platform:
|`Float`, `Double`, or `Int32`| No |`double`|`NSNumber`||
39
+
| <code>{| foo: string, ... |}</code> | <code>{| foo: string, ...|} | null</code> ||| Object literal. This is recommended over simply using Object, for type safety. |
40
+
|`Object`| <code>Object | null </code> |`ReadableMap`|`@{} (untyped dictionary)`| Recommended to use object literal (see above). |
41
+
|`Array<*>`| <code>Array<\*> | null </code> |`ReadableArray`|`NSArray` (or `RCTConvertVecToArray` when used inside objects) ||
|`Promise<*>`| <code>Promise<\*> | null </code> |`com.facebook.react.bridge.Promise`|`RCTPromiseResolve` and `RCTPromiseRejectBlock`||
44
+
| Type aliases of the above | Yes ||||
45
+
| Type Unions <code>'SUCCESS'|'FAIL'</code> | Only as callbacks. ||| Type unions only supported as callbacks. |
46
+
| Callbacks: `( ) =>`| Yes |`com.facebook.react.bridge.Callback`|`RCTResponseSenderBlock`| Callback functions are not type checked, and are generalized as Objects. |
47
+
48
+
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.
49
+
50
+
## III. Invoking the code-gen during development
31
51
32
52
> This section contains information specific to v0.66 of React Native.
33
53
34
-
The code-gen is typically invoked at build time, but you may find it useful to generate your native interface code on demand for troubleshooting.
54
+
The Codegen is typically invoked at build time, but you may find it useful to generate your native interface code on demand for troubleshooting.
35
55
36
56
If you wish to invoke the codegen manually, you have two options:
37
57
@@ -40,7 +60,7 @@ If you wish to invoke the codegen manually, you have two options:
40
60
41
61
### Invoking a Gradle task directly
42
62
43
-
You can trigger the code-gen by invoking the following task:
63
+
You can trigger the Codegen by invoking the following task:
> **NOTE:** The output artifacts of the code-gen are inside the build folder and should not be committed.
105
+
> **NOTE:** The output artifacts of the Codegen are inside the build folder and should not be committed.
86
106
> They should be considered only for reference.
87
107
88
108
##### Example
89
109
90
-
The following is a basic example of invoking the code-gen script to generate native iOS interface code for a library that provides native modules. The JavaScript spec sources for this library are located in a `js/` subdirectory, and this library’s native code expects the native interfaces to be available in the `ios` subdirectory.
110
+
The following is a basic example of invoking the Codegen script to generate native iOS interface code for a library that provides native modules. The JavaScript spec sources for this library are located in a `js/` subdirectory, and this library’s native code expects the native interfaces to be available in the `ios` subdirectory.
91
111
92
112
```bash
93
113
# Generate schema - only needs to be done whenever JS specs change
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.
106
126
107
-
## III. Note on Existing Apps
127
+
## IV. Note on Existing Apps
108
128
109
129
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.
0 commit comments