{"id":4147,"url":"https://github.com/robcalcroft/react-native-in-app-notification","last_synced_at":"2025-09-09T21:57:35.024Z","repository":{"id":47340817,"uuid":"89100365","full_name":"robcalcroft/react-native-in-app-notification","owner":"robcalcroft","description":":bell: Customisable in-app notification component for React Native","archived":false,"fork":false,"pushed_at":"2022-09-05T21:26:18.000Z","size":182,"stargazers_count":269,"open_issues_count":24,"forks_count":78,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-27T17:08:56.335Z","etag":null,"topics":["android","dropdown","dropdown-alert","in-app-notification","ios","notifications","react","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/robcalcroft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":"https://www.paypal.me/robcalcroft"}},"created_at":"2017-04-22T21:31:28.000Z","updated_at":"2025-03-28T18:52:04.000Z","dependencies_parsed_at":"2022-08-25T13:51:38.081Z","dependency_job_id":null,"html_url":"https://github.com/robcalcroft/react-native-in-app-notification","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/robcalcroft/react-native-in-app-notification","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-native-in-app-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-native-in-app-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-native-in-app-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-native-in-app-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robcalcroft","download_url":"https://codeload.github.com/robcalcroft/react-native-in-app-notification/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robcalcroft%2Freact-native-in-app-notification/sbom","scorecard":{"id":779916,"data":{"date":"2025-08-11","repo":{"name":"github.com/robcalcroft/react-native-in-app-notification","commit":"e6ce98e46ea82757fc74d32f1bef1f8e8a081058"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.4,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":5,"reason":"Found 6/12 approved changesets -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"12 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T04:40:01.426Z","repository_id":47340817,"created_at":"2025-08-23T04:40:01.426Z","updated_at":"2025-08-23T04:40:01.426Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274367808,"owners_count":25272302,"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","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"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":["android","dropdown","dropdown-alert","in-app-notification","ios","notifications","react","react-native"],"created_at":"2024-01-05T20:17:02.540Z","updated_at":"2025-09-09T21:57:35.000Z","avatar_url":"https://github.com/robcalcroft.png","language":"JavaScript","funding_links":["https://www.paypal.me/robcalcroft"],"categories":["Components","Others","JavaScript"],"sub_categories":["UI"],"readme":"# react-native-in-app-notification [![npm version](https://badge.fury.io/js/react-native-in-app-notification.svg)](https://badge.fury.io/js/react-native-in-app-notification)\n\n\u003e :bell: Customisable in-app notification component for React Native\n\n## Contents\n\n1. [UI](#ui)\n2. [Install](#install)\n3. [Versions](#versions)\n4. [Props](#props)\n5. [Usage](#usage)\n\n## UI\n\nThe basic look of `react-native-in-app-notification`:\n\n![A GIF showing what react-native-in-app-notification can do](http://i.imgur.com/3PILcKg.gif)\n\nWhat you can make `react-native-in-app-notification` do with a customised component:\n\n![A GIF showing what react-native-in-app-notification can do](http://i.imgur.com/k0SBlrW.gif)\n\n## Install\n\n```bash\nyarn add react-native-in-app-notification\n```\n\nOR\n\n```bash\nnpm install react-native-in-app-notification --save\n```\n\n### Android\n\nFor Android you need to add the `VIBRATE` permission to your app `AndroidManifest.xml`\n```xml\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    package=\"your.app.package.name\"\u003e\n\n    \u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e\n    \u003cuses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/\u003e\n\n    \u003c!-- Required by react-native-in-app-notification --\u003e\n    \u003cuses-permission android:name=\"android.permission.VIBRATE\" /\u003e\n\n    ...\n\u003c/manifest\u003e\n```\n\n## Versions\n\n| version | RN        |\n| ------- | :-------- |\n| \u003e=3.0.0 | \u003e= 0.54.0 |\n| \u003c3.0.0  | \u003e= 0.43.4 |\n\n## Props\n\n| Prop Name                 | Prop Description                                    | Data Type              | Required    | Default                     |\n| ------------------------- | --------------------------------------------------- | ---------------------- | ----------- | --------------------------- |\n| closeInterval             | How long the notification stays visible             | Number                 | No          | `4000`                      |\n| openCloseDuration         | The length of the open / close animation            | Number                 | No          | `200`                       |\n| height                    | The height of the Notification component            | Number                 | No          | `80`                        |\n| backgroundColour          | The background colour of the Notification component | String                 | No          | `white`                     |\n| iconApp                   | App Icon                                            | ImageSourcePropType    | No          | `null`                      |\n| notificationBodyComponent | **See below about NotificationBody**                | React Node or Function | Recommended | `./DefaultNotificationBody` |\n\n### NotificationBody\n\nThe notification body is what is rendered inside the main Notification component and gives you the ability to customise how the notification looks. You can use the default notification body component in `./DefaultNotificationBody.js` as inspiration and guidance.\n\nYour `notificationBodyComponent` component is given five props:\n\n| Prop Name         | Prop Description                                              | Data Type           | Default |\n| ----------------- | ------------------------------------------------------------- | ------------------- | ------- |\n| title             | The title passed to `NotificationRef.show`                    | String              | `''`    |\n| message           | The message passed to `NotificationRef.show`                  | String              | `''`    |\n| onPress           | The callback passed to `NotificationRef.show`                 | Function            | `null`  |\n| icon              | Icon for notification passed to `NotificationRef.show`        | ImageSourcePropType | `null`  |\n| vibrate           | Vibrate on show notification passed to `NotificationRef.show` | Boolean             | `true`  |\n| additionalProps   | Any additional props passed to `NotificationBodyComponent`    | Object              | `null`  |\n\n## Usage\n\nAdding `react-native-in-app-notification` is simple;\nJust wrap you main `App` component with the `InAppNotificationProvider` component exported from this module.\n\n```javascript\nimport { InAppNotificationProvider } from 'react-native-in-app-notification';\n\nimport App from './App.js';\n\nclass AppWithNotifications extends Component {\n  render() {\n    return (\n      \u003cInAppNotificationProvider\u003e\n        \u003cApp /\u003e\n      \u003c/InAppNotificationProvider\u003e\n    );\n  }\n}\n```\n\nWhen you want to show the notification, just wrap the component which needs to display a notification with the `withInAppNotification` HOC and call the `.showNotification` methods from its props.\n\n`.showNotification` can take four arguments (all of which are optional):\n\n- `title`\n- `message`\n- `onPress`\n- `additionalProps`\n\n**N.B:** you should probably include at least one of `title` or `message`!\n\n`onPress` doesn't need to be used for passive notifications and you can use `onClose` in your `NotificationBody` component to allow your users to close the notification.\n\n`additionalProps` can be used to pass arbitory props to `NotificationBody` component. Can be accessed in `NotificationBody` component via `props.additionalProps`.\n\n```javascript\nimport React, { Component } from 'react';\nimport { View, Text, TouchableHighlight } from 'react-native';\nimport { withInAppNotification } from 'react-native-in-app-notification';\n\nclass MyApp extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003eThis is my app\u003c/Text\u003e\n        \u003cTouchableHighlight\n          onPress={() =\u003e {\n            this.props.showNotification({\n              title: 'You pressed it!',\n              message: 'The notification has been triggered',\n              onPress: () =\u003e Alert.alert('Alert', 'You clicked the notification!'),\n              additionalProps: { type: 'error' },\n            });\n          }}\n        \u003e\n          \u003cText\u003eClick me to trigger a notification\u003c/Text\u003e\n        \u003c/TouchableHighlight\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nexport default withInAppNotification(MyApp);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobcalcroft%2Freact-native-in-app-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobcalcroft%2Freact-native-in-app-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobcalcroft%2Freact-native-in-app-notification/lists"}