[ResizeObserver 3/3] ResizeObserver Web API implementation by paradowstack · Pull Request #57723 · react/react-native

paradowstack · 2026-07-28T15:23:37Z

Stack 3/3 — parent: feat/LayoutEventEmitter. Review the two parents first.

Summary:

Implements the ResizeObserver Web API for the New Architecture, behind the enableResizeObserverByDefault flag (off by default).

The motivation is Web compatibility, and it's more capable than onLayout: callers pick which box to observe (content-box, border-box, device-pixel-content-box) and the sizes for those boxes are delivered in the notification.

The design is as follows: JS ResizeObserver/ResizeObserverEntry/ResizeObserverSize on top of a manager singleton and the NativeResizeObserver TurboModule, using the same notify + takeRecords pull model. In C++, ResizeObserverManager collects observed targets whose layout changed at commit time (via shadowTreeDidCommit) and then computes and delivers observations in the event loop's "update the rendering" step (RuntimeSchedulerResizeObserverDelegate::runResizeObservations), as the spec requires. Requires bridgeless + the modern event loop; the legacy scheduler gets a no-op delegate.

Known deviations from the spec (each pinned by a test):

One gather/broadcast per tick. RN has no synchronous re-layout loop, so the ResizeObserver loop completed with undelivered notifications error is never emitted; a callback that triggers a resize is delivered on the next tick.
Re-observing a target with the same box is a no-op and does not re-deliver. This matches browsers, not the literal observe() algorithm.
Callback order across observers follows first-observe() order rather than construction order.

Changelog:

[INTERNAL] [ADDED] - Add the ResizeObserver API, behind the enableResizeObserverByDefault feature flag

Test Plan:

Fantom ResizeObserver-itest.js covers many test scenarios.
rn-tester has ResizeObserver examples (box sizes, text, visibility); verified initial, resize, and animation-driven delivery there.
RuntimeSchedulerTest.cpp new test scenarios for update rendering loop.

meta-codesync · 2026-07-29T10:12:01Z

@rubennorte has imported this pull request. If you are a Meta employee, you can view this in D114045415.

rubennorte · 2026-07-29T10:36:01Z

Are the CI failures legit?

paradowstack · 2026-07-29T12:17:31Z

Are the CI failures legit?

There were missing targets in Package.swift file - the last commit fixed that.

rubennorte

This looks great, thanks a lot!

Could you please address the comments in the PR?

Also, I think we should add more tests to see what would happen if a callback scheduled an update in a component. React DOM would probably batch those and run in a separate task, but they also provide flushSync to process them immediately. We don't provide that now in RN but I think we should at some point for use cases like this.

rubennorte · 2026-07-29T11:09:16Z

+  ...
+};
+
+declare type ResizeObserverEntry = {


Both this and ResizeObserverSize should be declared as as classes.

rubennorte · 2026-07-29T12:22:07Z

+  // See
+  // https://w3c.github.io/csswg-drafts/resize-observer/#broadcast-resize-notifications-h
+  if (resizeObserverDelegate_ != nullptr) {
+    resizeObserverDelegate_->runResizeObservations();


I think this is incomplete. This should be run in a loop to process updates coming callbacks themselves. Check resizeObserverDepth in https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

That is true, I misunderstood a bit flushSync issue.

I have changed it to use resize loop as in the spec.

rubennorte · 2026-07-29T12:24:12Z

+  _blockSize: number;
+
+  constructor(inlineSize: number, blockSize: number) {
+    this._inlineSize = inlineSize;


Can we make this constructor and the one in ResizeObserverEntry private using the same pattern we're using in other Web classes (see <Class>_public)

They already follow that pattern - take a look at the end of these files.

rubennorte · 2026-07-29T12:33:42Z

+        zeroContentRect);
+  }
+
+  auto layoutMetrics = LayoutableShadowNode::computeRelativeLayoutMetrics(


This call is expensive and not necessary for ResizeObserver. In ResizeObserver, the position of the element in the viewport is not considered, only its size. For that, you can just look at the own layout of the element, and don't need the bounding client rect computed from that function.

Replaced with cheaper version.

rubennorte · 2026-07-29T12:34:04Z

+  // the padding box (i.e. the paddings only, excluding borders).
+  // https://w3c.github.io/csswg-drafts/resize-observer/#dom-resizeobserverentry-contentrect
+  auto contentRect = Rect{
+      .origin =


This is against the spec. The origin is 0,0 for the contentRect provided.

Only if target is an SVG element, from spec:

If target is not an SVG element or target is an SVG element with an associated CSS layout box do these steps:

Set this.contentRect.top to target.padding top.
Set this.contentRect.left to target.padding left.

If target is an SVG element without an associated CSS layout box do these steps:

Set this.contentRect.top and this.contentRect.left to 0.

See 3.4.4. Create and populate a ResizeObserverEntry point 7.

rubennorte · 2026-07-29T16:14:20Z

Also, re: the changelog, this should just be [internal] until we promote this to the experimental/canary channels

NativeResizeObserver.h ships in the prebuilt header layout but includes ResizeObserverManager.h (React-Fabric ships only observers/events) and "FBReactNativeSpecJSI.h" (resolves via pod header maps only). Same two offenders already baselined for the intersection and mutation observer native modules.

paradowstack · 2026-07-31T13:54:14Z

This looks great, thanks a lot!

Could you please address the comments in the PR?

Also, I think we should add more tests to see what would happen if a callback scheduled an update in a component. React DOM would probably batch those and run in a separate task, but they also provide flushSync to process them immediately. We don't provide that now in RN but I think we should at some point for use cases like this.

Thanks for the review!

I have addressed all the comments, now implementation includes proper resize loop (gather / broadcast / depth), more tests (Fantom + RuntimeSchedulerTest), corrected bom.js.flow types, and not use computeRelativeLayoutMetrics function.

cc @javache

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 Jul 28, 2026

facebook-github-tools Bot added p: Callstack Partner: Callstack Partner labels Jul 28, 2026

paradowstack force-pushed the feat/resize-observer branch from a7e8c72 to d9da0c1 Compare July 28, 2026 15:58

paradowstack marked this pull request as ready for review July 28, 2026 16:00

facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jul 28, 2026

paradowstack force-pushed the feat/resize-observer branch from 795d2b1 to 027b820 Compare July 29, 2026 12:02

rubennorte requested changes Jul 29, 2026

View reviewed changes

javache self-requested a review July 30, 2026 08:56

paradowstack added 17 commits July 31, 2026 15:49

feat: add enableResizeObserverByDefault feature flag

d8722f9

feat: ResizeObserver stub implementation

e529577

feat: JS Web API stubs

de64bf6

feat: ResizeObserver TurboModule

7cb2315

feat: add polyfill behind feature flag

3296ee6

feat: add basic implementation

6c78168

feat: devicePixelContentBoxSize support

ed76b5c

feat: broadcast on rendering

3730577

fix: handle re-observe

a5ca8ad

fix: initial load + hidden cases

ad1f7b7

fix: unobserve after target unmount

7024d82

fix: improve unobserve logic

db47740

fix: round device-pixel-content-box dimensions

a83989f

fix: frozing ResizeObserverEntry getters

0fa6d6a

refactor: simplify runResizeObservations method signature

f16f03b

feat: add observation sequence to ResizeObserver for ordered delivery

a67e5b0

feat: handle unmount 0x0 case

00c61ee

paradowstack added 24 commits July 31, 2026 15:49

feat: add ResizeObserver Fantom tests

46b9756

fix: expose public wrapper

090210e

feat: update bom file

330ea24

feat: add docs

03a6151

feat: rn-tester showcase page

44b52c2

feat: add ResizeObserver globals test setup

cb66f73

feat: update RuntimeScheduler docs

c836f1f

feat: more test cases

2d868ed

feat: add surfaceIdsWithPendingInitialDelivery_

5a1f725

feat: new tests

8e677d7

feat: split into three examples

a902551

fix: flow-check changes

18f46bf

refactor: cleanup

1241267

refactor: prettier

ded2cdb

feat: ResizeObserver cxx api

09d7d9f

fix: import order

aafe81e

fix: add missing Package.swift targets

fc48bbd

fix: add missing dependency

087dd22

fix: remove expensive computeRelativeLayoutMetrics call

673cd66

fix: change type to class

93b83d7

feat: use resize loop (gather / broadcast / depth)

a3e9067

feat: snapshots

3e4d142

fix: correct types

afea976

paradowstack force-pushed the feat/resize-observer branch from bc50446 to 6192ecd Compare July 31, 2026 13:50

paradowstack force-pushed the feat/resize-observer branch from 6192ecd to afea976 Compare July 31, 2026 14:09

paradowstack requested a review from rubennorte July 31, 2026 14:12

fix: snapshots update

e05fcb9

Uh oh!

Conversation

paradowstack commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Changelog:

Test Plan:

Uh oh!

meta-codesync Bot commented Jul 29, 2026

Uh oh!

rubennorte commented Jul 29, 2026

Uh oh!

paradowstack commented Jul 29, 2026

Uh oh!

rubennorte left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rubennorte commented Jul 29, 2026

Uh oh!

paradowstack commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

paradowstack commented Jul 28, 2026 •

edited

Loading