Miss any of our Open RFC calls?Watch the recordings here! »

react-native-dualscreeninfo

0.1.7 • 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

123

Version

0.1.7

License

MIT

Unpacked Size

65.8 kB

Total Files

61

Last publish

Collaborators

  • avatar
  • avatar
  • avatar