# react-native-modalize

> A highly customizable modal/bottom sheet that loves scrolling content.

Latest version **2.1.1** (published 2022-08-10) · MIT license · 77.8K weekly downloads

## Install

```sh
npm install react-native-modalize
pnpm add react-native-modalize
yarn add react-native-modalize
bun add react-native-modalize
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; growing popularity.

Warnings: no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2022-08-10 |
| First published | 2018-11-07 |
| Weekly downloads | 77.8K |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 64.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2881 |
| Author | Jérémy Barbet |
| Maintainers | jeremy.barbet |
| Keywords | react-native, react, native, modal, bottom sheet, bottom, sheet, scrollView, flatList, sectionList, scroll, swipe, keyboard, snap, android, ios |

## Links

- npm: https://www.npmjs.com/package/react-native-modalize
- Repository: https://github.com/jeremybarbet/react-native-modalize
- Issues: https://github.com/jeremybarbet/react-native-modalize/issues
- npm.io page: https://npm.io/package/react-native-modalize

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2022-08-10
- 2.1.0 — 2022-08-10
- 2.0.13 — 2021-12-24
- 2.0.12 — 2021-11-11
- 2.0.11 — 2021-11-07
- 2.0.10 — 2021-10-14
- 2.0.9 — 2021-10-14
- 2.0.8 — 2020-12-04
- 2.0.7 — 2020-12-03
- 2.0.6 — 2020-08-27
- 2.0.5 — 2020-07-25
- 2.0.4 — 2020-05-20
- 2.0.3 — 2020-05-08
- 2.0.2 — 2020-05-07
- 2.0.1 — 2020-05-07
- … 61 more at https://npm.io/package/react-native-modalize/versions

## README

# Modalize

[![npm version](https://badge.fury.io/js/react-native-modalize.svg)](https://badge.fury.io/js/react-native-modalize)

A highly customizable modal/bottom sheet that loves scrolling content.

This component has been built with `react-native-gesture-handler` to address the common issue of **scrolling**, **swiping** and handling the **keyboard** behaviors, you can face with react-native's modal.

This component comes with a ScrollView, the default renderer, a FlatList or a SectionList. They are all three built-in and make your life easier, just pass your content and Modalize will handle the rest for you. You can also have the possibility to pass your own custom renderer.

<p align="left">
  <img src="https://user-images.githubusercontent.com/937328/80501705-458d2d80-895f-11ea-9667-d193c135cabf.gif" height="542" alt="Simple" />
  <img src="https://user-images.githubusercontent.com/937328/80501698-42923d00-895f-11ea-8db0-da3d4f772710.gif" height="542" alt="Fixed" />
  <img src="https://user-images.githubusercontent.com/937328/80501699-432ad380-895f-11ea-9dad-22505038234e.gif" height="542" alt="Snapping" />
  <img src="https://user-images.githubusercontent.com/937328/80501647-35754e00-895f-11ea-8ce0-cb53d2985787.gif" height="542" alt="Absolute" />
  <img src="https://user-images.githubusercontent.com/937328/80501682-3efeb600-895f-11ea-9c04-64154cf77012.gif" height="542" alt="FlatList" />
  <img src="https://user-images.githubusercontent.com/937328/80501668-3a3a0200-895f-11ea-92b6-a7bc9b301a1a.gif" height="542" alt="Open" />
  <img src="https://user-images.githubusercontent.com/937328/80615701-881e3b00-8a2f-11ea-94f5-a4cbf6d13d97.gif" height="542" alt="Apple" />
  <img src="https://user-images.githubusercontent.com/937328/80501688-40c87980-895f-11ea-97db-63b9b029eab4.gif" height="542" alt="Facebook" />
  <img src="https://user-images.githubusercontent.com/937328/80501707-4625c400-895f-11ea-8436-8e89de3b437e.gif" height="542" alt="Slack" />
</p>

## Installation

```bash
yarn add react-native-modalize react-native-gesture-handler
```

<details>
  <summary>iOS</summary>

```bash
npx pod-install ios
```

</details>

<details>
  <summary>Android</summary>

#### React Native <= 0.59

Follow [this guide](https://jeremybarbet.github.io/react-native-modalize/#/INSTALLATION) to complete the Android installation.

#### React Native > 0.60

You don't need to follow the guide mentioned above because autolinking from React already did the steps.

</details>

## Usage

Here is a quick example, using the default ScrollView renderer.

```tsx
import React, { useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Modalize } from 'react-native-modalize';

export const App = () => {
  const modalizeRef = useRef<Modalize>(null);

  const onOpen = () => {
    modalizeRef.current?.open();
  };

  return (
    <>
      <TouchableOpacity onPress={onOpen}>
        <Text>Open the modal</Text>
      </TouchableOpacity>

      <Modalize ref={modalizeRef}>...your content</Modalize>
    </>
  );
};
```

## Documentation

Please check out the full [documentation available here](https://jeremybarbet.github.io/react-native-modalize) to find all about the props, methods and examples of Modalize's usage.

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