# react-native-dropdownalert

> An alert to notify users about an error or something else.

Latest version **5.2.0** (published 2025-07-12) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 5.2.0 |
| Published | 2025-07-12 |
| First published | 2016-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1874 |
| Author | Brian Sinnicke |
| Maintainers | testshallpass |
| Keywords | react-native, ios, android, dropdown, alert, dismiss, error, info, warn, success |

## Links

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

## Alternatives

- [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads
- [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads
- [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads
- [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads
- [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads

## Recent versions

- 5.2.0 (latest) — 2025-07-12
- 5.1.0 — 2023-08-08
- 5.0.0 — 2023-07-31
- 4.5.1 — 2022-01-04
- 4.5.0 — 2021-12-24
- 4.4.0 — 2021-12-23
- 4.3.0 — 2020-07-13
- 4.2.1 — 2019-12-27
- 4.2.0 — 2019-08-23
- 4.1.1 — 2019-08-12
- 4.1.0 — 2019-06-28
- 4.0.2 — 2019-06-17
- 4.0.1 — 2019-06-08
- 4.0.0 — 2019-06-07
- 3.11.0 — 2019-05-09
- … 48 more at https://npm.io/package/react-native-dropdownalert/versions

## README

# react-native-dropdownalert

[![Platform](https://img.shields.io/badge/-react--native-grey.svg?style=for-the-badge&logo=react)](https://reactnative.dev)
[![npm version](https://img.shields.io/npm/v/react-native-dropdownalert.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-native-dropdownalert)
[![npm version](https://img.shields.io/npm/dm/react-native-dropdownalert.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-native-dropdownalert)
[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://raw.github.com/testshallpass/react-native-dropdownalert/master/LICENSE)
[![CI](https://github.com/testshallpass/react-native-dropdownalert/actions/workflows/ci.yml/badge.svg)](https://github.com/testshallpass/react-native-dropdownalert/actions/workflows/ci.yml)

![screenshot](./screenshots/demo.gif)

## Table of contents

- [Installation](#installation)
- [Usage](#usage)
- [Support](#support)
- [Using children prop](#using-children-prop)
- [Caveats](#caveats)
- [More Examples](./example/App.tsx)

An alert to notify users about an error or something else. It can be dismissed by press, cancel, automatic, pan gesture or programmatic. It can be customized and/or you can build your own alert (BYOA) - see [DropdownAlertProps](./DropdownAlert.tsx) on what's available.

## Installation

- `yarn add react-native-dropdownalert`
- `npm i react-native-dropdownalert --save`

## Usage

import the library

```javascript
import DropdownAlert, {
  DropdownAlertData,
  DropdownAlertType,
} from 'react-native-dropdownalert';
```

create an alert promise function variable

```javascript
let alert = (_data: DropdownAlertData) => new Promise<DropdownAlertData>(res => res);
```

add the component as the last component in the document tree so it overlaps other UI components and set alert prop with alert function

```javascript
<DropdownAlert alert={func => (alert = func)} />
```

invoke alert

```javascript
const alertData = await alert({
  type: DropdownAlertType.Error,
  title: 'Error',
  message: 'Something went wrong.',
});
```

## Support

| react minium version | react-native minium version | package version | reason              |
| :------------------: | :-------------------------: | :-------------: | ------------------- |
|       v16.8.0        |           v0.61.0           |     v5.0.0      | use react hooks     |
|       v16.0.0        |           v0.50.0           |     v3.2.0      | use `SafeAreaView`  |
|   v16.0.0-alpha.6    |           v0.44.0           |     v2.12.0     | use `ViewPropTypes` |

## Using `children` prop

Option 1 pass child component(s) like so:

```javascript
<DropdownAlert>{/* insert child component(s) */}</DropdownAlert>
```

Option 2 pass child component(s) like so:

```javascript
<DropdownAlert children={/* insert child component(s) */} />
```

Either way `DropdownAlert` will render these instead of the pre-defined child components when alert is invoked. Check out the iOS and Android notifications in example project.

## Caveats

- Modals can overlap `DropdownAlert`` if it is not inside the modal's document tree.
- It is important you place the `DropdownAlert` below the `StackNavigator`.

> Inspired by: [RKDropdownAlert](https://github.com/cwRichardKim/RKDropdownAlert)

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