Skip to content

Latest commit

 

History

History
85 lines (62 loc) · 3.38 KB

README.md

File metadata and controls

85 lines (62 loc) · 3.38 KB

CI Status

react-native-external-display

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

Introdution

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

function App() {
  const screens = useExternalDisplay()

  return (
    <ExternalDisplay
      mainScreenStyle={{ flex: 1 }}
      fallbackInMainScreen
      screen={Object.keys(screens)[0]}
    >
      <Video
        source={{
          uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
        }}
        style={{ flex: 1 }}
        repeat
        muted
      />
    </ExternalDisplay>
  )
}
No selected screen Selected
IMG_1318 IMG_1319

iPod Touch connected to TV via AirPlay

Known issues

ios

  • Developer menu and keyboard shoutcuts may not work properly if you attached view renderer into external screen, until it leaves the external screen. As an alternative, you can use dev menu functions from DevSettings module of React Native. (Such as through react-native-debugger)

android

  • Not good support for react-native Modal, it always show on main screen for Android

About iPad Split View / Slide Over

If you want the app works on iPad Split View and External screen, the app should be main screen (on left as Split View), It doesn't work on right side or as Slide Over, because it wouldn't receive UIScreenDidConnectNotification event.

Related projects

License

MIT


Built and maintained by BRICKS.