diff --git a/Notification.js b/Notification.js index 7328282..2543857 100644 --- a/Notification.js +++ b/Notification.js @@ -65,17 +65,33 @@ class Notification extends Component { } showNotification(done = () => {}) { + const { + onShowing, + onShown + } = this.props; + onShowing(); Animated.timing(this.state.animatedValue, { toValue: 1, duration: this.props.openCloseDuration, - }).start(done); + }).start(() => { + done(); + onShown(); + }); } - closeNotification(done = () => {}) { + closeNotification(done) { + const { + onClosing, + onClosed + } = this.props; + onClosing(); Animated.timing(this.state.animatedValue, { toValue: 0, duration: this.props.openCloseDuration, - }).start(done); + }).start(() => { + done && done(); + onClosed(done != null); + }); } render() { @@ -120,7 +136,11 @@ class Notification extends Component { iconApp={iconApp} icon={icon} vibrate={vibrate} - onClose={() => this.setState({ isOpen: false }, this.closeNotification)} + onClose={() => { + //clear timeout + clearTimeout(this.currentNotificationInterval); + this.setState({ isOpen: false }, this.closeNotification); + }} /> ); @@ -137,6 +157,10 @@ Notification.propTypes = { PropTypes.func, ]), iconApp: Image.propTypes.source, + onShowing: PropTypes.func, + onShown: PropTypes.func, + onClosing: PropTypes.func, + onClosed: PropTypes.func }; Notification.defaultProps = { @@ -146,6 +170,10 @@ Notification.defaultProps = { backgroundColour: 'white', notificationBodyComponent: DefaultNotificationBody, iconApp: null, + onShowing: () => {}, + onShown: () => {}, + onClosing: () => {}, + onClosed: () => {} }; export default Notification; diff --git a/README.md b/README.md index 06d7187..81a4519 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,10 @@ npm install react-native-in-app-notification --save | backgroundColour | The background colour of the Notification component | String | No | `white` | | iconApp | App Icon | ImageSourcePropType | No | `null` | | notificationBodyComponent | **See below about NotificationBody** | React Node or Function | Recommended | `./DefaultNotificationBody` | +| onShowing | Method called before showing notification | Function | No | `null` | +| onShown | Method called after notification shown | Function | No | `null` | +| onClosing | Method called before closing notification | Function | No | `null` | +| onClosed(willShowAgain) | Method called after notification closed, willShowAgain parameter defines if the notification will be shown again immediately | Function | No | `null` | ### NotificationBody The notification body is what is rendered inside the main Notification component and gives you the ability to customise how the notification looks. You can use the default notification body component in `./DefaultNotificationBody.js` as inspiration and guidance.