React Native Push Notification Popup Component
npm install react-native-push-notification-popupAnimation package
bash
yarn, recommended
yarn add react-native-push-notification-popup
or npm
npm install react-native-push-notification-popup --save
`
Usage
$3
Put it in a wrapper component. (Maybe where you handle your incoming push notifications)
`javascript
import NotificationPopup from 'react-native-push-notification-popup';
class MyComponent extends React.Component {
render() {
return (
this.popup = ref} />
);
}
// ...
`
> 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
`javascript
// Render function
const renderCustomPopup = ({ appIconSource, appTitle, timeText, title, body }) => (
{title}
{body}
);
class MyComponent extends React.Component {
render() {
return (
renderPopupContent={renderCustomPopup}
shouldChildHandleResponderStart={true}
shouldChildHandleResponderMove={true}
isSkipStatusBarPadding={true} />
);
}
// ...
`
$3
`javascript
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
});
}
`
$3
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| renderPopupContent | function
(options?: { appIconSource?: ImageSourcePropType; appTitle?: string; timeText?: string; title?: string;body?: string; }) => React.ReactElement | 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) |
$3
#### .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
$3
- Refer to this demo project for local debugging
$3
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
$3
1. Run yarn (Install devDependencies)
2. Run yarn run lint`