react-native-dualscreeninfo
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2 • Public • Published

    react-native-dualscreeninfo

    React Native package for dual screen devices support (Surface Duo)

    Status

    • Android:
      • 10+
    • react-native:
      • supported versions ">= 0.60.5"

    Installation

    0. Setup Kotlin

    • Modify android/build.gradle:

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

    1. Install latest version from npm

    $ yarn add react-native-dualscreeninfo

    2. Modify android:configChanges of your activity, in AndroidManifest.xml

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

    Example

    import React, { useState, useEffect } from 'react'
    import { View, Text } from 'react-native'
    import { DualScreenInfo, Hinge, DualScreenInfoPayload } from 'react-native-dualscreeninfo'
    
    export default function App() {
      const [isDualMode, setDualMode] = useState(DualScreenInfo.isSpanning)
        useEffect(() => {
            DualScreenInfo.addEventListener('didUpdateSpanning', ({ isSpanning }: DualScreenInfoPayload) => {
                if (isDualMode !== isSpanning) {
                    setDualMode(isSpanning)
                }
            })
        })
    
        if (isDualMode) {
          return (
            <View style={{ flex: 1, flexDirection: 'row' }}>
              <View style={{ flex: 1 }}>
                <Text>Screen 1</Text>
              </View>
              <Hinge/>
              <View style={{ flex: 1 }}>
                <Text>Screen 2</Text>
              </View>
            </View>
          )
        }
    
        return (
          <View style={{ flex: 1 }}>
            <Text>Screen 1</Text>
          </View>  
        )
    }

    Reference

    API Documentation

    Dual-Screen

    Install

    npm i react-native-dualscreeninfo

    DownloadsWeekly Downloads

    15

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    68.8 kB

    Total Files

    61

    Last publish

    Collaborators

    • kmelmon
    • evutkin
    • keilaloia
    • adavida
    • rectified95