npmpackage.info

Gathering detailed insights and metrics for react-native-push-notification-popup

Other packages similar to react-native-push-notification-popup

react-native-lw-notify-headsup

0.1.5

fullscreen notifications in react-native

Gathering detailed insights and metrics for react-native-push-notification-popup

react-native-push-notification-popup - 1.7.0 | npmpackage.info

react-native-push-notification-popup

A <NotificationPopup/> component for presenting your own push notification in react-native app

1.7.0

145

MIT

JavaScript

23.63 kB

Installations

npm install react-native-push-notification-popup

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.17.0

NPM Version

9.6.7 Pull Requests

Open

16

Total

37

Closed

7

Merged

14

Issues

Open

6

Total

22

Closed

16

Releases

v1.7.0

Updated on Sep 19, 2023

v1.6.1

Updated on Jun 14, 2022

v1.6.0

Updated on Aug 08, 2020

v1.4.0

Updated on Sep 01, 2019

v1.3.0

Updated on Jul 01, 2019

v1.2.0

Updated on Jan 02, 2019

View All 9 releases

Languages

JavaScript

JavaScript (100%)

Developer

carsonwah

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

145 Stars

54 Commits

38 Forks

2 Watchers

22 Branches

7 Contributors

Updated on Mar 07, 2025

Maintainers

View All 7 Contributors

Package Meta Information

Latest Version

1.7.0

Package Id

react-native-push-notification-popup@1.7.0

Unpacked Size

23.63 kB

Size

7.69 kB

File Count

NPM Version

9.6.7

Node Version

18.17.0

Published on

Aug 17, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

prop-types

Dev Dependencies

babel-eslint babel-preset-react-native eslint eslint-plugin-react react react-native

React Native Push Notification Popup

npm version npm downloads npm license

iOS Preview Android Preview

Features

Support "pan" gesture
Support "onPress" gesture feedback
Written in pure-JS using official react-native Animation package
- Which means it supports all Expo/CRNA apps
Support iPhone X, XS, Max (yeah that notch)
Support Android native "elevation"

Motivations

Blog post

In some apps, you may just want to display reminders to user, without going through those troublesome push notification setups
Expo/CNRA apps cannot display push notification while app is in foreground
Even if you eject, you still need to configure iOS and Android separately with native codes

This package is here to help. Just show your own notification popup to your users!

Installation

1# yarn, recommended
2yarn add react-native-push-notification-popup
3
4# or npm
5npm install react-native-push-notification-popup --save

Usage

Declare Component

Put it in a wrapper component. (Maybe where you handle your incoming push notifications)

1import NotificationPopup from 'react-native-push-notification-popup';
2
3class MyComponent extends React.Component {
4  render() {
5    return (
6      <View style={styles.container}>
7        <MaybeYourNavigator />
8        <NotificationPopup ref={ref => this.popup = ref} />
9      </View>
10    );
11  }
12// ...

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.

Optional: Customize your popup

1// Render function
2const renderCustomPopup = ({ appIconSource, appTitle, timeText, title, body }) => (
3  <View>
4    <Text>{title}</Text>
5    <Text>{body}</Text>
6    <Button title='My button' onPress={() => console.log('Popup button onPress!')} />
7  </View>
8);
9
10class MyComponent extends React.Component {
11  render() {
12      return (
13        <View style={styles.container}>
14          <NotificationPopup
15            ref={ref => this.popup = ref}
16            renderPopupContent={renderCustomPopup}
17            shouldChildHandleResponderStart={true}
18            shouldChildHandleResponderMove={true}
19            isSkipStatusBarPadding={true} />
20        </View>
21      );
22    }
23// ...

Show it!

1componentDidMount() {
2  this.popup.show({
3    onPress: function() {console.log('Pressed')},
4    appIconSource: require('./assets/icon.jpg'),
5    appTitle: 'Some App',
6    timeText: 'Now',
7    title: 'Hello World',
8    body: 'This is a sample message.\nTesting emoji 😀',
9    slideOutTime: 5000
10  });
11}

Props

Param	Type	Default	Description
`renderPopupContent`	function `(options?: { appIconSource?: ImageSourcePropType; appTitle?: string; timeText?: string; title?: string;body?: string; }) => React.ReactElement<any>`	null	Render your own custom popup body (Optional)
`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.
`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.
`isSkipStatusBarPadding`	boolean	false	Set this to true if your app is an Android app with non-translucent StatusBar. (See #35)

Methods

.show()

Param	Type	Default	Description
`onPress`	Function	null	Callback to be called when user press the popup
`appIconSource`	Image source	null	Icon on the upper left
`appTitle`	String	''	Usually your app name, but you can also customize it
`timeText`	String	''	Text on the upper right
`title`	String	''	Message title
`body`	String	''	Message body (support multi-line)
`slideOutTime`	Number	4000	Time until notification slides out

Roadmap

Add testing
Add example/ project
Support showing it globally
Customizing props: speed, duration, etc
Support image on the right-side
Android material design style
Other types of popup, e.g. without app icon
More usage examples
Identify peerDependencies on react-native

Contributing

Using demo project

Refer to this demo project for local debugging

General Steps

Clone this repo
Run yarn --production
1. (Installing dependencies without --production will include devDependencies (e.g. react-native), which causes crashes)
Create a react-native project next to it
Add dependency to package.json
1. "react-native-push-notification-popup": "file:../react-native-push-notification-popup"
Try it
Re-run yarn --production whenever there is any code change

Linting

Run yarn (Install devDependencies)
Run yarn run lint

License

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

61 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
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-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
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-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More