Skip to content

mybigday/react-native-external-display

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Sep 1, 2024
8c5d768 · Sep 1, 2024
Jul 11, 2024
Jul 1, 2023
Sep 1, 2024
Nov 14, 2023
Feb 26, 2020
Feb 26, 2020
Jun 28, 2023
Jan 31, 2022
Jan 31, 2022
Feb 26, 2020
Sep 1, 2024
Feb 26, 2020
Mar 7, 2024
Sep 1, 2024
Sep 1, 2024
Sep 1, 2024

Repository files navigation

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.