{"id":23557610,"url":"https://github.com/carsonwah/react-native-push-notification-popup","last_synced_at":"2025-04-05T12:03:36.720Z","repository":{"id":32419908,"uuid":"132661731","full_name":"carsonwah/react-native-push-notification-popup","owner":"carsonwah","description":"A \u003cNotificationPopup/\u003e component for presenting your own push notification in react-native app","archived":false,"fork":false,"pushed_at":"2023-09-19T17:23:43.000Z","size":258,"stargazers_count":145,"open_issues_count":22,"forks_count":39,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T11:11:46.165Z","etag":null,"topics":["android","dialog","ios","javascript","modal","popup","react-native","react-native-component"],"latest_commit_sha":null,"homepage":"","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/carsonwah.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}},"created_at":"2018-05-08T20:33:31.000Z","updated_at":"2025-03-07T03:09:10.000Z","dependencies_parsed_at":"2024-06-18T15:52:12.234Z","dependency_job_id":null,"html_url":"https://github.com/carsonwah/react-native-push-notification-popup","commit_stats":{"total_commits":54,"total_committers":8,"mean_commits":6.75,"dds":"0.14814814814814814","last_synced_commit":"c3e0221e2c86fe09c77a99c1ff76395aa30c7047"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carsonwah%2Freact-native-push-notification-popup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carsonwah%2Freact-native-push-notification-popup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carsonwah%2Freact-native-push-notification-popup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carsonwah%2Freact-native-push-notification-popup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carsonwah","download_url":"https://codeload.github.com/carsonwah/react-native-push-notification-popup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332560,"owners_count":20921853,"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":["android","dialog","ios","javascript","modal","popup","react-native","react-native-component"],"created_at":"2024-12-26T15:14:52.680Z","updated_at":"2025-04-05T12:03:36.700Z","avatar_url":"https://github.com/carsonwah.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Push Notification Popup\n\n![npm version](https://img.shields.io/npm/v/react-native-push-notification-popup)\n![npm downloads](https://img.shields.io/npm/dm/react-native-push-notification-popup)\n![npm license](https://img.shields.io/npm/l/react-native-push-notification-popup)\n![maintained](https://img.shields.io/badge/Maintained%3F-yes-success)\n![ask me](https://img.shields.io/badge/Ask%20me-anything-27b092)\n\n![iOS Preview](https://github.com/carsonwah/_file_hosting/blob/master/react-native-push-notification-popup/ios-example.gif?raw=true) ![Android Preview](https://github.com/carsonwah/_file_hosting/blob/master/react-native-push-notification-popup/android-example.gif?raw=true)\n\n## Features\n\n- Support \"pan\" gesture\n- Support \"onPress\" gesture feedback\n- Written in pure-JS using official react-native `Animation` package\n    - *Which means it supports all Expo/CRNA apps*\n- Support iPhone X, XS, Max (yeah that notch)\n- Support Android native \"elevation\"\n\n## Motivations\n\n[Blog post](https://medium.com/@carsonwah/show-push-notification-popup-in-react-native-19db965a5603)\n\n1. In some apps, you may just want to display reminders to user, without going through those troublesome push notification setups\n2. Expo/CNRA apps [cannot display push notification while app is in foreground](https://docs.expo.io/versions/v27.0.0/guides/push-notifications#notification-handling-timing)\n3. Even if you eject, you still need to configure [iOS](https://stackoverflow.com/questions/14872088/get-push-notification-while-app-in-foreground-ios) and [Android](https://stackoverflow.com/questions/38451235/how-to-handle-the-fire-base-notification-when-app-is-in-foreground) separately with native codes\n\nThis package is here to help. Just show your own notification popup to your users!\n\n## Installation\n\n```bash\n# yarn, recommended\nyarn add react-native-push-notification-popup\n\n# or npm\nnpm install react-native-push-notification-popup --save\n```\n\n## Usage\n\n### Declare Component\n\nPut it in a wrapper component. (Maybe where you handle your incoming push notifications)\n\n```javascript\nimport NotificationPopup from 'react-native-push-notification-popup';\n\nclass MyComponent extends React.Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cMaybeYourNavigator /\u003e\n        \u003cNotificationPopup ref={ref =\u003e this.popup = ref} /\u003e\n      \u003c/View\u003e\n    );\n  }\n// ...\n```\n\n\u003e **IMPORTANT**: Remember to put it on the **bottom of other components**, because React render from back to front in order of declaration. We do not use `zIndex` becuase it is [problematic on Android](https://github.com/carsonwah/react-native-push-notification-popup/issues/21).\n\n#### Optional: Customize your popup\n\n```javascript\n// Render function\nconst renderCustomPopup = ({ appIconSource, appTitle, timeText, title, body }) =\u003e (\n  \u003cView\u003e\n    \u003cText\u003e{title}\u003c/Text\u003e\n    \u003cText\u003e{body}\u003c/Text\u003e\n    \u003cButton title='My button' onPress={() =\u003e console.log('Popup button onPress!')} /\u003e\n  \u003c/View\u003e\n);\n\nclass MyComponent extends React.Component {\n  render() {\n      return (\n        \u003cView style={styles.container}\u003e\n          \u003cNotificationPopup\n            ref={ref =\u003e this.popup = ref}\n            renderPopupContent={renderCustomPopup}\n            shouldChildHandleResponderStart={true}\n            shouldChildHandleResponderMove={true}\n            isSkipStatusBarPadding={true} /\u003e\n        \u003c/View\u003e\n      );\n    }\n// ...\n```\n\n### Show it!\n\n```javascript\ncomponentDidMount() {\n  this.popup.show({\n    onPress: function() {console.log('Pressed')},\n    appIconSource: require('./assets/icon.jpg'),\n    appTitle: 'Some App',\n    timeText: 'Now',\n    title: 'Hello World',\n    body: 'This is a sample message.\\nTesting emoji 😀',\n    slideOutTime: 5000\n  });\n}\n```\n\n### Props\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| **`renderPopupContent`** | function \u003cbr /\u003e `(options?: { appIconSource?: ImageSourcePropType; appTitle?: string; timeText?: string; title?: string;body?: string; }) =\u003e React.ReactElement\u003cany\u003e` | null | Render your own custom popup body (Optional) |\n| **`shouldChildHandleResponderStart`** | boolean | false | By default, parent popup will prevent bubbling event to child. This should be set to true if you have button inside your custom popup that wants to receive the event. |\n| **`shouldChildHandleResponderMove`** | boolean | false | By default, parent popup will prevent bubbling event to child. This should be set to true if you have button inside your custom popup that wants to receive the event. |\n| **`isSkipStatusBarPadding`** | boolean | false | Set this to true if your app is an Android app with non-translucent StatusBar. ([See #35](https://github.com/carsonwah/react-native-push-notification-popup/issues/35)) |\n\n### Methods\n\n#### .show()\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| **`onPress`** | Function | null | Callback to be called when user press the popup |\n| **`appIconSource`** | [Image source](https://facebook.github.io/react-native/docs/image.html#source) | null | Icon on the upper left |\n| **`appTitle`** | String | '' | Usually your app name, but you can also customize it |\n| **`timeText`** | String | '' | Text on the upper right |\n| **`title`** | String | '' | Message title |\n| **`body`** | String | '' | Message body (support multi-line) |\n| **`slideOutTime`** | Number | 4000 | Time until notification slides out |\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=carsonwah/react-native-push-notification-popup\u0026type=Date)](https://star-history.com/#carsonwah/react-native-push-notification-popup\u0026Date)\n\n## Roadmap\n\n- [ ] Add testing\n- [ ] Add example/ project\n- [ ] Support showing it globally\n- [ ] Customizing props: speed, duration, etc\n- [ ] Support image on the right-side\n- [ ] Android material design style\n- [ ] Other types of popup, e.g. without app icon\n- [ ] More usage examples\n- [ ] Identify peerDependencies on react-native\n\n## Contributing\n\n### Using demo project\n\n- Refer to [this demo project](https://github.com/carsonwah/react-native-push-notification-popup-demo-local) for local debugging\n\n### General Steps\n\n1. Clone this repo\n2. Run `yarn --production`\n   1. *(Installing dependencies without --production will include devDependencies (e.g. react-native), which causes crashes)*\n3. Create a react-native project next to it\n4. Add dependency to package.json\n   1. `\"react-native-push-notification-popup\": \"file:../react-native-push-notification-popup\"`\n5. Try it\n6. Re-run `yarn --production` whenever there is any code change\n\n### Linting\n\n1. Run `yarn` (Install devDependencies)\n2. Run `yarn run lint`\n\n## License\n\n[MIT License](https://opensource.org/licenses/mit-license.html). © Carson Wah 2018\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarsonwah%2Freact-native-push-notification-popup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarsonwah%2Freact-native-push-notification-popup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarsonwah%2Freact-native-push-notification-popup/lists"}