react-native-external-display

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

• Package (react-native-external-display)
• Example
• Example of iPad Multiple Scenes - Simple Multiple Windows Browser

Introdution

• iOS
  • Displaying Content on a Connected Screen
  • Multiple Scenes support on iPad targets
• Android - Presentation API

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

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

• react-native-media-player
• react-native-external-screen

License

MIT

Built and maintained by BRICKS.