search

microsoft / react-native-dualscreen

React Native Dual screen module
https://docs.microsoft.com/en-us/dual-screen/
MIT License
133 stars 26 forks source link

TwoPaneView example does not render correctly in vertical orientation #39

Open kmelmon opened 4 years ago

kmelmon commented 4 years ago

The TwoPaneView example app was designed for horizontal orientation (with panes left/right). If you turn the AutoRotate feature on in your Android device settings, then rotate the device to vertical orientation, the sample doesn't render correctly.

image

There are two problems here: 1) Issue #https://github.com/microsoft/react-native-dualscreen/issues/35 2) There is an additional problem specific to this app, which this issue is tracking: The problem is that this app was designed with a "header" control (the orange bar across the top) which isn't part of the TwoPaneView. This control takes up layout space at the top of the window. So when you rotate the device vertical, the TwoPaneView control does its layout which is essentially like this:

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

The problem here is that because the header control has taken some of the space at the top, the TwoPaneView cannot simply use flex:1 for the panes as this will result in the Hinge not landing in the correct place on screen. It will end up too far down.

This is an interesting problem! If you want a Header that goes all the way across the top in both horizontal and vertical orientations, this is a bit tricky to do with only one layout. I don't think TwoPaneView can do the math correctly - this is a well known problem of TwoPaneView not supporting full window layout.

kmelmon commented 4 years ago

This is my suggestion on how to fix this:

In horizontal orientation, do what the code is currently doing. In vertical orientation, put the header into the top pane of the TwoPaneView (as a child of Pane1).

This will require having the app code listen to the dualscreeninfo event for orientation changes, and doing different layout depending on what the orientation is.

rectified95 commented 3 years ago

@aDavidaIsNoOne This looks related to what you've fixed recently with the hinge rect showing up on the screen -do you think this might already be fixed? (perhaps if you get a minute to verify this quickly, that'd be awesome)