react-native-external-display

React Native view renderer in External Display

Usage no npm install needed!

<script type="module">
  import reactNativeExternalDisplay from 'https://cdn.skypack.dev/react-native-external-display';
</script>

README

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