# react-native-portal-view

> 将组件渲染到组件的其他位置 实现类似 h5 position：'fixed'效果

Latest version **2.1.3** (published 2022-07-10) · 0 weekly downloads

## Install

```sh
npm install react-native-portal-view
pnpm add react-native-portal-view
yarn add react-native-portal-view
bun add react-native-portal-view
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.3 |
| Published | 2022-07-10 |
| First published | 2019-11-19 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | liuyunjs |
| Keywords | react-native, portal, modal, react-native-portal, react-native-portal-view |

## Links

- npm: https://www.npmjs.com/package/react-native-portal-view
- Repository: https://github.com/liuyunjs/react-native-portal
- Homepage: https://github.com/liuyunjs/react-native-portal#readme
- Issues: https://github.com/liuyunjs/react-native-portal/issues
- npm.io page: https://npm.io/package/react-native-portal-view

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 2.1.3 (latest) — 2022-07-10
- 1.0.1-beta1 (beta) — 2021-07-10
- 1.0.0-beta6 (beta6) — 2020-11-07
- 1.0.0-beta5 (beta5) — 2020-11-07
- 1.0.0-beta4 (beta4) — 2020-11-07
- 1.0.0-beta3 (beta3) — 2020-10-31
- 1.0.0-beta1 (beta1) — 2020-10-28
- 2.1.2 — 2022-07-09
- 2.1.1 — 2022-07-09
- 2.1.0 — 2022-07-09
- 2.0.1 — 2022-05-29
- 2.0.0 — 2022-05-29
- 1.0.8 — 2021-09-04
- 1.0.7 — 2021-08-12
- 1.0.6 — 2021-07-22
- … 25 more at https://npm.io/package/react-native-portal-view/versions

## README

# react-native-portal-view

## 特性

将组件渲染到组件的其他位置
实现类似 h5 position：'fixed'效果

## 安装

> npm

```shell
npm i react-native-portal-view -S
```

> yarn

```shell
yarn add react-native-portal-view
```

## 组件

### PortalProvider

_提供一个根节点，可以处于组件树种任何位置,_

#### Props

| 名称 | 默认值 | 类型 | 描述 |

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

| children | void | React.ReactNode | children |
| store | DefaultStore | PortalStore | PortalStore 存储了所有的 PortalUpdater |

### Portal

包裹的组件会被渲染到根节点下

#### Props

| 名称     | 默认值 |      类型       | 描述   |
| -------- | :----: | :-------------: | :----- |
| children |  void  | React.ReactNode | 子组件 |
| namespace |  ''  | string | 命名空间 |



### PortalStore

#### getUpdater: (namespace?: string) => [PortalUpdater](#portalupdater)
返回指定的 PortalUpdater 示例，不存在会创建一个


### PortalUpdater

提供一组方法用于使用函数的方式创建 Portal，添加的组件会渲染到 PortalProvider 中
使用前要在组件树中添加 PortalProvider

#### setContainer: (componentOrElement: React.ComponentType<any> | React.ReactElement) => void

添加一个容器，例如 react-redux 的 Provider 等;
所有使用 add 方法添加的组件都会渲染到这个容器中

#### add: (element: React.ReactElement) => string

添加一个组件，并且返回一个 key，这个 key 用于后续的删除及更新操作

#### update: (key: string, element: React.ReactElement) => void

更新指定的组件

#### remove: (key: string) => void;

删除指定组件

## 示例

```javascript
import * as React from 'react';
import { View, Text, AppRegistry } from 'react-native';
import { PortalProvider,Portal, DefaultStore } from 'react-native-portal-view';
import useToggle from 'react-use/lib/useToggle';

DefaultStore.getUpdater('default').setContainer(props => (
  <View
    {...props}
    pointerEvents="box-none"
    style={[props.style, StyleSheet.absoluteFill, { backgroundColor: 'pink' }]}
  />
));

// PortalStore.getUpdater('default').setContainer(
//   <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, { backgroundColor: 'pink' }]} />,
// );

function Modal(props) {
  return (
    <View style={styles.container}>
      <Text onPress={props.onPress} style={styles.text}>
        Portal example {props.text}, click to destroy
      </Text>
    </View>
  );
}


function App() {
  const [visible, toggle] = useToggle(false);
  const portalKeyRef = React.useRef<string>();

  const onPress = () => {
    if (!portalKeyRef.current) {
      portalKeyRef.current = DefaultStore.getUpdater('default').add(
        <Modal onPress={onPress} text="component modal use PortalStore" />,
      );
    } else {
        DefaultStore.getUpdater('default').remove(portalKeyRef.current);
      portalKeyRef.current = undefined;
    }
  };

  return (
    <>
      <View style={styles.container}>
        <Text onPress={toggle}> {visible ? '销毁' : '创建'} 使用 Portal 组件</Text>
        <Text onPress={onPress}> 创建 使用 PortalStore 静态调用</Text>
      </View>
      {visible && (
        <Portal>
          <Modal onPress={toggle} text="component modal use createPortal" />
        </Portal>
      )}
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

AppRegistry.registerComponent('example', () => App);
```

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