[huntie]

Summary

Context

Follow-up to #59194, which extended behaviour of <ScrollView contentInsetAdjustmentBehavior="auto"> to pad the content container across the scroll axis, fixing horizontal safe area insets (e.g. iPhone Duo rail).

This diff

A refactor moving padding handling from JS into the content container's native component, so the safe area reaches the layout without a round trip through React.

After this change, <ScrollView> will no longer depend on experimental_onSafeAreaInsetsChange.

Changes

• Swaps out RCTScrollContentView from a View alias to be a dedicated component of its own. Its shadow node pads the Yoga style by the safe area in its state, on top of the padding the style resolves to on each edge, following the precedence Yoga gives the padding edges for the layout direction.
• <ScrollView> no longer observes experimental_onSafeAreaInsetsChange, merges padding into contentContainerStyle or re-renders when the insets change.

Preceding PR	This PR
RCTViewComponentView, frame (0 0; 466 1574)	RCTScrollContentViewComponentView, the same frame

Notes

• Android is unchanged: it never renders RCTScrollContentView, and the shared view name mapping only loses the iOS alias.

Changelog: [Internal]

Test Plan

Repeat all verification from #59194.

iPhone Duo (iOS 27.1)

iPhone Duo folded, never	iPhone Duo folded, automatic	iPhone Duo folded, always
Rows run under the rail	✅ Rows stop at the rail; the container's background still runs under it	✅ Rows stop at the rail, with no sideways offset from UIKit's content inset

• ✅ Unfolding while the modal is open re-lays the rows out for the wider display without a relaunch: the controls row goes from 382 to 867 wide within a few seconds.
• ✅ Horizontal, automatic and always: items stop above the home indicator, with the rail inset along the scrollable axis only.
• ✅ While scrolling, the scroll indicator stays at the device edge.

iPhone 18 Pro (iOS 27.0)

iPhone 18 Pro landscape, automatic
✅ Rows stop at both insets, the camera cutout side and the opposite edge; the container's background still runs edge to edge

Nesting the layout with <SafeAreaView> (backwards compatible)

automatic	automatic, inner SafeAreaView	never, inner SafeAreaView
Rows stop at the rail	✅ Rows stop at the same place: the content container is already clear of the rail, so the inner view's own safe area is zero and it adds no padding	✅ The inner view pads instead, and rows stop at the same place

Nested in react-native-screens

RNTester's root hosted in a tab bar controller holding a navigation stack, with the first scroll view registered and flipped from never to automatic natively the way react-native-screens' native tabs do, and a horizontal <ScrollView> as the screen:

iPhone Duo folded, native tab, prop unset	iPhone Duo folded, native tab, automatic
✅ UIKit's insets are left alone, adjustedContentInset={82, 0, 34, 84}, and the cards rest below the navigation bar	✅ The container pads the top and bottom once and UIKit's cross-axis inset is removed, adjustedContentInset={0, 0, 0, 84}