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

React Native view renderer in External Display
https://github.com/mybigday/react-native-external-display

android external-display ios native-module native-ui-component react react-native

Last synced: 7 days ago
JSON representation

React Native view renderer in External Display

• Host: GitHub
• URL: https://github.com/mybigday/react-native-external-display
• Owner: mybigday
• License: mit
• Created: 2020-02-26T08:49:06.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-01T01:25:06.000Z (2 months ago)
• Last Synced: 2024-09-01T01:25:38.825Z (2 months ago)
• Topics: android, external-display, ios, native-module, native-ui-component, react, react-native
• Language: Java
• Size: 3.47 MB
• Stars: 203
• Watchers: 6
• Forks: 20
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![CI Status](https://github.com/mybigday/react-native-external-display/workflows/CI/badge.svg)](https://github.com/mybigday/react-native-external-display)

# react-native-external-display

React Native view renderer on External Display. Also supports [Multiple Scenes](docs/IOSMultipleScenesSupport.md) on iOS.

- [Package (react-native-external-display)](packages/react-native-external-display)

- [Example](packages/RNExternalDisplayFabricExample)

- [Example of iPad Multiple Scenes - Simple Multiple Windows Browser](packages/IPadMultiScenesHeadlessExample)

## Introdution

- iOS

  - [Displaying Content on a Connected Screen](https://developer.apple.com/documentation/uikit/windows_and_screens/displaying_content_on_a_connected_screen)

  - [Multiple Scenes support on iPad targets](docs/IOSMultipleScenesSupport.md)

- Android - [Presentation API](https://developer.android.com/reference/android/app/Presentation)

```js

import React from 'react'

import Video from 'react-native-video'

import ExternalDisplay, {

  useExternalDisplay,

} from 'react-native-external-display'

function App() {

  const screens = useExternalDisplay()

  return (

    

      

    

  )

}

```

|                                                No selected screen                                                |                                                     Selected                                                     |

| :--------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------: |

| ![IMG_1318](https://user-images.githubusercontent.com/3001525/75336253-c3807a00-58c5-11ea-9872-371b654c05fa.png) | ![IMG_1319](https://user-images.githubusercontent.com/3001525/75336265-c8452e00-58c5-11ea-84a7-35e7a2ceccfe.png) |

> 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`](https://github.com/jhen0409/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`](https://github.com/mybigday/react-native-media-player)

- [`react-native-external-screen`](https://github.com/mackeian/react-native-external-screen)

## License

[MIT](LICENSE.md)

---



  

    

  

  


    Built and maintained by BRICKS.