React Native view renderer in 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

Related projects

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

Download Details:

Author: mybigday

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

#react-native #react #mobile-apps