mybigday/react-native-external-display

React Native view renderer in External Display.

• Package (react-native-external-display)
• Example

Introdution

• iOS - Displaying Content on a Connected Screen
• 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 keyborad 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.