- 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"
- 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!
yarn add react-native-push-notification-popup # recommended
npm install react-native-push-notification-popup --save
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}>
<NotificationPopup ref={ref => this.popup = ref} />
<MaybeYourNavigator />
</View>
);
}
// ...
// Render function
const renderCustomPopup = ({ appIconSource, appTitle, timeText, title, body }) => (
<View>
<Text>{title}</Text>
<Text>{body}</Text>
</View>
);
class MyComponent extends React.Component {
render() {
return (
<View style={styles.container}>
<NotificationPopup
ref={ref => this.popup = ref}
renderPopupContent={renderCustomPopup} />
</View>
);
}
// ...
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
});
}
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) |
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 |
- 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
- Clone this repo
- Run
yarn --production
- (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
"react-native-push-notification-popup": "file:../react-native-push-notification-popup"
- Try it
- Run
yarn
(Install devDependencies) - Run
yarn run lint
MIT License. © Carson Wah 2018