Fix LogBox inspector content under horizontal safe area insets by huntie · Pull Request #59797 · react/react-native

huntie · 2026-11-04T13:46:39Z

Summary

The LogBox inspector applies the safe area to its header and footer buttons only, so the error message, code frames and stacks run under a side inset, such as the iPhone Duo's status column or the notch in landscape. This affects the "Failed to compile" screen, which cannot be dismissed, and the dismissable inspector alike.

Changes

Read the inspector root's insets with experimental_onSafeAreaInsetsChange, and apply the left and right insets as padding to the message header and to the content inside the body's ScrollView, so backgrounds stay edge to edge.
Map the physical insets to paddingStart and paddingEnd by isRTL, so the RTL left/right swap doesn't move them.

This adds no SafeAreaView use, ahead of its removal.

Changelog:
[General][Fixed] - LogBox: Keep the inspector's message, code frames and stacks clear of horizontal safe area insets

Test Plan

yarn test packages/react-native/Libraries/LogBox

✅ Passes, with no snapshot changes.

RNTester on the iPhone Duo simulator (iOS 27.1 runtime, Xcode 27.2), folded display, where the status column is a right inset. The syntax error is an unresolvable import added while the app runs, delivered by Fast Refresh; the render error is a throw in RNTesterApp.

Syntax error, before	Syntax error, after

✅ The message and code frame wrap before the status column; the header and message backgrounds still reach the edge.

Render error, before	Render error, after

✅ The dismissable inspector gets the same inset; the header and Dismiss, Minimize and Copy buttons are unchanged.

Render error, "See More" expanded	Expanded and scrolled

✅ With the message inside the ScrollView, it and the component stack keep the inset while scrolling.

iPhone 18 Pro (iOS 27.0 runtime), portrait, syntax error, after

✅ With no side insets, the layout is unchanged.

ℹ️ Not run locally: the Fantom LogBox snapshot tests (yarn fantom), left to CI.

huntie · 2026-11-04T14:10:07Z

@huntie-bot Once this lands, pick request it to both 88 and 89.

javache · 2026-11-04T14:32:54Z

+      const {left, right} = event.nativeEvent.insets;
+      // Insets are physical edges. Logical edges resolve by layout direction
+      // alone, which keeps clear of the RTL left/right swap.
+      const {isRTL} = I18nManager.getConstants();
+      setSafeAreaPadding({
+        paddingStart: isRTL ? right : left,
+        paddingEnd: isRTL ? left : right,
+      });


Can't we use paddingLeft and paddingRight here to avoid the manual RTL logic?

Tested this on the iPhone Duo simulator in RTL, I think the manual RTL logic is needed regardless (for as long as doLeftAndRightSwapInRTL exists).

RTL Current (paddingStart/End + isRTL) paddingLeft/paddingRight

doLeftAndRightSwapInRTL: true (default)

doLeftAndRightSwapInRTL: false

This mapping also holds with doLeftAndRightSwapInRTL: false, since paddingStart/End resolve by layout direction alone (verified on device), so I'll keep it as is.

I guess Left/Right might be a semantic improvement, but I don't think it reduces the logic, unless you had something else in mind?

robhogan · 2026-11-04T14:34:39Z

@huntie-bot Once this lands, pick request it to both 88 and 89.

0.88 doesn't have experimental_onSafeAreaInsetsChange (it was added in #58109 and never picked)

huntie · 2026-11-04T17:04:51Z

@robhogan Gah, yeah you're right.

@huntie-bot Amend: Pick this to only 0.89 please.

## Summary: react#59797 added `experimental_onSafeAreaInsetsChange` to the root `logbox_inspector` view, and react#59893 refreshed the LogBox snapshots without that change, so both landed but the committed `LogBoxInspector` baseline is missing the prop. The two inspector snapshot tests fail in Fantom CI mode, which no longer rewrites mismatched baselines (react#59895). Regenerate the two affected snapshots; the only change is the added prop on the root view. ## Changelog: [Internal] ## Test Plan: - `CI=true yarn fantom packages/react-native/Libraries/LogBox`: 2 snapshot failures before; 90/90 tests and 54/54 snapshots pass after, on two consecutive runs. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

…59911) * Force native EventTarget event dispatching on for the React renderer ## Summary: #59896 removed `enableNativeEventTargetEventDispatching` from `ReactNativeFeatureFlags`, but the vendored Fabric renderer still reads it through `react-native/react-private-interface` to choose between `dispatchNativeEvent` and the legacy plugin-based dispatch. With the getter gone, the renderer saw `undefined`, treated the flag as off, and fell back to the legacy path, so listeners registered with `addEventListener` were never called. The `ReactNativeFeatureFlags` getter in the private interface now returns the real flags plus `enableNativeEventTargetEventDispatching: () => true`, so only the renderer sees it. This can be removed once the renderer is synced from a React build that no longer reads the flag. ## Changelog: [Internal] ## Test Plan: - `yarn fantom packages/react-native/src/private/renderer/core/__tests__/EventTargetDispatching-itest.js`: 16 failures before, 78 passed / 20 skipped after. - `yarn fantom packages/react-native/src/private/webapis/dom packages/react-native/src/private/renderer`: 513 passed, 26 skipped. - `yarn eslint --max-warnings 0` and `yarn prettier --check` on both changed files pass. - `yarn flow-check` reports only 2 unrelated parse errors from local git ref logs under `.git/logs/refs/remotes/` whose names end in `.json`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) * Fix build_js_types: move abortSignal's required param first Summary: #59896 made `ReactNativeElement` unconditionally extend `EventTarget`, which imports the `AbortSignal` type, pulling `AbortSignal.d.ts` into the generated types checked by `yarn test-generated-typescript`. The internal `abortSignal(reason = ..., signal)` helper declares a defaulted parameter before a required one, which flow-api-translator emits as `abortSignal(reason?: unknown | void, signal: AbortSignal)` and tsc rejects with TS1016. Reorder the parameters to `abortSignal(signal, reason = ...)` and update both internal callers. The public API snapshot is unchanged. Changelog: [Internal] Test Plan: - `yarn build-types --skip-snapshot && yarn test-generated-typescript`: fails with TS1016 before, passes after - `yarn build-types --validate`: API snapshot is up to date - `yarn eslint --max-warnings 0 packages/react-native/src/private/webapis/dom/abort-api/` * Update LogBoxInspector snapshots for the safe area insets listener ## Summary: #59797 added `experimental_onSafeAreaInsetsChange` to the root `logbox_inspector` view, and #59893 refreshed the LogBox snapshots without that change, so both landed but the committed `LogBoxInspector` baseline is missing the prop. The two inspector snapshot tests fail in Fantom CI mode, which no longer rewrites mismatched baselines (#59895). Regenerate the two affected snapshots; the only change is the added prop on the root view. ## Changelog: [Internal] ## Test Plan: - `CI=true yarn fantom packages/react-native/Libraries/LogBox`: 2 snapshot failures before; 90/90 tests and 54/54 snapshots pass after, on two consecutive runs. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

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 Nov 4, 2026

facebook-github-tools Bot added p: Expo Partner: Expo Partner labels Nov 4, 2026

huntie marked this pull request as ready for review November 4, 2026 13:50

huntie requested review from cortinico, robhogan and vzaidman November 4, 2026 13:50

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 Nov 4, 2026

huntie force-pushed the pr59797 branch from e740cb2 to 849dc1f Compare November 4, 2026 14:15

Fix LogBox inspector content under horizontal safe area insets

e24203a

huntie force-pushed the pr59797 branch from 849dc1f to e24203a Compare November 4, 2026 14:31

huntie mentioned this pull request Nov 4, 2026

Fix LogBox inspector content under horizontal safe area insets #59798

Closed

javache reviewed Nov 4, 2026

View reviewed changes

huntie requested review from fabriziocucci and javache November 6, 2026 11:02

huntie enabled auto-merge (squash) November 10, 2026 12:08

huntie disabled auto-merge November 10, 2026 12:12

huntie enabled auto-merge (squash) November 10, 2026 12:12

Abbondanzo approved these changes Nov 10, 2026

View reviewed changes

huntie merged commit 975584c into main Nov 10, 2026
210 of 212 checks passed

huntie mentioned this pull request Nov 10, 2026

[0.89] Fix LogBox inspector content under horizontal safe area insets reactwg/react-native-releases#1515

Open

huntie deleted the pr59797 branch November 10, 2026 14:46

Navigation Menu

Repository navigation

Fix LogBox inspector content under horizontal safe area insets - #59797

Fix LogBox inspector content under horizontal safe area insets#59797
huntie merged 1 commit into
mainfrom
pr59797

huntie commented Nov 4, 2026 •

edited

Loading

Uh oh!

huntie commented Nov 4, 2026

Uh oh!

javache Nov 4, 2026

Uh oh!

huntie Nov 6, 2026 •

edited

Loading

Uh oh!

robhogan commented Nov 4, 2026

Uh oh!

huntie commented Nov 4, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

RTL	Current (`paddingStart`/`End` + `isRTL`)	`paddingLeft`/`paddingRight`
`doLeftAndRightSwapInRTL: true` (default)
`doLeftAndRightSwapInRTL: false`

Conversation

huntie commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

Uh oh!

huntie commented Nov 4, 2026

Uh oh!

javache Nov 4, 2026

Choose a reason for hiding this comment

Uh oh!

huntie Nov 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

robhogan commented Nov 4, 2026

Uh oh!

huntie commented Nov 4, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

huntie commented Nov 4, 2026 •

edited

Loading

huntie Nov 6, 2026 •

edited

Loading