React Native DualScreenInfo for Surface Duo

  • Article

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.