react-native-push-notification-popup

React Native Push Notification Popup

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 (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 add react-native-push-notification-popup  # recommended
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)

  render() {
    return (
      <View style={styles.container}>
        <NotificationPopup ref={ref => this.popup = ref} />
        <MaybeYourNavigator />
      </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 😀',
  });
}

Props

(Customizing options coming soon)

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)

Roadmap

• 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
• Transparent Background
• Identify peerDependencies on react-native

License

MIT License. © Carson Wah 2018