react-native-external-display v0.6.6

react-native-external-display

React Native view renderer on External Display. Also supports Multiple Scenes on iOS.

For Multiple Scenes usage on iOS, please read this documentation.

Installation

• Add dependency with yarn add react-native-external-display
• You may need to run react-native link react-native-external-display or autolinking.

Usage

Example

import React from 'react'
import ExternalDisplay, { useExternalDisplay } from 'react-native-external-display'

function App() {
  const screens = useExternalDisplay()

  return (
    <ExternalDisplay
      mainScreenStyle={{ flex: 1 }}
      fallbackInMainScreen
      screen={Object.keys(screens)[0]}
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#333',
        }}
      >
        <Text style={{ color: 'red', fontSize: 40 }}>External Display</Text>
      </View>
    </ExternalDisplay>
  )
}

getScreens(): ScreenInfo

type Screen = {
  id: string,
  width: number,
  height: number,
  mirrored?: boolean,
}
type ScreenInfo = {
  [screenId: string]: Screen,
}

You need to use Screen size instead of Dimensions.get() if you want to know the external screen size.

useExternalDisplay(options?: ExternalDisplayOptions): ScreenInfo

A react hook to get ScreenInfo update.

type ExternalDisplayOptions = {
  onScreenConnect: Function,
  onScreenChange: Function,
  onScreenDisconnect: Function,
}

useScreenSize(): Screen

A react hook to get current used screen size. (rendered in <ExternalDisplay />)

It will get null if it rendered as fallback in main screen.

<ExternalDisplay />

Props (Extend ViewProps)

Events

License

MIT