TwoPaneView layout issue in vertical orientaiton

[kmelmon]

When the dual-screen device has Auto-Rotate feature turned on, and you rotate the device to vertical orientaiton, if PaneMode == 'Double' the content does not render correctly. The hinge is in the "wrong place" and you can see the separator visible in the second pane's content area, instead of lining up nicely where the hinge area is.

Screenshot from modified version of the sample app:

The issue here is that the Android statusbar is taking up some of the layout space at the top of the window. We're using a layout like this:

TwoPaneView => flexDirection: 'column'
--Pane1 => flex: 1
--Hinge => height: 34
--Pane2 => flex: 1

This layout give half the remaining space to Pane1 and half to Pane2. This will only work correctly if the Hinge is exactly in the middle of the window vertically. But in this case it is not because the window rect does not include the status bar. In other words the Hinge isn't in the center of the window.

It looks like we'll need to account for the presence of the StatusBar. If it's visible, then we need to shift everything to account for it. The easiest way to accomplish this would be to not use flex:1 for Pane1 and Pane2, but instead compute heights based on Dimensions.window and the StatusBar height, which you can get from an expo module called Constants. See:
https://reactnative.dev/docs/statusbar#__docusaurus

[rectified95]

@aDavidaIsNoOne fyi