# rn-bottom-modal

> * Modal with bottom slide out animation * Customizable content components * Support Android and IOS

Latest version **1.0.1** (published 2023-02-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-bottom-modal
pnpm add rn-bottom-modal
yarn add rn-bottom-modal
bun add rn-bottom-modal
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-02-23 |
| First published | 2021-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | qztbl |
| Maintainers | qztbl |
| Keywords | react-native, android, ios, bottom-modal, bottom modal, bottom, modal |

## Links

- npm: https://www.npmjs.com/package/rn-bottom-modal
- Repository: https://github.com/qztbl/react-native-bottom-modal
- Homepage: https://github.com/qztbl/react-native-bottom-modal#readme
- Issues: https://github.com/qztbl/react-native-bottom-modal/issues
- npm.io page: https://npm.io/package/rn-bottom-modal

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [post-robot](https://npm.io/package/post-robot.md) — 93.7K 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

## Recent versions

- 1.0.1 (latest) — 2023-02-23
- 1.0.0 — 2021-09-24

## README

# rn-bottom-modal

* Modal with bottom slide out animation
* Customizable content components
* Support Android and IOS

## Install

`$ yarn add rn-bottom-modal`

or

`$ npm install rn-bottom-modal --save`

## Import

`import {BottomModal} from 'rn-bottom-modal'`

## Props

| Props             | Type                 | Desc                                                         | Default   |
| :---------------- | :------------------- | ------------------------------------------------------------ | --------- |
| containerStyle    | StyleProp<ViewStyle> | Sets view style of content root view.                        | undefined |
| hasMask           | boolean              | Sets whether show mask.                                      | true      |
| touchOutsideClose | boolean              | Sets whether touch outside the content to close this modal.  | true      |
| backKeyClose      | boolean              | Sets whether close this modal with android BACK key . [only Android] | true      |
| keyboardAvoid     | boolean              | Sets whether use KeyboardAvoidingView. [only IOS]            | false     |
| onShow            | function             | Sets the show callback.                                      | undefined |
| onDismiss         | function             | Sets the close callback.                                     | undefined |

## Methods

| Methods   | Desc                                      |
| --------- | ----------------------------------------- |
| show()    | use ref call this function to show modal  |
| dismiss() | use ref call this function to close modal |


## Example

```tsx
<Button 
  title="show Modal" 
  onPress={()=>{
    ref.current?.show()
  }}/>
<BottomModal
  ref={ref}
  containerStyle={{ height: 200 }}
  onShow={()=>{
    console.info("show======")
  }}
  onDismiss={() => {
    console.info("dismiss======")
  }}>
  <Text>Content</Text>
</BottomModal>
```
![](./example.gif)

---
_Source: https://npm.io/package/rn-bottom-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._