Native-Stack Modal height calculation is off

Description

I'm having a hard time creating a stable reproduction for this as it's very specific.

What I have found is that when lazy loading modal routes with React.lazy and Suspense boundary - only the initial height calculation of the native modal is off.

When I close and re-open it, it calculates correctly to 802. If I don't lazy load the route, it calculates correctly from the get-go.

The only thing I can trace it back to is the usage of Suspense itself.

At the top-most level I have a view where I plug in

onLayout={(e) => {
      console.log(e.nativeEvent.layout.height)
    }}>

What I see in my app, is I get is 874 and it never recalculates.

However if I implement a similar UI setup in a snack I get 874 followed by a recalculation to 802.
If I load it immediately without lazy loading I get 802 and it's stable.

My bug is that I get 874 as the modal height and it does not recalculate properly

Steps to reproduce

I don't have a stable reproduction of it staying stuck at 874, but the snack linked shows it calculating 874 then going back to 802.

• If you don't lazy load it'll calculate to 802 immediately
• If you do lazy load the route it will off shoot to 874 then recalculate

This is only on the initial render, not subsequent renders
I wish I could create an actual reproduction where it gets stuck at 874, but I have had no luck

Snack or a link to a repository

https://snack.expo.dev/0UhdKCLtMNc15_r6uAHrJ

Screens version

4.3.0

React Native version

0.76.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

None

Device

iOS simulator

Device model

iPhone 11,13,15,16

Acknowledgements

Yes