Device info on dual-screen

[YuliKl]

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

Discussion points

[YuliKl]

@kmelmon FYI

[kmelmon]

The folks on the web browser side of things are working on the same issue. This might help folks understand what kind of information we're talking about exposing;
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/Foldables/explainer.md

[chrisglein]

Preview SDK for the Surface Duo and more overall information here: https://blogs.windows.com/windowsdeveloper/2020/01/22/announcing-dual-screen-preview-sdks-and-microsoft-365-developer-day/

[shergin]

I am a huge fan of dual/multiple-screen future of computing. Thank you for working on this!

I am curious, should the API be intrinsically focused on dual-screen setup, or we should try to build it more generically (e.g. specifying a list of screen and list of characteristics that "connect" those screens)?

[shergin]

Another concern is sync vs. async APIs design.
Seems that those constrains (screen setup) can change in-flight, so the API should be able to deliver some event on the main thread synchronously and reconcile React state and relayout synchronously. This is maybe not so important for now (because classic RN is async) but with Fabric adoption, it will become crucial to deliver the best possible UX.

[framerate]

@YuliKl hi! If I were to developer a new dual screen device, how would I set it up so this package returns isDualScreenDevice: true ?

I'd love to enhance this package, but currently I'm seeing false...

[victorglezcardoso]

Hi there, somebody can tell me if I can use this package with expo dev-client.

I tried by I got this error java.lang.NoSuchMethodError: No static method systemBars()I in class Landroid/view/WindowInsets$Type; or its super classes (declaration of 'android.view.WindowInsets$Type' appears in /system/framework/framework.jar!classes3.dex)

Thanks