React Native view renderer in External Display

React Native view renderer in External Display.

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 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

Related projects

Download Details:

Author: mybigday

Source Code: https://github.com/mybigday/react-native-external-display

#react-native #react #mobile-apps

React Native view renderer in External Display
5.25 GEEK