react-native-community/discussions-and-proposals

Device info on dual-screen

YuliKl opened this issue · 7 comments

YuliKl commented

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

kmelmon commented

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

  • 👍5
shergin commented

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)?

  • 👍1
shergin commented

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.

  • 👍2
framerate commented

@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...

  • 👍1
victorglezcardoso commented

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