ios onLayout height & screen content jumping on initial render

Duplicated from https://github.com/react-navigation/react-navigation/issues/10673 since the bot asked for it.

Description

Current behavior

Using Native Stack navigator and navigating to another screen, which has onLayout listener for the Root element logs:

(tested on iphone XS max)

►{width:414,height:896,x:0,y:0}
►{width:414,height:808,x:0,y:0}

If I wrap the screen with SafeAreaView, it logs even more onLayoutEvents:

►{width:414,height:896,x:0,y:0}
►{width:414,height:818,x:0,y:44}
►{width:414,height:730,x:0,y:44}

On top of it, on some ios devices I can see that the content gets rendered with the initial height (896) & quickly rerendered with the correct height (the components don't have hardcoded height inside but use flex).

I think the layout jumping depends on JS execution speed (it happens on a production build, but does not happen if enable debug build or do console.warn).

Here is an image showing that content initially gets rendered bigger and then gets to correct height:

HEIGHT 896	HEIGHT 808

Expected behavior

The onLayout should be called with correct layout info the very first time & the screen should not jump on the very first render.

Steps To Reproduce

Reproduction

https://snack.expo.dev/wMSEvt-Vr

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/​bottom-tabs
• @react-navigation/​drawer
• @react-navigation/​material-bottom-tabs
• @react-navigation/​material-top-tabs
• @react-navigation/​stack
• @react-navigation/​native-stack

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.10
@react-navigation/native-stack	6.6.2
react-native-safe-area-context	4.3.1
react-native-screens	3.14.0
react-native	expo version (also happens on 0.63)
expo	latest

Start with the linked Snack reproduction and the native-stack setup described in the issue, observing the onLayout events on an iPhone-sized iOS device. Trace the initial layout and safe-area handling before changing anything; done means the first onLayout reports the correct dimensions and the screen does not visibly jump on its first render.