React Native DualScreenInfo for Surface Duo

DualScreenInfo is a non-visual helper that provides information about the device so that your code and layouts can adapt to dual-screens. It contains the following methods:

• isDualScreenDevice – check this before accessing other dual-screen-specific APIs.
• isSpanning – whether the app is on one or two screens.
• windowRects – the bounds of the two display rectangles (excluding the hinge area).
• didUpdateSpanning – event listener so your code can respond when the app is spanned or moved to a single screen.

Installation

Follow the react-native-dualscreeninfo installation instructions:

1. Modify android/build.gradle to add Kotlin support:

   buildscript {
     ext {
       ...
   +   kotlinVersion = "1.3.50"
     }
   ...
   
     dependencies {
   +   classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}")
   ...
   

2. Run npm install react-native-dual-screen to add the SDK package.

3. Modify android:configChanges by including these options:

   android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout"
   

Samples

Once installed, give the samples a try.

Source

DualScreenInfo is an open-source component, available on GitHub.