mybigday
react-native-external-display
React Native view renderer on External Display. Also supports Multiple Scenes on iOS.
For Multiple Scenes usage on iOS, please read this documentation.
Installation
- Add dependency with
yarn add react-native-external-display - You may need to run
react-native link react-native-external-displayor autolinking.
Usage
Example
import React from 'react'
import ExternalDisplay, { useExternalDisplay } from 'react-native-external-display'
function App() {
const screens = useExternalDisplay()
return (
<ExternalDisplay
mainScreenStyle={{ flex: 1 }}
fallbackInMainScreen
screen={Object.keys(screens)[0]}
>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#333',
}}
>
<Text style={{ color: 'red', fontSize: 40 }}>External Display</Text>
</View>
</ExternalDisplay>
)
}getScreens(): ScreenInfo
type Screen = {
id: string,
width: number,
height: number,
mirrored?: boolean,
}
type ScreenInfo = {
[screenId: string]: Screen,
}You need to use Screen size instead of Dimensions.get() if you want to know the external screen size.
useExternalDisplay(options?: ExternalDisplayOptions): ScreenInfo
A react hook to get ScreenInfo update.
type ExternalDisplayOptions = {
onScreenConnect: Function,
onScreenChange: Function,
onScreenDisconnect: Function,
}useScreenSize(): Screen
A react hook to get current used screen size. (rendered in <ExternalDisplay />)
It will get null if it rendered as fallback in main screen.
<ExternalDisplay />
Props (Extend ViewProps)
| Prop | Type | Note |
|---|---|---|
fallbackInMainScreen |
Boolean |
Render children in main screen if no detected external display target. It's useful if you don't want the component instances to be re-mount. |
mainScreenStyle |
ViewProps.style |
Style of fallbackInMainScreen render children wrap view container. |
screen |
String |
Render external display target, you can get screenId from ScreenInfo type |
Events
| Event Name | Returns | Notes |
|---|---|---|
onScreenConnect |
ScreenInfo |
When an external monitor added |
onScreenDisconnect |
ScreenInfo |
When an external monitor removed |