wip: migration guide review

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,7 +34,7 @@ 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 Native Components and TurboModules
 
 React Native has a community of thousands of developers like you making content, tools, tutorials—and Native Components!
 

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,29 @@ 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
+## Use a React Native >= 0.68 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.
+React Native released the support for the New Architecture with the release `0.68.0`.
 
-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 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.
 
-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:
+To update to the most recent version of React Native, you can run this command
 
 ```bash
-yarn add react-native@0.0.0-20220201-2008-79975d146
+yarn add react-native@0.70.0
 ```
 
-## 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`.
+Starting from React Native `0.69.0`, you may also need to update the version of React to 18. You can do so by using this command:
 
 ```bash
-yarn add react-native-codegen
+yarn add react@18.0.0
 ```
 
-:::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**
@@ -49,30 +38,20 @@ Using the new architecture on Android has some prerequisites that you need to me
 You can update Gradle by running:
 
 ```bash
-cd android && ./gradlew wrapper --gradle-version 7.3 --distribution-type=all
+cd android && ./gradlew wrapper --gradle-version 7.3.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
 includeBuild('../node_modules/react-native-gradle-plugin')
 
 include(":ReactAndroid")
 project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
+include(":ReactAndroid:hermes-engine")
+project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
 ```
 
 Then, edit your **top-level Gradle file** to include the highlighted lines:
@@ -82,7 +61,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")
@@ -93,65 +72,93 @@ buildscript {
 
 Edit your **module-level** **Gradle file** (usually `app/build.gradle[.kts]`) to include the following:
 
-```groovy
+```diff
+// ...
+
 apply plugin: "com.android.application"
 
-// Add those lines
-apply plugin: "com.facebook.react"
-// Add those lines as well
-react {
-    reactRoot = rootProject.file("../node_modules/react-native/")
-    codegenDir = rootProject.file("../node_modules/react-native-codegen/")
-}
+// ...
+
+if (enableHermes) {
+-    def hermesPath = "../../node_modules/hermes-engine/android/";
+-    debugImplementation files(hermesPath + "hermes-debug.aar")
+-    releaseImplementation files(hermesPath + "hermes-release.aar")
++    //noinspection GradleDynamicVersion
++    implementation("com.facebook.react:hermes-engine:+") { // From node_modules
++        exclude group:'com.facebook.fbjni'
++    }
+} else {
+
+// ...
+
++ configurations.all {
++     resolutionStrategy.dependencySubstitution {
++         substitute(module("com.facebook.react:react-native"))
++                 .using(project(":ReactAndroid"))
++                 .because("On New Architecture we're building React Native from source")
++         substitute(module("com.facebook.react:hermes-engine"))
++                .using(project(":ReactAndroid:hermes-engine"))
++                .because("On New Architecture we're building Hermes from source")
++     }
++ }
+
+// Run this once to be able to run the application with BUCK
+// puts all compile dependencies into folder libs for BUCK to use
+task copyDownloadableDepsToLibs(type: Copy) {
 ```
 
 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.
 
 Let’s edit your **module level** `build.gradle` (the one inside `app/` folder) and change the following line:
 
-```groovy
+```diff
 dependencies {
-  // Replace this:
-  implementation "com.facebook.react:react-native:+"  // From node_modules
-  // With this:
-  implementation project(":ReactAndroid")  // From node_modules
+-  implementation "com.facebook.react:react-native:+"  // From node_modules
++  implementation project(":ReactAndroid")  // From node_modules
 ```
 
 ## 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.
+
+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) in order to enable Hermes in your application.
+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
+## iOS: Make the project build
 
-Your Xcode project settings need to be updated to support C++17 language features.
+After upgrading the project, there are a few changes you need to apply:
 
-**Instructions**
+1. Fix an API change in the `AppDelegate.m`. Open this file and apply this change:
 
-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).
+```diff
+#if DEBUG
+-       return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
++       return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
+#else
+```
 
-If done correctly, your diff will show the following changes to your project file:
+2. Target the proper iOS version. Open the `Podfile` and apply this change:
 
-```ruby
-CLANG_CXX_LANGUAGE_STANDARD = "c++17"
+```diff
+- platform :ios, '11.0'
++ platform :ios, '12.4'
 ```
 
-:::info
+3. Create an `.xcode.env` file to export the locaion of the NODE_BINARY. Navigate to the `ios` folder and run this command:
 
-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.
+```sh
+echo 'export NODE_BINARY=$(command -v node)' > .xcode.env
+```
 
-:::
+If you need it, you can also open the file and replace the `$(command -v node)` with the path to the node executable.
+React Native supports also a local version of this file `.xcode.env.local` which is not synced with the repository, if your local setup is different from the Continuous Integration or team one.
 
 ## iOS: Use Objective-C++ (`.mm` extension)
 
@@ -201,14 +208,3 @@ You can implement the `jsExecutorFactoryForBridge:` method like this:
   );
 }
 ```
-
-## iOS: Setup Folly
-
-The previous step will incorporate in your iOS app a dependency called Folly. Folly requires some extra compiler flags to works properly. To set them up, follow these steps:
-
-1. In the **Project Navigator** (`cmd+1`), select your app project.
-1. In the **Targets** section, select the target with the name of your app.
-1. Select the **Build Settings** tab
-1. Search for **Other C++ Flags**
-1. Update the **Debug** configuration, adding following flags: `-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1`
-1. Update the **Release** configuration with the following flags: `-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1`

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"
+                }
             }
         }
     }