Skip to content

Commit

Permalink
Merge branch 'main' into 0.76-release-blog
Browse files Browse the repository at this point in the history
  • Loading branch information
cipolleschi authored Oct 23, 2024
2 parents 68934a5 + 03ed6e3 commit 49f00fd
Show file tree
Hide file tree
Showing 65 changed files with 1,635 additions and 326 deletions.
11 changes: 11 additions & 0 deletions docs/_turbo-native-modules-components.jsx
Original file line number Diff line number Diff line change
@@ -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 />;
}
36 changes: 36 additions & 0 deletions docs/appendix.md
Original file line number Diff line number Diff line change
@@ -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.

- **Turbo 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.
- **Fabric 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.
:::
89 changes: 19 additions & 70 deletions docs/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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>

:::

Expand Down
10 changes: 10 additions & 0 deletions docs/fabric-native-modules-android.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
id: fabric-native-modules-android
title: 'Fabric Native Modules: Android'
---

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

:::caution
This is work-in-progress... 👷
:::
10 changes: 10 additions & 0 deletions docs/fabric-native-modules-ios.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
id: fabric-native-modules-ios
title: 'Fabric Native Modules: iOS'
---

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

:::caution
This is work-in-progress... 👷
:::
10 changes: 10 additions & 0 deletions docs/fabric-native-modules.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
id: fabric-native-modules-introduction
title: 'Fabric Native Modules'
---

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

:::caution
This is work-in-progress... 👷
:::
2 changes: 1 addition & 1 deletion docs/flexbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -2581,7 +2581,7 @@ The `position` type of an element defines how it is positioned relative to eithe

- `relative` (**default value**) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any sibling or parent elements.

- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will posistion the element relative to its containing block.
- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values. These values will position the element relative to its containing block.

- `static` When positioned statically, an element is positioned according to the normal flow of layout, and will ignore the `top`, `right`, `bottom`, and `left` values. This `position` will also cause the element to not form a containing block for absolute descendants, unless some other superceding style prop is present (e.g. `transform`). This allows `absolute` elements to be positioned to something that is not their parent. Note that **`static` is only available on the New Architecture**.

Expand Down
2 changes: 1 addition & 1 deletion docs/image.md
Original file line number Diff line number Diff line change
Expand Up @@ -589,7 +589,7 @@ Resolves an asset reference into an object which has the properties `uri`, `scal

### ImageCacheEnum <div class="label ios">iOS</div>

Enum which can be used to set the cache handling or stategy for the potentially cached responses.
Enum which can be used to set the cache handling or strategy for the potentially cached responses.

| Type | Default |
| ------------------------------------------------------------------ | ----------- |
Expand Down
2 changes: 1 addition & 1 deletion docs/linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -596,7 +596,7 @@ If the app launch was triggered by an app link, it will give the link url, other

> To support deep linking on Android, refer https://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
> getInitialURL may return `null` while debugging is enabled. Disable the debugger to ensure it gets passed.
> getInitialURL may return `null` when Remote JS Debugging is active. Disable the debugger to ensure it gets passed.
---

Expand Down
36 changes: 36 additions & 0 deletions docs/native-platforms.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
id: native-platform
title: Native Platform
---

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

Your application may need access to platform features that aren’t directly available from React Native or one of the hundreds of [third-party libraries](https://reactnative.directory/) maintained by the community. Maybe you want to reuse some existing Objective-C, Swift, Java, Kotlin or C++ code from the JavaScript runtime. Whatever your reason, React Native exposes a powerful set of API to connect your native code to your JavaScript application code.

This guide introduces:

- **Turbo 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 user as JavaScript functions and objects.
- **Fabric Native Component:** native platform views, widgets and controllers that are available to your application's JavaScript code through React Components.

:::note
You might have previously been familiar with:

- [Legacy Native Modules](./legacy/native-modules-intro);
- [Legacy Native Components](./legacy/native-components-android);

These are our deprecated native module and component API. You can still use many of these legacy libraries with the New Architecture thanks to our interop layers. You should consider:

- using alternative libraries,
- upgrading to newer library versions that have first-class support for the New Architecture, or
- port these libraries yourself to Turbo Native Modules or Fabric Native Components.

:::

1. Turbo Native Modules
- [Introduction](turbo-native-modules.md)
- [Android](turbo-native-modules-android.md)
- [iOS](turbo-native-modules-ios.md)
2. Fabric Native Components
- [Introduction](fabric-native-modules.md)
- [Android](fabric-native-modules-android.md)
- [iOS](fabric-native-modules-ios.md)
4 changes: 2 additions & 2 deletions docs/other-debugging-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: Other Debugging Methods

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

This page covers other JavaScript debugging methods besides what is described in [Opening the Debugger](./debugging#opening-the-debugger). If you are using a newly created React Native or Expo app, we recommend starting there.
This page covers how to use legacy JavaScript debugging methods. If you are getting started with a new React Native or Expo app, we recommend using [React Native DevTools](./react-native-devtools).

## Safari Developer Tools (direct JSC debugging)

Expand Down Expand Up @@ -60,7 +60,7 @@ The Console and Sources panels will allow you to inspect your React Native code.
![The remote debugger window in Chrome](/docs/assets/debugging-chrome-remote-debugger.jpg)

:::info
Under Remote JavaScript Debugging, the web version of React DevTools in Chrome will not work with React Native. See the [React DevTools](./react-devtools) guide to learn how to use the standalone version of React DevTools.
Under Remote JavaScript Debugging, the web version of React DevTools in Chrome will not work with React Native. See the [React Native DevTools](./react-native-devtools) guide to explore how to use React DevTools in our integrated debugger.
:::

:::note
Expand Down
Loading

0 comments on commit 49f00fd

Please sign in to comment.