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
The New Architecture section editorial review (facebook#3288)
* [Do Not Merge] Refactoring The New Architecture (facebook#3029)
* [Guide - The New Architecture] What Backward Compatibility Is (facebook#3038)
* Guide to creating a New Architecture app from template (facebook#3056)
* Start new template guide
This is a first iteration. I want to get feedback on a few aspects, so
starting from here as a baseline.
* Update title
* Use tabs for target OS
Set up matching the style of "Getting Started", except I kept the
headers inside the tabs for now as it makes for a useful right-hand TOC.
* Capitalize New Architecture, simplify
* Preliminary section for Hermes
Add section for recommending enabling Hermes. Not sure of contents yet,
and still have to test.
* Reword to emphasize importance of Hermes usage
* Show new arch in use
* Add build speed article link
* Add pro tip for pod install alias
* Restructure, repeat less
Favor linking to original setup guide instead of repeating content.
* Note about Expo
* Include command on uninstalling global CLI
* How to learn more
* Remove headers in tabs
They don't work correctly with the righthand TOC.
* Make header more clear
* Use quote block less often
There was way too much yellow.
* Opt for instructions using XCode
Because `xcodebuild clean` already failed me once when XCode GUI clean
worked.
* Fix lint issue
* Improve wording
* Use product name
* Fix line wraps
* Reword based on feedback
* Note use of bundle install
* Pod removal instructions
Also standardize on using yarn scripts from template for commands, it's
a little confusing to see the mix of `npx` and `yarn` once we start
referring to `yarn pod-install`
* Convert quotes to admonitions
* Convert Note: to admonitions
* Feedback: Change admonitions to caution
* PR feedback
* New Architecture landing page (facebook#3072)
* First draft of landing page
* Add migration and backwards compatibility links
* lint fix
* Restructure slightly, leaning more on context from Why a New Architecture
* Don't need md in links
* Suggested rewording
* Rephrase pillar summaries
* [Guide - The New Architecture] Why A New Architecture (facebook#3043)
* [Guide - The New Architecture] Pillars (facebook#3046)
* [Guide - The New Architecture] TurboModules as Native Modules (facebook#3039)
* [Guide - The New Architecture] Fabric Components as Native Components (facebook#3040)
* [FEAT][TNA] Fabric Component Guide (facebook#3132)
* [Feat] Add intro for Fabric Components
* feat: add guide to create a Fabric Component
* Add page on codegen (facebook#3155)
* [FEAT] TurboModules guide (facebook#3168)
* [Feat] Add intro for Fabric Components
* feat: add guide to create a Fabric Component
* Beginning of guide/folder structure
* WIP JS Spec
* specification section
* Configuration
* native code intro
* Must be named Spec
* Best stab at iOS native code, but I don't know how to describe what's going on in the code very well. Extrapolated what I could.
* Android instructions
iOS isn't working for me. Builds, but can't load module.
Writing up Android auto-linking next because the steps I tested did
work.
* Include linking instructions from RNNArch repo
* Add example JavaScript
* native modules link
* Address quick feedback items
* Remove, fix for rebased branch
* fix TM parameter on Android
* Revert to 'Codegen' casing
* Revert folly version change
2021.07.22 is for current version on main
* fix typo
* getTurboModule explainer
* Sentence edits
- Fix acronym bolding
- Change wording to "recommended" because "standard" has other
connotations of possibly being required
- Parentheses unnecessary, distracting
* Remove TODO for now
Getting inconsistent results here, not sure if this is wrong or not;
removing TODO for now so it doesn't block anything
* ABI rephrase, more in line with new Fabric guide wording
* Explain shared C++ code more
* feat: add guide to create a Fabric Component
* feat: add guide to create a Fabric Component
* package.json description
* Lint fixes
* fix: Move JS constants to reduce changes
* fix: Remove newline
* feat: add required step for Android Codegen
* fix: use the proper links
Co-authored-by: Riccardo Cipolleschi <[email protected]>
* wip: migration guide review (facebook#3200)
* Fix for some typos and other editorial related changes
* Update docs/the-new-architecture/pillars-fabric-components.md
correcting the article
Co-authored-by: Riccardo <[email protected]>
* Update pillars-fabric-components.md
Co-authored-by: Riccardo <[email protected]>
Co-authored-by: Lizzi Lindboe <[email protected]>
Co-authored-by: Riccardo <[email protected]>
Copy file name to clipboardExpand all lines: docs/new-architecture-app-intro.md
+10-10Lines changed: 10 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -9,11 +9,11 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
9
9
10
10
There are a few prerequisites that should be addressed before the New Architecture is enabled in your application.
11
11
12
-
## Use a React Native >= 0.68 release
12
+
## Use a React Native >= 0.68 Release
13
13
14
14
React Native released the support for the New Architecture with the release `0.68.0`.
15
15
16
-
This guide is written with the expectation that you’re using the latest React Native release. At the moment of writing, this is `0.70.0`. Other than this guide, you can leverage the [upgrade helper](https://react-native-community.github.io/upgrade-helper/) to determine what other changes may be required for your project.
16
+
This guide is written with the expectation that you’re using the latest React Native release. At the moment of writing, this is `0.70.0`. Besides this guide, you can leverage the [upgrade helper](https://react-native-community.github.io/upgrade-helper/) to determine what other changes may be required for your project.
17
17
18
18
To update to the most recent version of React Native, you can run this command:
19
19
@@ -27,7 +27,7 @@ Starting from React Native `0.69.0`, you may also need to update the version of
Finally, it’s time to update your project to use the `react-native` dependency from source, rather than using a precompiled artifact from the NPM package. This is needed as the later setup will rely on building the native code from source.
142
+
Finally, it’s time to update your project to use the `react-native` dependency from the source rather than using a precompiled artifact from the NPM package. This is needed as the later setup will rely on building the native code from the source.
143
143
144
-
Let’s edit your **module-level**`build.gradle` (the one inside `app/` folder) and change the following line:
144
+
Let’s edit your **module-level**`build.gradle` (the one inside the `app/` folder) and change the following line:
145
145
146
146
```diff
147
147
dependencies {
@@ -151,15 +151,15 @@ dependencies {
151
151
152
152
## Use Hermes
153
153
154
-
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.
154
+
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.
155
155
156
156
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.
157
157
158
158
Please [follow the instructions on the React Native website](hermes) to learn how to enable/disable Hermes.
159
159
160
160
:::caution
161
161
162
-
**iOS:** If you optout of using Hermes, you will need to replace `HermesExecutorFactory` with `JSCExecutorFactory` in any examples used throughout the rest of this guide.
162
+
**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.
163
163
164
164
:::
165
165
@@ -201,7 +201,7 @@ cd android
201
201
./gradlew clean
202
202
```
203
203
204
-
## iOS: Make the project build
204
+
## iOS: Build the Project
205
205
206
206
After upgrading the project, there are a few changes you need to apply:
If you need it, you can also open the file and replace the `$(command -v node)` with the path to the node executable.
231
-
React Native supports also a local version of this file `.xcode.env.local`. This file is not synced with the repository to let you customize your local setup, if it differs from the Continuous Integration or the team one.
231
+
React Native also supports a local version of this file `.xcode.env.local`. This file is not synced with the repository to let you customize your local setup, if it differs from the Continuous Integration or the team one.
232
232
233
233
## iOS: Use Objective-C++ (`.mm` extension)
234
234
@@ -261,7 +261,7 @@ Then, declare your app delegate as a `RCTCxxBridgeDelegate` provider:
261
261
@end
262
262
```
263
263
264
-
To conform to the `RCTCxxBridgeDelegate` protocol, you will need to implement the `jsExecutorFactoryForBridge:` method. Typically, this is where you would return a `JSCExecutorFactory` or `HermesExecutorFactory`, and we will use it to install our TurboModules bindings later on.
264
+
To conform to the `RCTCxxBridgeDelegate` protocol, you must implement the `jsExecutorFactoryForBridge:` method. Typically, this is where you would return a `JSCExecutorFactory` or `HermesExecutorFactory`, and we will use it to install our TurboModules bindings later on.
265
265
266
266
You can implement the `jsExecutorFactoryForBridge:` method like this:
Copy file name to clipboardExpand all lines: docs/new-architecture-library-android.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,11 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
7
7
8
8
<NewArchitectureWarning/>
9
9
10
-
Once you have defined the JavaScript specs for your native modules as part of the [prerequisites](new-architecture-library-intro), setup the configuration of the Codegen, and followed the Android/Gradle setup, you are now ready to migrate your library to the new architecture. Here are the steps you can follow to accomplish this.
10
+
Once you have defined the JavaScript specs for your native modules as part of the [prerequisites](new-architecture-library-intro), set up the configuration of the Codegen, and follow the Android/Gradle setup, you are now ready to migrate your library to the new architecture. Here are the steps you can follow to accomplish this.
11
11
12
-
## 1. Extend or implement the code-generated native interfaces
12
+
## 1. Extend or Implement the Code-generated Native Interfaces
13
13
14
-
The JavaScript spec for your native module or component will be used to generate native interface code for each supported platform (i.e. Android and iOS). These native interface files will be generated **when a React Native application that depends on your library is built**.
14
+
The JavaScript spec for your native module or component will be used to generate native interface code for each supported platform (i.e., Android and iOS). These native interface files will be generated **when a React Native application that depends on your library is built**.
15
15
16
16
While this generated native interface code **will not ship as part of your library**, you do need to make sure your Java/Kotlin code conforms to the protocols provided by these native interface files.
17
17
@@ -23,7 +23,7 @@ You can invoke the `generateCodegenArtifactsFromSchema` Gradle task to generate
23
23
24
24
The files that are output can be found inside `build/generated/source/codegen` and **should not be committed**, but you’ll need to refer to them to determine what changes you need to make to your native modules in order for them to provide an implementation for each generated interface.
25
25
26
-
The output of the codegen for a module called `NativeAwesomeManager` will look like this:
26
+
The output of the Codegen for a module called `NativeAwesomeManager` will look like this:
### Extends the abstract class provided by the codegen
54
+
### Extends the Abstract Class Provided by the Codegen
55
55
56
-
Update your native module or component to ensure it **extends the abstract class** that has been code-generated from your JavaScript specs (i.e. the `NativeAwesomeManagerSpec.java` file from the previous example).
56
+
Update your native module or component to ensure it **extends the abstract class** that has been code-generated from your JavaScript specs (i.e., the `NativeAwesomeManagerSpec.java` file from the previous example).
57
57
58
58
Following the example set forth in the previous section, your library might import `NativeAwesomeManagerSpec`, implement the relevant native interface and the necessary methods for it:
59
59
@@ -115,4 +115,4 @@ class NativeAwesomeManager(reactContext: ReactApplicationContext) :
115
115
</TabItem>
116
116
</Tabs>
117
117
118
-
Please note that the **generated abstract class** that you’re now extending (`MyAwesomeSpec` in this example), is itself extending `ReactContextBaseJavaModule`. Therefore you should not use access to any of the method/fields you were previously using (e.g. the `ReactApplicationContext` and so on). Moreover the generated class will now also implement the `TurboModule` interface for you.
118
+
Please note that the **generated abstract class** that you’re now extending (`MyAwesomeSpec` in this example) is itself extending `ReactContextBaseJavaModule`. Therefore you should not use access to any of the method/fields you were previously using (e.g., the `ReactApplicationContext` and so on). Moreover, the generated class will now also implement the `TurboModule` interface for you.
0 commit comments