react-native-external-display-2

react-native-external-display

React Native view renderer in External Display.

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)

Prop	Type	Note
fallbackInMainScreen	Boolean	Render children in main screen if no detected external display target. It's useful if you don't want the component instances to be re-mount.
mainScreenStyle	ViewProps.style	Style of fallbackInMainScreen render children wrap view container.
screen	String	Render external display target, you can get screenId from ScreenInfo type

Events

Event Name	Returns	Notes
onScreenConnect	ScreenInfo	When an external monitor added
onScreenDisconnect	ScreenInfo	When an external monitor removed

License

MIT