From 68df6c8a03bf851fe1cdf3b80d87f4666236eafd Mon Sep 17 00:00:00 2001 From: CoderProject Date: Sun, 9 Sep 2018 12:59:50 +0300 Subject: [PATCH 1/7] added onShowing, onShown, onClosing, onClosed prop events These events may be used in ui modifications while showing and hiding the notification. --- Notification.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/Notification.js b/Notification.js index 7328282..2a763f7 100644 --- a/Notification.js +++ b/Notification.js @@ -65,17 +65,25 @@ class Notification extends Component { } showNotification(done = () => {}) { + this.props.onShowing && this.props.onShowing(); Animated.timing(this.state.animatedValue, { toValue: 1, duration: this.props.openCloseDuration, - }).start(done); + }).start(() => { + done(); + this.props.onShown && this.props.onShown(); + }); } closeNotification(done = () => {}) { + this.props.onClosing && this.props.onClosing(); Animated.timing(this.state.animatedValue, { toValue: 0, duration: this.props.openCloseDuration, - }).start(done); + }).start(() => { + done(); + this.props.onClosed && this.props.onClosed(); + }); } render() { @@ -137,6 +145,10 @@ Notification.propTypes = { PropTypes.func, ]), iconApp: Image.propTypes.source, + onShowing: PropTypes.func, + onShown: PropTypes.func, + onClosing: PropTypes.func, + onClosed: PropTypes.func }; Notification.defaultProps = { From df24a096d1d569676d9dc24c0ccf043746b96b2d Mon Sep 17 00:00:00 2001 From: CoderProject Date: Sun, 9 Sep 2018 13:08:53 +0300 Subject: [PATCH 2/7] added onShowing, onShown, onClosing, onClosed --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 06d7187..ddf6c33 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 | Method called after notification closed | 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. From 840643800bde4f1ef838bfe55569f55360e13a9b Mon Sep 17 00:00:00 2001 From: CoderProject Date: Wed, 12 Sep 2018 17:53:46 +0300 Subject: [PATCH 3/7] add parameter to onClosed onClosed will be fired with a parameter that informs if notification is being closed just to show again, in my case, I was hiding notification in onClosed event, but in case that it will be shown again, it should not be removed. --- Notification.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Notification.js b/Notification.js index 2a763f7..d2a4149 100644 --- a/Notification.js +++ b/Notification.js @@ -75,14 +75,14 @@ class Notification extends Component { }); } - closeNotification(done = () => {}) { + closeNotification(done) { this.props.onClosing && this.props.onClosing(); Animated.timing(this.state.animatedValue, { toValue: 0, duration: this.props.openCloseDuration, }).start(() => { - done(); - this.props.onClosed && this.props.onClosed(); + done && done(); + this.props.onClosed && this.props.onClosed(done != null); }); } From ca7e6fd097f1e8497ccc52e9af13435a99ff08a1 Mon Sep 17 00:00:00 2001 From: CoderProject Date: Thu, 13 Sep 2018 13:56:14 +0300 Subject: [PATCH 4/7] cleared timeout on manual close --- Notification.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Notification.js b/Notification.js index d2a4149..f70cde6 100644 --- a/Notification.js +++ b/Notification.js @@ -128,7 +128,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); + }} /> ); From 9fb5414b9a8df8cc4090dab8ea97b93248e0a692 Mon Sep 17 00:00:00 2001 From: CoderProject Date: Fri, 14 Sep 2018 17:12:24 +0300 Subject: [PATCH 5/7] updated defaultProps --- Notification.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/Notification.js b/Notification.js index f70cde6..53e8c73 100644 --- a/Notification.js +++ b/Notification.js @@ -65,24 +65,32 @@ class Notification extends Component { } showNotification(done = () => {}) { - this.props.onShowing && this.props.onShowing(); + const { + onShowing, + onShown + } = this.props; + onShowing(); Animated.timing(this.state.animatedValue, { toValue: 1, duration: this.props.openCloseDuration, }).start(() => { done(); - this.props.onShown && this.props.onShown(); + onShown(); }); } closeNotification(done) { - this.props.onClosing && this.props.onClosing(); + const { + onClosing, + onClosed + } = this.props; + onClosing(); Animated.timing(this.state.animatedValue, { toValue: 0, duration: this.props.openCloseDuration, }).start(() => { done && done(); - this.props.onClosed && this.props.onClosed(done != null); + onClosed(done != null); }); } @@ -162,6 +170,10 @@ Notification.defaultProps = { backgroundColour: 'white', notificationBodyComponent: DefaultNotificationBody, iconApp: null, + onShowing: () => {}, + onShown: () => {}, + onClosing: () => {}, + onClosed: (willShowAgain) => {} }; export default Notification; From 35aa69c92a493be798f311f6ffb3b0224d12fb72 Mon Sep 17 00:00:00 2001 From: CoderProject Date: Fri, 14 Sep 2018 21:45:39 +0300 Subject: [PATCH 6/7] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ddf6c33..81a4519 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ npm install react-native-in-app-notification --save | 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 | Method called after notification closed | 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. From a60a7c4d727395ce8792be014dd900f439f0e6d8 Mon Sep 17 00:00:00 2001 From: CoderProject Date: Fri, 14 Sep 2018 21:46:59 +0300 Subject: [PATCH 7/7] removed unused argument --- Notification.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Notification.js b/Notification.js index 53e8c73..2543857 100644 --- a/Notification.js +++ b/Notification.js @@ -173,7 +173,7 @@ Notification.defaultProps = { onShowing: () => {}, onShown: () => {}, onClosing: () => {}, - onClosed: (willShowAgain) => {} + onClosed: () => {} }; export default Notification;