Text inside the ScrollView has massive vertical and horizontal overflow on the first render

[hryhoriiK97]

Environment

react-native -v: 0.81.6
npm ls react-native-macos: 0.81.4
node -v: v22.21.1
npm -v: 10.9.4
yarn --version: 4.11.0
xcodebuild -version: Xcode 26.1.1 (Build 17B100)

Steps to reproduce the bug

1. Wrap a large amount of content in a Text component, nested inside a ScrollView.

<ScrollView>
      <Text>
       {content}
      </Text>
 </ScrollView>

2. Observe the initial render: the layout displays unexpected behavior with huge vertical and horizontal scrollable areas.

3. Resizing the application window forces a re-calculation, causing the issue to disappear.

Expected Behavior

Expected normal behavior and height calculation without huge overflows vertically and horizontally.

This issue has been identified while working on macOS support for react-native-enriched-markdown.

Actual Behavior

Screen.Recording.2026-03-19.at.13.46.49.mov

Reproducible Demo

No response

Additional context

No response

[hryhoriiK97]

@Saadnajmi do you have any idea what could be the root of this issue? 🤔

[copilot-swe-agent]

The agent encountered an error and was unable to start working on this issue: Before you can use Copilot coding agent, you need to pick a "Usage billed to" option in your Copilot settings. Update your settings, then try again.

[Saadnajmi]

Hi, no idea what may be causing this bug. Sending a (local) agent to investigate it since Copilot didn't work here

[Saadnajmi]

@hryhoriiK97 does this fix it for you? #2880

[hryhoriiK97]

@Saadnajmi I'll test this (hopefully tomorrow) and let you know. Thanks!

[hryhoriiK97]

@Saadnjami I've applied this fix as a patch in macos-example in react-native-enriched-markdown, and it works perfectly! 🙌 Thank you!