TwoPaneView component

[YuliKl]

Introduction

Apps that present their content in the master/details pattern or target other scenarios for dual-screen devices could benefit from a dedicated component that helps to manage the layout of two distinct app regions. Windows native introduced the two-pane view and I propose creating a similar RN module.

The Core of It

I propose a new module that will manage the layout of two children, Pane1 and Pane2. App developers will be able to specify the desired widths of the panes (usually relative to each other). When spanned on dual-screen devices (this state would be detected using the new device info proposed in #189) the pane widths will be determined by the hardware. TwoPaneView will avoid placing content in the seam, making it easy for developers to create apps with logical UX on dual-screen devices.

TwoPaneView will show either one or both of its panes depending on the width of the component. When TwoPaneView is less than 641 DPs wide and in Auto mode, only one pane will be visible and developers will use pane priority to specify which pane. The app can force TwoPaneView to show only one pane using the Single mode or always two pane, regardless of overall width, using Double mode.

API

Name	Description
pane1	The first child of TwoPaneView
pane2	The second child of TwoPaneView
panePriority	Specifies which of the two children to show when there's insufficient space to show both.
paneMode	Specifies the preferred pane mode of the component, if space allows. Values are {Auto, Single, Double}. Auto is the default and shows one pane when TwoPaneView width < twoPaneWidth (640 DP), both panes when TwoPaneView width >= twoPaneWidth (640 DP).
twoPaneWidth	The width at which TwoPaneView changes how many panes are visible if paneMode = auto. When TwoPaneView is inside an app running on a dual-screen device, twoPaneWidth will be ignored; instead, TwoPaneView will have the correct layout across the seam. The default value for twoPaneWidth will be 640dp.
onModeChanged	Event that fires when TwoPaneView's paneMode or seam orientation (device changes between dual portrait and dual landscape postures) change, resulting in layout of the child panes being modified.

Discussion points

I will continue to add detail and props to this proposal but would appreciate any early feedback.

1. I'm proposing that on single screen TwoPaneView always lays out its child pane side-by-side. The panes can be one on top of the other only on a dual-screen device in double-landscape orientation (when the seam is horizontal). Does that feel sufficient or is stacking the panes on top of each other on single-screen important?

[shergin]

I think this makes perfect sense and we should start building and iterating on this.

[sayzenberg]

This proposal looks really good to me! A couple questions:

1. I'm assuming that the 640 DP threshold for pane rearrangement is derived from the default value of MinWideModeWidth on the Windows TwoPaneView. However, that value can be modified by the developer. I didn't see a similar option in this proposal. Do you think it should be settable by React Native developers as well?

2. The Windows TwoPaneView ignores certain properties when running on dual-screen hardware. For example, the minimum window width (the 640 DP value mentioned above) for side-by-side pane arrangement is not used on dual-screen devices, and that decision is made solely based on whether or not the app is spanned across screens. Will this control follow the same behavior?

Thanks for putting this forward, I'm excited to see this light up!