Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/testshallpass/react-native-dropdownalert

An alert to notify users about an error or something else
https://github.com/testshallpass/react-native-dropdownalert

alert dropdown notification react-native

Last synced: about 9 hours ago
JSON representation

An alert to notify users about an error or something else

Host: GitHub
URL: https://github.com/testshallpass/react-native-dropdownalert
Owner: testshallpass
License: mit
Created: 2016-06-27T03:09:07.000Z (over 8 years ago)
Default Branch: main
Last Pushed: 2023-12-18T16:07:24.000Z (12 months ago)
Last Synced: 2024-10-29T15:33:16.629Z (about 1 month ago)
Topics: alert, dropdown, notification, react-native
Language: TypeScript
Homepage:
Size: 34.8 MB
Stars: 1,863
Watchers: 15
Forks: 253
Open Issues: 20
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-react-native - react-native-dropdownalert ★894 - A simple drop down alert with 4 pre-defined types. (Components / UI)
awesome-reactnative-ui - react-native-dropdownalert - native-dropdownalert/master/screenshots/demo.gif)| (Others)
awesome-react-native - react-native-dropdownalert ★894 - A simple drop down alert with 4 pre-defined types. (Components / UI)
awesome-reactnative-ui - react-native-dropdownalert - native-dropdownalert/master/screenshots/demo.gif)| (Others)
awesome-react-native - react-native-dropdownalert ★894 - A simple drop down alert with 4 pre-defined types. (Components / UI)
awesome-react-native-ui - react-native-dropdownalert ★132 - A simple drop down alert with 4 pre-defined types. (Components / UI)
awesome-react-native - react-native-dropdownalert ★894 - A simple drop down alert with 4 pre-defined types. (Components / UI)

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(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

 (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

{/* insert child component(s) */}

```

Option 2 pass child component(s) like so:

```javascript

```

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)