Merge pull request #897 from facebook/main

sync

Author: sunnylqm

docs/_fabric-native-components.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import IOSContent from "./fabric-native-components-ios.md";
+import AndroidContent from "./fabric-native-components-android.md";
+
+export function FabricNativeComponentsIOS() {
+  return <IOSContent />;
+}
+
+export function FabricNativeComponentsAndroid() {
+  return <AndroidContent />;
+}

docs/_integration-with-existing-apps-kotlin.md

@@ -284,6 +284,7 @@ import android.app.Application;
 +import com.facebook.react.defaults.DefaultReactHost;
 +import com.facebook.react.defaults.DefaultReactNativeHost;
 +import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
 +import java.util.List;
 
 -class MainApplication extends Application {
@@ -312,7 +313,7 @@ import android.app.Application;
   @Override
   public void onCreate() {
     super.onCreate();
-+   SoLoader.init(this, false);
++   SoLoader.init(this, OpenSourceMergedSoMapping);
 +   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
 +     DefaultNewArchitectureEntryPoint.load();
 +   }

docs/_turbo-native-modules-components.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import IOSContent from "./turbo-native-modules-ios.md";
+import AndroidContent from "./turbo-native-modules-android.md";
+
+export function TurboNativeModulesIOS() {
+  return <IOSContent />;
+}
+
+export function TurboNativeModulesAndroid() {
+  return <AndroidContent />;
+}

docs/appendix.md

@@ -0,0 +1,36 @@
+# Appendix
+
+## I. Terminology
+
+- **Spec** - TypeScript or Flow code that describes the API for a Turbo Native Module or Fabric Native component. Used by **Codegen** to generate boilerplate code.
+
+- **Native Modules** - Native libraries that have no User Interface (UI) for the user. Examples would be persistent storage, notifications, network events. These are accessible to your JavaScript application code as functions and objects.
+- **Native Component** - Native platform views that are available to your application JavaScript code through React Components.
+
+- **Legacy Native Components** - Components which are running on the old React Native architecture.
+- **Legacy Native Modules** - Modules which are running on the old React Native architecture.
+
+## II. Codegen Typings
+
+You may use the following table as a reference for which types are supported and what they map to in each platform:
+
+| Flow                                                                       | TypeScript                                          | Flow Nullable Support                                   | TypeScript Nullable Support                          | Android (Java)                       | iOS (ObjC)                                                     |
+| -------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------- |
+| `string`                                                                   | `string`                                            | `?string`                                               | <code>string &#124; null</code>                      | `string`                             | `NSString`                                                     |
+| `boolean`                                                                  | `boolean`                                           | `?boolean`                                              | <code>boolean &#124; null</code>                     | `Boolean`                            | `NSNumber`                                                     |
+| Object Literal<br /><code>&#123;&#124; foo: string, ...&#124;&#125;</code> | <code>&#123; foo: string, ...&#125; as const</code> | <code>?&#123;&#124; foo: string, ...&#124;&#125;</code> | <code>?&#123; foo: string, ...&#125; as const</code> | \-                                   | \-                                                             |
+| Object [[1](#notes)]                                                       | Object [[1](#notes)]                                | `?Object`                                               | <code>Object &#124; null</code>                      | `ReadableMap`                        | `@` (untyped dictionary)                                       |
+| <code>Array&lt;T&gt;</code>                                                | <code>Array&lt;T&gt;</code>                         | <code>?Array&lt;T&gt;</code>                            | <code>Array&lt;T&gt; &#124; null</code>              | `ReadableArray`                      | `NSArray` (or `RCTConvertVecToArray` when used inside objects) |
+| `Function`                                                                 | `Function`                                          | `?Function`                                             | <code>Function &#124; null</code>                    | \-                                   | \-                                                             |
+| <code>Promise&lt;T&gt;</code>                                              | <code>Promise&lt;T&gt;</code>                       | <code>?Promise&lt;T&gt;</code>                          | <code>Promise&lt;T&gt; &#124; null</code>            | `com.facebook.react.bridge.Promise`  | `RCTPromiseResolve` and `RCTPromiseRejectBlock`                |
+| Type Unions<br /><code>'SUCCESS'&#124;'FAIL'</code>                        | Type Unions<br /><code>'SUCCESS'&#124;'FAIL'</code> | Only as callbacks                                       |                                                      | \-                                   | \-                                                             |
+| Callbacks<br />`() =>`                                                     | Callbacks<br />`() =>`                              | Yes                                                     |                                                      | `com.facebook.react.bridge.Callback` | `RCTResponseSenderBlock`                                       |
+| `number`                                                                   | `number`                                            | No                                                      |                                                      | `double`                             | `NSNumber`                                                     |
+
+### Notes:
+
+<b>[1]</b> We strongly recommend using Object literals instead of Objects.
+
+:::info
+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.
+:::

docs/debugging.md

@@ -5,7 +5,7 @@ title: Debugging Basics
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
-## Accessing the Dev Menu
+## Opening the Dev Menu
 
 React Native provides an in-app developer menu which offers several debugging options. You can access the Dev Menu by shaking your device or via keyboard shortcuts:
 
@@ -14,97 +14,46 @@ React Native provides an in-app developer menu which offers several debugging op
 
 Alternatively for Android devices and emulators, you can run `adb shell input keyevent 82` in your terminal.
 
-![The React Native Dev Menu](/docs/assets/debugging-dev-menu.jpg)
+![The React Native Dev Menu](/docs/assets/debugging-dev-menu-076.jpg)
 
 :::note
 The Dev Menu is disabled in release (production) builds.
 :::
 
-## Opening the Debugger
+## Opening DevTools
 
-The debugger allows you to understand and debug how your JavaScript code is running, similar to a web browser.
+[React Native DevTools](./react-native-devtools) is our built-in debugger for React Native. It allows you to inspect and understand how your JavaScript code is running, similar to a web browser.
 
-:::info
-**In Expo projects**, press <kbd>j</kbd> in the CLI to directly open the Hermes Debugger.
-:::
-
-<Tabs groupId="js-debugger" queryString defaultValue={constants.defaultJsDebugger} values={constants.jsDebuggers}>
-<TabItem value="hermes">
-
-Hermes supports the Chrome debugger by implementing the Chrome DevTools Protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a physical device.
-
-1. In a Chrome browser window, navigate to `chrome://inspect`.
-2. Use the "Configure..." button to add the dev server address (typically `localhost:8081`).
-3. You should now see a "Hermes React Native" target with an **"inspect"** link. Click this to open the debugger.
-
-![Overview of Chrome's inspect interface and a connected Hermes debugger window](/docs/assets/debugging-hermes-debugger-instructions.jpg)
-
-</TabItem>
-<TabItem value="flipper">
-
-[Flipper](https://fbflipper.com/) is a native debugging tool which provides JavaScript debugging capabilities for React Native via an embedded Chrome DevTools panel.
-
-To debug JavaScript code in Flipper, select **"Open Debugger"** from the Dev Menu. Learn more about Flipper [here](https://fbflipper.com/docs/features/react-native/).
-
-:::info
-To debug using Flipper, the Flipper app must be [installed on your system](https://fbflipper.com/docs/getting-started/).
-:::
-
-![The Flipper desktop app opened to the Hermes debugger panel](/docs/assets/debugging-flipper-console.jpg)
+To open DevTools, either:
 
-:::warning
-Debugging React Native apps with Flipper is [deprecated in React Native 0.73](https://github.com/react-native-community/discussions-and-proposals/pull/641). We will eventually remove out-of-the box support for JS debugging via Flipper.
-:::
-
-:::tip
+- Select "Open DevTools" in the Dev Menu.
+- Press <kbd>j</kbd> from the CLI (`npx react-native start`).
 
-#### Alternative debugging tools
+On first launch, DevTools will open to a welcome panel, along with an open console drawer where you can view logs and interact with the JavaScript runtime. From the top of the window, you can navigate to other panels, including the integrated React Components Inspector and Profiler.
 
-As React Native transitions away from Flipper, we recommend other existing methods, including first party IDEs, to inspect your application's native code and behaviour.
+![React Native DevTools opened to the "Welcome" pane](/docs/assets/debugging-rndt-welcome.jpg)
 
-- [Debugging Native Code](./debugging-native-code)
-- <a href="https://shift.infinite.red/why-you-dont-need-flipper-in-your-react-native-app-and-how-to-get-by-without-it-3af461955109" target="_blank">Why you don’t need Flipper in your React Native app … and how to get by without it ↗</a>
-
-:::
+React Native DevTools is powered by a dedicated debugging architecture built into React Native and uses a customized build of the [Chrome DevTools](https://developer.chrome.com/docs/devtools) frontend. This enables us to offer familiar, browser-aligned debugging features that are deeply integrated and built for end-to-end reliability.
 
-</TabItem>
-<TabItem value="new-debugger">
+Learn more in our [React Native DevTools guide](./react-native-devtools).
 
 :::note
-**This is an experimental feature** and several features may not work reliably today. When this feature does launch in future, we intend for it to work more completely than the current debugging methods.
+React Native DevTools is only available with the Hermes engine, and requires either Google Chrome or Microsoft Edge installed.
 :::
 
-The React Native team is working on a new JavaScript debugger experience, intended to replace Flipper, with a preview available as of React Native 0.73.
-
-The new debugger can be enabled via React Native CLI. This will also enable <kbd>j</kbd> to debug.
-
-```sh
-npx react-native start --experimental-debugger
-```
-
-When selecting **"Open Debugger"** in the Dev Menu, this will launch the new debugger using Google Chrome or Microsoft Edge.
-
-![The new debugger frontend opened to the "Welcome" pane](/docs/assets/debugging-debugger-welcome.jpg)
-
-</TabItem>
-</Tabs>
-
-## React DevTools
+:::info
 
-You can use React DevTools to inspect the React element tree, props, and state.
+#### Flipper and alternative debugging tools
 
-```sh
-npx react-devtools
-```
+React Native DevTools replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends. If you are on an older version of React Native, please go to the docs [for your version](/versions).
 
-![A React DevTools window](/docs/assets/debugging-react-devtools-blank.jpg)
+We continue to offer legacy debugging methods such as Direct JSC Debugging and Remote JS Debugging (deprecated) (see [Other Debugging Methods](./other-debugging-methods)).
 
-:::tip
+React Native DevTools is designed for debugging React app concerns, and not to replace native tools. If you want to inspect React Native’s underlying platform layers (for example, while developing a Native Module), please use the debugging tools available in Xcode and Android Studio (see [Debugging Native Code](http://localhost:3000/docs/next/debugging-native-code)).
 
-#### Learn how to use React DevTools!
+Other useful links:
 
-- [React DevTools guide](./react-devtools)
-- [React Developer Tools on react.dev](https://react.dev/learn/react-developer-tools)
+- <a href="https://shift.infinite.red/why-you-dont-need-flipper-in-your-react-native-app-and-how-to-get-by-without-it-3af461955109" target="_blank">Why you don’t need Flipper in your React Native app … and how to get by without&nbsp;it&nbsp;↗</a>
 
 :::