{"id":25968783,"url":"https://github.com/benjamineruvieru/react-native-pushdown-alert","last_synced_at":"2026-05-11T02:54:50.047Z","repository":{"id":279654068,"uuid":"939510505","full_name":"benjamineruvieru/react-native-pushdown-alert","owner":"benjamineruvieru","description":"A customizable pushdown alert component for React Native applications.","archived":false,"fork":false,"pushed_at":"2025-07-29T17:44:38.000Z","size":1554,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-12T06:56:03.709Z","etag":null,"topics":["alert","animation","dropdown","notification","notifications","pushdown","react-native"],"latest_commit_sha":null,"homepage":"https://docs.benjamineruvieru.com/docs/react-native-pushdown-alert","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/benjamineruvieru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2025-02-26T16:52:11.000Z","updated_at":"2025-09-17T04:08:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"f686ac48-2a3b-497f-84e0-b3b1fb1bcd04","html_url":"https://github.com/benjamineruvieru/react-native-pushdown-alert","commit_stats":null,"previous_names":["benjamineruvieru/react-native-pushdown-alert"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/benjamineruvieru/react-native-pushdown-alert","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Freact-native-pushdown-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Freact-native-pushdown-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Freact-native-pushdown-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Freact-native-pushdown-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamineruvieru","download_url":"https://codeload.github.com/benjamineruvieru/react-native-pushdown-alert/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamineruvieru%2Freact-native-pushdown-alert/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32879551,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","animation","dropdown","notification","notifications","pushdown","react-native"],"created_at":"2025-03-04T22:25:23.036Z","updated_at":"2026-05-11T02:54:50.040Z","avatar_url":"https://github.com/benjamineruvieru.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\nReact Native Push Down Alert\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-pushdown-alert\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/react-native-pushdown-alert.svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca title='License' href=\"https://github.com/benjamineruvieru/react-native-pushdown-alert/blob/master/LICENSE\" height=\"18\"\u003e\n    \u003cimg src='https://img.shields.io/badge/license-MIT-blue.svg' /\u003e\n  \u003c/a\u003e\n  \u003ca title='Tweet' href=\"https://twitter.com/intent/tweet?text=Check%20out%20this%20awesome%20React%20Native%20Push%20Down%20Alert%20Library\u0026url=https://github.com/benjamineruvieru/-pushdown-alert\u0026via=benjamin_eru\u0026hashtags=react,reactnative,opensource,github,ux\" height=\"18\"\u003e\n    \u003cimg src='https://img.shields.io/twitter/url/http/shields.io.svg?style=social' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nA customizable pushdown alert component for React Native applications. It provides a simple way to display success, error, and warning notifications with a unique pushdown animation that pushes down the entire content of app to show the notification.\n\n![demo](./assets/demo.gif)\n\n## Features\n\n- Display success, error, and warning notifications.\n- Customizable alert appearance and behavior.\n- Queue or cancel current alerts based on configuration.\n- Supports custom icons and styles.\n\n## Installation\n\nTo install the library, use npm or yarn:\n\n```bash\nnpm install react-native-pushdown-alert\n# or\nyarn add react-native-pushdown-alert\n```\n\n## Usage\n\nHere's a basic example of how to use the react-native-pushdown-alert in your application:\n\n```typescript\n\nimport { PushDownAlertPortal, showNotification} from 'react-native-pushdown-alert';\nimport { View, Button } from 'react-native';\n\nconst MyApp = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cButton\n        title=\"Show Notification Success\"\n        onPress={() =\u003e {\n          showNotification({\n            type: 'success',\n            message: 'Hi a message body',\n            title: 'Hello World',\n          });\n        }}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst config = {}\n\nconst App = () =\u003e {\n  return (\n    \u003cPushDownAlertPortal config={config}\u003e\n      \u003cMyApp /\u003e\n    \u003c/PushDownAlertPortal\u003e\n  );\n};\n\n```\n\n### Step-by-Step Guide\n\n1. Import the Components : Import PushDownAlertPortal and showNotification from the library.\n\n   ```typescript\n   import { PushDownAlertPortal } from 'react-native-pushdown-alert';\n   ```\n\n2. Place the Portal : Place the PushDownAlertPortal component as high as possible in your component tree. This ensures that alerts can be displayed over all other components.\n\n   ```typescript\n   const App = () =\u003e {\n   return (\n    \u003cPushDownAlertPortal config={config}\u003e\n      {...rest of your app}\n    \u003c/PushDownAlertPortal\u003e\n   );\n   };\n   ```\n\n3. Trigger Notifications : Use the showNotification function anywhere in your app to trigger alerts. You can call this function in response to events, such as button presses or API responses.\n   \n\u003e [!NOTE]  \n\u003e If a notification is already showing, subsequent `showNotification` calls will be queued based your chosen queuing behavior.\n\n   ```typescript\n   showNotification({\n     type: 'success',\n     message: 'Hi a message body',\n     title: 'Hello World',\n   });\n   ```\n\n## API\n\n### showNotification\n\n- Parameters :\n  - `type` : Type of the alert ( `success` , `error` , `warning` ).\n  - `title` : Title of the alert.\n  - `message` : Message body of the alert.\n\n### PushDownAlertPortal\n\n- Props :\n  - `config` : Configuration object for customizing alert behavior and appearance.\n\n## Configuration\n\nYou can customize the alert behavior and appearance by passing a configuration object to the PushDownAlertPortal component. Here are some of the available options:\n\n- `alertDisplayDuration` : Duration for which the alert is displayed.\n- `openAnimationDuration` : Duration of the open animation.\n- `closeAnimationDuration` : Duration of the close animation.\n- `alertQueueBehaviour` : Determines how alerts are handled when a notification is already showing. Options include:\n  - `queue` : New alerts are added to a queue and displayed sequentially.\n  - `cancelCurrent` : The current alert is dismissed, and the new alert is displayed immediately.\n- `titleTextStyle` : Custom style for the alert title.\n- `messageTextStyle` : Custom style for the alert message.\n- `successConfig` , `errorConfig` , `warningConfig` : Custom configurations for each alert type, including icons and background colors.\n\n### Sample Configuration\n\nHere's an example of how you can customize the alert configurations:\n\n```typescript\nconst config = {\n  alertDisplayDuration: 4000,\n  openAnimationDuration: 500,\n  closeAnimationDuration: 500,\n  alertQueueBehaviour: 'queue',\n  titleTextStyle: { fontSize: 18, fontWeight: 'bold', color: '#fff' },\n  messageTextStyle: { fontSize: 16, color: '#fff' },\n  successConfig: {\n    icon: \u003cCustomSuccessIcon /\u003e, // Replace with your custom icon component\n    backgroundColor: '#4CAF50', // Green background for success alerts\n  },\n  errorConfig: {\n    icon: \u003cCustomErrorIcon /\u003e, // Replace with your custom icon component\n    backgroundColor: '#F44336', // Red background for error alerts\n  },\n  warningConfig: {\n    icon: \u003cCustomWarningIcon /\u003e, // Replace with your custom icon component\n    backgroundColor: '#FFC107', // Yellow background for warning alerts\n  },\n};\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamineruvieru%2Freact-native-pushdown-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamineruvieru%2Freact-native-pushdown-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamineruvieru%2Freact-native-pushdown-alert/lists"}