Device info on dual-screen #189
Description
Introduction
Foldable devices is a growing area of innovation. Microsoft will be entering with market with the Surface Neo and the Surface Duo, which run Windows and Android operating systems, respectively. Microsoft has started publishing some information about dual-screen development, and there's a great opportunity here for React Native to bridge the gap and enable cross-platform app development.
The Core of It
With dual-screen devices come new challenges for apps to provide a great user experience. One challenge is correctly handing content spanned across two screens. To avoid awkwardly placing content in a location where the user can't easily see or interact with it, apps and components would benefit from information such as:
- How many screens does the device have?
- Is the app currently spanned across more than one screen?
- Where is the location of the gap between screens?
Modules
We propose creating native modules for Android and Windows, and encapsulating their information in a JS DualScreenInfo module, which will include the following information
| API | Description | Type |
|---|---|---|
| isDualScreenDevice | Returns True if the app is running on a dual screen device | boolean |
| isSpanning | Returns True if the current app is spanned across both screens of a dual screen device | boolean |
| windowRects | Returns a collection of rects representing the usable area of the app window | WindowRect[] |
| hingeWidth | The measurement, in DPs, between the closest edges of the window rects | number |
| addEventListener | type can take the value { spannedChanged, windowRectsChanged } | DualScreenInfoEvent |
| removeEventListener | DualScreenInfoEvent |