wip: migration guide review

Author: Riccardo Cipolleschi

docs/intro-react-native-components.md

@@ -1,7 +1,7 @@
 ---
 id: intro-react-native-components
-title: Core Components and Native Components
-description: 'React Native lets you compose app interfaces using Native Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!'
+title: Core Components and Fabric Components
+description: 'React Native lets you compose app interfaces using Fabric Components. Conveniently, it comes with a set of these components for you to get started with right now—the Core Components!'
 ---
 
 import ThemedImage from '@theme/ThemedImage';
@@ -17,13 +17,13 @@ In Android and iOS development, a **view** is the basic building block of UI: a
   <figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
 </figure>
 
-## Native Components
+## Fabric Components
 
-In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components **Native Components.**
+In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components **Fabric Components.** [_Fabric_](architecture/fabric-renderer) is the name of the React Native renderer, therefore components that are rendered via Fabric are called Fabric Components.
 
-React Native comes with a set of essential, ready-to-use Native Components you can use to start building your app today. These are React Native's **Core Components**.
+React Native comes with a set of essential, ready-to-use Fabric Components you can use to start building your app today. These are React Native's **Core Components**.
 
-React Native also lets you build your own Native Components for [Android](native-components-android.md) and [iOS](native-components-ios.md) to suit your app’s unique needs. We also have a thriving ecosystem of these **community-contributed components.** Check out [Native Directory](https://reactnative.directory) to find what the community has been creating.
+React Native also lets you build your own [Fabric Components](the-new-architecture/pillars-fabric-components) to suit your app’s unique needs. We also have a thriving ecosystem of these **community-contributed components.** Check out [Native Directory](https://reactnative.directory) to find what the community has been creating.
 
 ## Core Components
 

docs/introduction.md

@@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 <div className="content-banner">
   <p>
-    Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
+    Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Fabric Components, React, and more!
   </p>
   <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
@@ -136,4 +136,4 @@ Menu paths are written in bold and use carets to navigate submenus. Example: **A
 
 ---
 
-Now that you know how this guide works, it's time to get to know the foundation of React Native: [Native Components](intro-react-native-components.md).
+Now that you know how this guide works, it's time to get to know the foundation of React Native: [Fabric Components](the-new-architecture/pillars-fabric-components).

docs/more-resources.md

@@ -34,10 +34,10 @@ We recommend using the [VS Code](https://code.visualstudio.com/) code editor and
 
 Try out apps from the [Showcase](https://reactnative.dev/showcase) to see what React Native is capable of! Looking for something more hands on? Check out this [set of example apps on GitHub](https://github.com/ReactNativeNews/React-Native-Apps). You can look at their source code—try running one on a simulator or device.
 
-## Find, make, and share your own Native Components and Modules
+## Find, make, and share your own Fabric Components and Modules
 
-React Native has a community of thousands of developers like you making content, tools, tutorials—and Native Components!
+React Native has a community of thousands of developers like you making content, tools, tutorials—and Fabric Components!
 
 Can’t find what you’re looking for in the Core Components? Visit [React Native Directory](https://reactnative.directory) to find what the community has been creating.
 
-Interested in making your own Native Component or Module? Making modules for your own use case and sharing them with others on NPM and GitHub helps grow the React Native ecosystem and community! Read the guides to making your own Native Modules ([Android](native-modules-android.md), [iOS](native-modules-ios.md)) and Native Components ([Android](native-components-android.md), [iOS](native-components-ios.md)).
+Interested in making your own Fabric Component or TurboModule? Making modules for your own use case and sharing them with others on NPM and GitHub helps grow the React Native ecosystem and community! Read the guides to making your own [TurboModule](the-new-architecture/pillars-turbomodule.md) and [Fabric Component](the-new-architecture/pillars-fabric-components.md).

docs/native-modules-android.md

@@ -3,8 +3,11 @@ id: native-modules-android
 title: Android Native Modules
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
+<NativeDeprecated />
+
 Welcome to Native Modules for Android. Please start by reading the [Native Modules Intro](native-modules-intro) for an intro to what native modules are.
 
 ## Create a Calendar Native Module

docs/native-modules-intro.md

@@ -3,6 +3,10 @@ id: native-modules-intro
 title: Native Modules Intro
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
 Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript, for example the native APIs to access Apple or Google Pay. Maybe you want to reuse some existing Objective-C, Swift, Java or C++ libraries without having to reimplement it in JavaScript, or write some high performance, multi-threaded code for things like image processing.
 
 The NativeModule system exposes instances of Java/Objective-C/C++ (native) classes to JavaScript (JS) as JS objects, thereby allowing you to execute arbitrary native code from within JS. While we don't expect this feature to be part of the usual development process, it is essential that it exists. If React Native doesn't export a native API that your JS app needs you should be able to export it yourself!

docs/native-modules-ios.md

@@ -3,6 +3,10 @@ id: native-modules-ios
 title: iOS Native Modules
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
 Welcome to Native Modules for iOS. Please start by reading the [Native Modules Intro](native-modules-intro) for an intro to what native modules are.
 
 ## Create a Calendar Native Module

docs/native-modules-setup.md

@@ -3,6 +3,10 @@ id: native-modules-setup
 title: Native Modules NPM Package Setup
 ---
 
+import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecation.mdx'
+
+<NativeDeprecated />
+
 Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find [this guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) useful.
 
 To get set up with the basic project structure for a native module we will use the community tool called [create-react-native-library](https://github.com/callstack/react-native-builder-bob). You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic script:

docs/new-architecture-app-intro.md

@@ -7,40 +7,25 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
 
 <NewArchitectureWarning/>
 
-There’s a few prerequisites that should be addressed before the new architecture is enabled in your application.
+There’s a few prerequisites that should be addressed before the New Architecture is enabled in your application.
 
 ## Use a React Native nightly release
 
 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.
 
-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`.
+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`.
 
 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.
 
-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:
+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:
 
 ```bash
-yarn add react-native@0.0.0-20220201-2008-79975d146
+yarn add react-native@0.0.0-20220705-2052-71e89213a
 ```
 
-## Install react-native-codegen
-
-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`.
-
-```bash
-yarn add react-native-codegen
-```
-
-:::info
-
-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`.
-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.
-
-:::
-
 ### Android specifics
 
-Using the new architecture on Android has some prerequisites that you need to meet:
+Using the New Architecture on Android has some prerequisites that you need to meet:
 
 1. Using Gradle 7.x and Android Gradle Plugin 7.x
 2. Using the **new React Gradle Plugin**
@@ -54,18 +39,6 @@ cd android && ./gradlew wrapper --gradle-version 7.3 --distribution-type=all
 
 While the AGP version should be updated inside the **top level** `build.gradle` file at the `com.android.tools.build:gradle` dependency line.
 
-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:
-
-```bash
-yarn add react-native-gradle-plugin
-```
-
-You can control if you have the package already installed by doing:
-
-```bash
-ls -la node_modules/react-native-gradle-plugin
-```
-
 Now, you can edit your **top level** `settings.gradle` file to include the following line at the end of the file:
 
 ```groovy
@@ -82,7 +55,7 @@ buildscript {
     // ...
     dependencies {
         // Make sure that AGP is at least at version 7.x
-        classpath("com.android.tools.build:gradle:7.0.4")
+        classpath("com.android.tools.build:gradle:7.2.0")
 
         // Add those lines
         classpath("com.facebook.react:react-native-gradle-plugin")
@@ -119,40 +92,18 @@ dependencies {
 
 ## Use Hermes
 
-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.
+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.
 
-Please [follow the instructions on the React Native website](hermes) in order to enable Hermes in your application.
+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.
+
+Please [follow the instructions on the React Native website](hermes) to learn how to enable/disable Hermes.
 
 :::caution
 
 **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.
 
 :::
 
-## iOS: Enable C++17 language feature support
-
-Your Xcode project settings need to be updated to support C++17 language features.
-
-**Instructions**
-
-1. Select your project in the Project navigator on the left (e.g. MyXcodeApp)
-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).
-3. Go to Build Settings
-4. Search for C++ Language Dialect or CLANG_CXX_LANGUAGE_STANDARD
-5. Make sure **C++17** is selected from the dropdown menu (or enter "c++17" directly into the value box).
-
-If done correctly, your diff will show the following changes to your project file:
-
-```ruby
-CLANG_CXX_LANGUAGE_STANDARD = "c++17"
-```
-
-:::info
-
-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.
-
-:::
-
 ## 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.

docs/new-architecture-app-modules-android.md

@@ -18,7 +18,7 @@ You can mitigate this by following the approach described in [Speeding up your B
 
 :::
 
-The code-gen will output some Java and some C++ code that now we need to build.
+The Codegen will output some Java and some C++ code that now we need to build.
 
 Let’s edit your **module level** `build.gradle` to include the **two** `externalNativeBuild` blocks detailed below inside the `android{}` block:
 
@@ -37,10 +37,15 @@ android {
                         "GENERATED_SRC_DIR=$buildDir/generated/source",
                         "PROJECT_BUILD_DIR=$buildDir",
                         "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
-                        "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build"
+                        "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
+                        "NODE_MODULES_DIR=$rootDir/../node_modules"
                 cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
                 cppFlags "-std=c++17"
                 targets "myapplication_appmodules"
+                // Fix for windows limit on number of character in file paths and in command lines
+                if (Os.isFamily(Os.FAMILY_WINDOWS)) {
+                    arguments "NDK_APP_SHORT_COMMANDS=true"
+                }
             }
         }
     }

docs/new-architecture-app-renderer-ios.md

@@ -39,7 +39,7 @@ end
 
 ## 2. Update your root view
 
-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.
+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.
 
 ```objc title="AppDelegate.mm"
 #ifdef RN_FABRIC_ENABLED