Skip to content

Ship DOM APIs to stable #53360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 1 commit into from
Closed

Ship DOM APIs to stable #53360

wants to merge 1 commit into from

Conversation

@rubennorte
Copy link
Contributor

Summary:
Changelog: [General][Breaking] - Enable DOM APIs in host component refs

This ships DOM APIs to stable now that we have a cohesive API and it's been stable at Meta for a while.

This changes the HostInstance type (exported from the react-native package and used by all host components) from being an interface to being a class (ReactNativeElement).

The API is backwards compatible but given we're changing the definition of HostInstance from an interface to a class, this can be considered a breaking change for TypeScript (not at runtime).

Previous API

New API

From HTMLElement:

From Element:

From Node:

Legacy API

New APIs

Additionally, this exposes access to document nodes and text nodes that were not available before.

This will be properly documented on the website at part of the release of 0.82, that will contain this changes.

Differential Revision: D78562721

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 20, 2025
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D78562721

@react-native-bot
Copy link
Collaborator

react-native-bot commented Aug 20, 2025 •
edited
Loading


Warnings
⚠️ ❗ JavaScript API change detected - This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API. Please include a clear changelog message. This change will be subject to extra review.

This change was flagged as: BREAKING

Generated by 🚫 dangerJS against 515fc65

@rubennorte @facebook-github-bot
Ship DOM APIs to stable (facebook#53360)
515fc65 
Summary:

Changelog: [General][Breaking] -  Enable DOM APIs in host component refs

This ships DOM APIs to stable now that we have a cohesive API and it's been stable at Meta for a while.

This changes the `HostInstance` type (exported from the `react-native` package and used by all host components) from being an interface to being a class (`ReactNativeElement`).

**The API is backwards compatible** but given we're changing the definition of `HostInstance` from an interface to a class, this can be considered a **breaking change for TypeScript** (not at runtime).

## Previous API

- [`measure`](https://reactnative.dev/docs/the-new-architecture/layout-measurements#measurecallback)
- [`measureInWindow`](https://reactnative.dev/docs/the-new-architecture/layout-measurements#measureinwindowcallback)
- `measureLayout`
- [`setNativeProps`](https://reactnative.dev/docs/the-new-architecture/direct-manipulation-new-architecture#setnativeprops-to-edit-textinput-value)

## New API

From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):

- Properties
  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
- Methods
  - [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
    - This method was also [available](/docs/next/legacy/direct-manipulation#blur) in the legacy architecture.
  - [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
    - This method was also [available](/docs/next/legacy/direct-manipulation#focus) in the legacy architecture.
    - The `options` parameter is not supported.

From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):

- Properties
  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
    - Returns the value of the `id` or `nativeID` props.
  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeName)
  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeType)
  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeValue)
  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
    - For built-in components, only `ScrollView` instances can return a value other than zero.
  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
    - For built-in components, only `ScrollView` instances can return a value other than zero.
  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
    - Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Element/textContent)
- Methods
  - [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
  - [`hasPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
  - [`setPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
  - [`releasePointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)

From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):

- Properties
  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
    - Will return the [document instance](/docs/next/document-instances) where this component was rendered.
  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
- Methods
  - [`compareDocumentPosition`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
  - [`contains`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
  - [`getRootNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
  - [`hasChildNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)

### Legacy API

- [`measure`](https://reactnative.dev/docs/the-new-architecture/layout-measurements#measurecallback)
- [`measureInWindow`](https://reactnative.dev/docs/the-new-architecture/layout-measurements#measureinwindowcallback)
- `measureLayout`
- [`setNativeProps`](https://reactnative.dev/docs/the-new-architecture/direct-manipulation-new-architecture#setnativeprops-to-edit-textinput-value)

### New APIs

Additionally, this exposes access to document nodes and text nodes that were not available before.

This will be properly documented on the website at part of the release of 0.82, that will contain this changes.

Differential Revision: D78562721
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D78562721

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Aug 20, 2025
@facebook-github-bot
Copy link
Contributor

This pull request has been merged in 2ad845c.

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @rubennorte in 2ad845c

When will my fix make it into a release? | How to file a pick request?

kikoso pushed a commit to kikoso/react-native that referenced this pull request Aug 26, 2025
@rubennorte @kikoso
Ship DOM APIs to stable (facebook#53360)
d0ff88c 
Summary:
Pull Request resolved: facebook#53360

Changelog: [General][Breaking] -  Enable DOM APIs in host component refs

This ships DOM APIs to stable now that we have a cohesive API and it's been stable at Meta for a while.

This changes the `HostInstance` type (exported from the `react-native` package and used by all host components) from being an interface to being a class (`ReactNativeElement`).

**The API is backwards compatible** but given we're changing the definition of `HostInstance` from an interface to a class, this can be considered a **breaking change for TypeScript** (not at runtime).

## Previous API

- [`measure`](https://reactnative.dev/docs/the-new-architecture/layout-measurements#measurecallback)
- [`measureInWindow`](https://reactnative.dev/docs/the-new-architecture/layout-measurements#measureinwindowcallback)
- `measureLayout`
- [`setNativeProps`](https://reactnative.dev/docs/the-new-architecture/direct-manipulation-new-architecture#setnativeprops-to-edit-textinput-value)

## New API

From [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement):

- Properties
  - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
  - [`offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft)
  - [`offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)
  - [`offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop)
  - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
- Methods
  - [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur).
    - This method was also [available](/docs/next/legacy/direct-manipulation#blur) in the legacy architecture.
  - [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus).
    - This method was also [available](/docs/next/legacy/direct-manipulation#focus) in the legacy architecture.
    - The `options` parameter is not supported.

From [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element):

- Properties
  - [`childElementCount`](https://developer.mozilla.org/en-US/docs/Web/API/Element/childElementCount)
  - [`children`](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
  - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
  - [`clientLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft)
  - [`clientTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop)
  - [`clientWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)
  - [`firstElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/firstElementChild)
  - [`id`](https://developer.mozilla.org/en-US/docs/Web/API/Element/id)
    - Returns the value of the `id` or `nativeID` props.
  - [`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lastElementChild)
  - [`nextElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nextElementSibling)
  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeName)
  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeType)
  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Element/nodeValue)
  - [`previousElementSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling)
  - [`scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)
  - [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)
    - For built-in components, only `ScrollView` instances can return a value other than zero.
  - [`scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop)
    - For built-in components, only `ScrollView` instances can return a value other than zero.
  - [`scrollWidth`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)
  - [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
    - Returns a normalized native component name prefixed with `RN:`, like `RN:View`.
  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Element/textContent)
- Methods
  - [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
  - [`hasPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasPointerCapture)
  - [`setPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture)
  - [`releasePointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture)

From [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node):

- Properties
  - [`childNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
  - [`firstChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild)
  - [`isConnected`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected)
  - [`lastChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild)
  - [`nextSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling)
  - [`nodeName`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)
  - [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
  - [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue)
  - [`ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)
    - Will return the [document instance](/docs/next/document-instances) where this component was rendered.
  - [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement)
  - [`parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)
  - [`previousSibling`](https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)
  - [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
- Methods
  - [`compareDocumentPosition`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
  - [`contains`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains)
  - [`getRootNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
  - [`hasChildNodes`](https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes)

### Legacy API

- [`measure`](https://reactnative.dev/docs/the-new-architecture/layout-measurements#measurecallback)
- [`measureInWindow`](https://reactnative.dev/docs/the-new-architecture/layout-measurements#measureinwindowcallback)
- `measureLayout`
- [`setNativeProps`](https://reactnative.dev/docs/the-new-architecture/direct-manipulation-new-architecture#setnativeprops-to-edit-textinput-value)

### New APIs

Additionally, this exposes access to document nodes and text nodes that were not available before.

This will be properly documented on the website at part of the release of 0.82, that will contain this changes.

Reviewed By: GijsWeterings

Differential Revision: D78562721

fbshipit-source-id: 139aee6969f3ecdc65cffcd31cd1754f367d9122
@kligarski kligarski mentioned this pull request Oct 22, 2025
Merged
2 tasks
kkafar added a commit to software-mansion/react-native-screens that referenced this pull request Oct 22, 2025
@kkafar
fix: prevent freeze from unmounting native components (#3324)
dab5b21 
## Description

~~No idea why the freeze worked up to 0.81, maybe there was something on
native side that prevented children from being unmounted and it is no
longer there. Our fix did not work, however. This commit fixes it.~~

~~Name of the filed has been changed here:~~

~~facebook/react-native@a36dbae48657965027e63c5bf90e4982af554581~~

@kligarski:

Starting from RN 0.82, our workaround that prevented unmounting frozen
views has stopped working - the bug is very similar to one described
[here](#2778).
The details of the workaround are available
[here](grahammendick/navigation#860).

Due to introduction of DOM APIs, `react-native` replaced
`ReactFabricHostComponent` with `ReactNativeElement`. This was hidden
behind a feature flag until [this
PR](facebook/react-native#53360) to RN 0.82. The
default value for `enableAccessToHostTreeInFabric` flag has been
switched to `true`.

In the workaround, we relied on internal value of `_viewConfig` which
has been renamed to `__viewConfig` in `ReactNativeElement`
implementation.

In this PR, we handle all names of this property.

| before | after |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/3cf7b785-a91a-4f13-beb3-b71aaabc17ca"
/> | <video
src="https://github.com/user-attachments/assets/a2bbdf01-d2a9-4808-9401-8ad12839a190"
/> |

Fixes
software-mansion/react-native-screens-labs#502.

## Changes

- add check for `__viewConfig` prop name in workaround

## Test code and steps to reproduce

Run `Test1726`. Go to screen 3 and go back via native back button.
Customization of back button on the second screen should be still
visible.

## Checklist

- [x] Included code example that can be used to test this change
- [ ] Ensured that CI passes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. p: Facebook Partner: Facebook Partner

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@rubennorte @facebook-github-bot @react-native-bot