# react-native-external-display

> React Native view renderer in External Display

Latest version **0.6.6** (published 2024-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-external-display
pnpm add react-native-external-display
yarn add react-native-external-display
bun add react-native-external-display
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.6 |
| Published | 2024-09-01 |
| First published | 2020-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 88.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 237 |
| Author | Jhen-Jie Hong |
| Maintainers | jhen0409 |
| Keywords | react-native, external-display, uiscene, native-module, native-ui-component, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-external-display
- Repository: https://github.com/mybigday/react-native-external-display
- Issues: https://github.com/mybigday/react-native-external-display/issues
- npm.io page: https://npm.io/package/react-native-external-display

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.6.6 (latest) — 2024-09-01
- 0.6.5 — 2024-07-16
- 0.6.4 — 2023-11-14
- 0.6.3 — 2023-11-02
- 0.6.2 — 2023-10-18
- 0.6.1 — 2023-07-05
- 0.6.0 — 2023-06-30
- 0.6.0-rc.4 — 2023-06-28
- 0.6.0-rc.3 — 2023-06-28
- 0.6.0-rc.2 — 2023-06-25
- 0.6.0-rc.1 — 2023-06-22
- 0.6.0-rc.0 — 2023-06-22
- 0.5.18 — 2022-10-22
- 0.5.17 — 2022-05-17
- 0.5.16 — 2022-02-13
- … 29 more at https://npm.io/package/react-native-external-display/versions

## README

# 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](https://github.com/mybigday/react-native-external-display/blob/master/docs/IOSMultipleScenesSupport.md).

## Installation

- Add dependency with `yarn add react-native-external-display`
- You may need to run `react-native link react-native-external-display` or autolinking.

## Usage

Example

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

```flow
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.

```flow
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`](https://reactnative.dev/docs/view#props))

| 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`](https://reactnative.dev/docs/view-style-props#props) | 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 |

## License

[MIT](https://github.com/mybigday/react-native-external-display/blob/master/LICENSE.md)

---
_Source: https://npm.io/package/react-native-external-display · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._