{"id":3973,"url":"https://github.com/testshallpass/react-native-dropdownalert","last_synced_at":"2025-05-14T10:07:37.249Z","repository":{"id":9434999,"uuid":"62021805","full_name":"testshallpass/react-native-dropdownalert","owner":"testshallpass","description":"An alert to notify users about an error or something else","archived":false,"fork":false,"pushed_at":"2024-12-08T02:50:27.000Z","size":35797,"stargazers_count":1870,"open_issues_count":22,"forks_count":253,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-05-12T05:36:47.016Z","etag":null,"topics":["alert","dropdown","notification","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/testshallpass.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-06-27T03:09:07.000Z","updated_at":"2025-05-09T13:25:59.000Z","dependencies_parsed_at":"2023-12-15T01:47:56.557Z","dependency_job_id":"4e963a12-9c21-4581-8446-3780bb4ce70f","html_url":"https://github.com/testshallpass/react-native-dropdownalert","commit_stats":{"total_commits":361,"total_committers":32,"mean_commits":11.28125,"dds":"0.32409972299168976","last_synced_commit":"fc0a750de62761cc1693b75fba8fcca2483a882f"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testshallpass%2Freact-native-dropdownalert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testshallpass%2Freact-native-dropdownalert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testshallpass%2Freact-native-dropdownalert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testshallpass%2Freact-native-dropdownalert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/testshallpass","download_url":"https://codeload.github.com/testshallpass/react-native-dropdownalert/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254120010,"owners_count":22017952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","dropdown","notification","react-native"],"created_at":"2024-01-05T20:16:57.324Z","updated_at":"2025-05-14T10:07:37.205Z","avatar_url":"https://github.com/testshallpass.png","language":"TypeScript","readme":"# react-native-dropdownalert\n\n[![Platform](https://img.shields.io/badge/-react--native-grey.svg?style=for-the-badge\u0026logo=react)](https://reactnative.dev)\n[![npm version](https://img.shields.io/npm/v/react-native-dropdownalert.svg?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/react-native-dropdownalert)\n[![npm version](https://img.shields.io/npm/dm/react-native-dropdownalert.svg?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/react-native-dropdownalert)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://raw.github.com/testshallpass/react-native-dropdownalert/master/LICENSE)\n[![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)\n\n![screenshot](./screenshots/demo.gif)\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Support](#support)\n- [Using children prop](#using-children-prop)\n- [Caveats](#caveats)\n- [More Examples](./example/App.tsx)\n\nAn 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.\n\n## Installation\n\n- `yarn add react-native-dropdownalert`\n- `npm i react-native-dropdownalert --save`\n\n## Usage\n\nimport the library\n\n```javascript\nimport DropdownAlert, {\n  DropdownAlertData,\n  DropdownAlertType,\n} from 'react-native-dropdownalert';\n```\n\ncreate an alert promise function variable\n\n```javascript\nlet alert = (_data: DropdownAlertData) =\u003e new Promise\u003cDropdownAlertData\u003e(res =\u003e res);\n```\n\nadd the component as the last component in the document tree so it overlaps other UI components and set alert prop with alert function\n\n```javascript\n\u003cDropdownAlert alert={func =\u003e (alert = func)} /\u003e\n```\n\ninvoke alert\n\n```javascript\nconst alertData = await alert({\n  type: DropdownAlertType.Error,\n  title: 'Error',\n  message: 'Something went wrong.',\n});\n```\n\n## Support\n\n| react minium version | react-native minium version | package version | reason              |\n| :------------------: | :-------------------------: | :-------------: | ------------------- |\n|       v16.8.0        |           v0.61.0           |     v5.0.0      | use react hooks     |\n|       v16.0.0        |           v0.50.0           |     v3.2.0      | use `SafeAreaView`  |\n|   v16.0.0-alpha.6    |           v0.44.0           |     v2.12.0     | use `ViewPropTypes` |\n\n## Using `children` prop\n\nOption 1 pass child component(s) like so:\n\n```javascript\n\u003cDropdownAlert\u003e{/* insert child component(s) */}\u003c/DropdownAlert\u003e\n```\n\nOption 2 pass child component(s) like so:\n\n```javascript\n\u003cDropdownAlert children={/* insert child component(s) */} /\u003e\n```\n\nEither 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.\n\n## Caveats\n\n- Modals can overlap `DropdownAlert`` if it is not inside the modal's document tree.\n- It is important you place the `DropdownAlert` below the `StackNavigator`.\n\n\u003e Inspired by: [RKDropdownAlert](https://github.com/cwRichardKim/RKDropdownAlert)\n","funding_links":[],"categories":["Components","TypeScript","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftestshallpass%2Freact-native-dropdownalert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftestshallpass%2Freact-native-dropdownalert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftestshallpass%2Freact-native-dropdownalert/lists"}