Skip to content

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

License

Notifications You must be signed in to change notification settings

carsonwah/react-native-push-notification-popup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

54 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

React Native Push Notification Popup

npm version npm downloads npm license maintained ask me

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

  1. In some apps, you may just want to display reminders to user, without going through those troublesome push notification setups
  2. Expo/CNRA apps cannot display push notification while app is in foreground
  3. 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

# yarn, recommended
yarn add react-native-push-notification-popup

# or npm
npm install react-native-push-notification-popup --save

Usage

Declare Component

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

import NotificationPopup from 'react-native-push-notification-popup';

class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MaybeYourNavigator />
        <NotificationPopup ref={ref => this.popup = ref} />
      </View>
    );
  }
// ...

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

// Render function
const renderCustomPopup = ({ appIconSource, appTitle, timeText, title, body }) => (
  <View>
    <Text>{title}</Text>
    <Text>{body}</Text>
    <Button title='My button' onPress={() => console.log('Popup button onPress!')} />
  </View>
);

class MyComponent extends React.Component {
  render() {
      return (
        <View style={styles.container}>
          <NotificationPopup
            ref={ref => this.popup = ref}
            renderPopupContent={renderCustomPopup}
            shouldChildHandleResponderStart={true}
            shouldChildHandleResponderMove={true}
            isSkipStatusBarPadding={true} />
        </View>
      );
    }
// ...

Show it!

componentDidMount() {
  this.popup.show({
    onPress: function() {console.log('Pressed')},
    appIconSource: require('./assets/icon.jpg'),
    appTitle: 'Some App',
    timeText: 'Now',
    title: 'Hello World',
    body: 'This is a sample message.\nTesting emoji ๐Ÿ˜€',
    slideOutTime: 5000
  });
}

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

Star History

Star History Chart

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

General Steps

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

Linting

  1. Run yarn (Install devDependencies)
  2. Run yarn run lint

License

MIT License. ยฉ Carson Wah 2018