add function to programatically close notification and pass additional data to NotificationBody component

README.md

@@ -35,6 +35,7 @@ npm install react-native-in-app-notification --save
 ### Android
 
 For Android you need to add the `VIBRATE` permission to your app `AndroidManifest.xml`
+
 ```xml
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="your.app.package.name">
@@ -71,15 +72,17 @@ For Android you need to add the `VIBRATE` permission to your app `AndroidManifes
 
 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.
 
-Your `notificationBodyComponent` component is given four props:
+Your `notificationBodyComponent` component is given these props:
 
-| Prop Name | Prop Description                                              | Data Type           | Default |
-| --------- | ------------------------------------------------------------- | ------------------- | ------- |
-| title     | The title passed to `NotificationRef.show`                    | String              | `''`    |
-| message   | The message passed to `NotificationRef.show`                  | String              | `''`    |
-| onPress   | The callback passed to `NotificationRef.show`                 | Function            | `null`  |
-| icon      | Icon for notification passed to `NotificationRef.show`        | ImageSourcePropType | `null`  |
-| vibrate   | Vibrate on show notification passed to `NotificationRef.show` | Boolean             | `true`  |
+| Prop Name         | Prop Description                                                                      | Data Type           | Default    |
+| ----------------- | ------------------------------------------------------------------------------------- | ------------------- | ---------- |
+| title             | The title passed to `NotificationRef.show`                                            | String              | `''`       |
+| message           | The message passed to `NotificationRef.show`                                          | String              | `''`       |
+| onPress           | The callback passed to `NotificationRef.show`                                         | Function            | `null`     |
+| icon              | Icon for notification passed to `NotificationRef.show`                                | ImageSourcePropType | `null`     |
+| vibrate           | Vibrate on show notification passed to `NotificationRef.show`                         | Boolean             | `true`     |
+| closeNotification | When called will hide the notification with animation                                 | Function            | `() => {}` |
+| data              | Additional data you want to pass to `NotificationBody` through `NotificationRef.show` | Object              | `{}`       |
 
 ## Usage
 
@@ -102,14 +105,16 @@ class AppWithNotifications extends Component {
 }
 ```
 
-When you want to show the notification, just wrap the component which needs to display a notification with the `withInAppNotification` HOC and call the `.showNotification` methods from its props.
+When you want to show the notification, just wrap the component which needs to display a notification with the `withInAppNotification` HOC and call the `.showNotification` and `closeNotification` methods from its props.
 
 `.showNotification` can take three arguments (all of which are optional):
 
 - `title`
 - `message`
 - `onPress`
 
+`.closeNotification` takes an aoptional callback which is called after the notification has disappeared.
+
 **N.B:** you should probably include at least one of `title` or `message`!
 
 `onPress` doesn't need to be used for passive notifications and you can use `onClose` in your `NotificationBody` component to allow your users to close the notification.
@@ -129,7 +134,8 @@ class MyApp extends Component {
             this.props.showNotification({
               title: 'You pressed it!',
               message: 'The notification has been triggered',
-              onPress: () => Alert.alert('Alert', 'You clicked the notification!')
+              onPress: () =>
+                Alert.alert('Alert', 'You clicked the notification!'),
             });
           }}
         >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-notification",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Customisable in-app notification component for React Native",
   "main": "src/index.js",
   "repository": "https://github.com/robcalcroft/react-native-in-app-notification.git",

src/Context.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
-const context = React.createContext(() => {});
+const context = React.createContext({
+  showNotification: () => {},
+  closeNotification: () => {},
+});
 
 export default context;

src/Notification.js

@@ -25,16 +25,18 @@ class Notification extends Component {
     this.state = {
       animatedValue: new Animated.Value(0),
       isOpen: false,
+      data: {},
     };
   }
 
   show(
-    { title, message, onPress, icon, vibrate } = {
+    { title, message, onPress, icon, vibrate, data } = {
       title: '',
       message: '',
       onPress: null,
       icon: null,
       vibrate: true,
+      data: {},
     },
   ) {
     const { closeInterval } = this.props;
@@ -53,22 +55,25 @@ class Notification extends Component {
           onPress,
           icon,
           vibrate,
+          data,
         },
-        () => this.showNotification(() => {
-          this.currentNotificationInterval = setTimeout(() => {
-            this.setState(
-              {
-                isOpen: false,
-                title: '',
-                message: '',
-                onPress: null,
-                icon: null,
-                vibrate: true,
-              },
-              this.closeNotification,
-            );
-          }, closeInterval);
-        }),
+        () =>
+          this.showNotification(() => {
+            this.currentNotificationInterval = setTimeout(() => {
+              this.setState(
+                {
+                  isOpen: false,
+                  title: '',
+                  message: '',
+                  onPress: null,
+                  icon: null,
+                  vibrate: true,
+                  data: {},
+                },
+                this.closeNotification,
+              );
+            }, closeInterval);
+          }),
       );
     };
 
@@ -92,7 +97,7 @@ class Notification extends Component {
     Animated.timing(this.state.animatedValue, {
       toValue: 0,
       duration: this.props.openCloseDuration,
-    }).start(done);
+    }).start(done instanceof Function ? done : () => {});
   }
 
   render() {
@@ -104,7 +109,16 @@ class Notification extends Component {
       notificationBodyComponent: NotificationBody,
     } = this.props;
 
-    const { animatedValue, title, message, onPress, isOpen, icon, vibrate } = this.state;
+    const {
+      animatedValue,
+      title,
+      message,
+      onPress,
+      isOpen,
+      icon,
+      vibrate,
+      data,
+    } = this.state;
 
     const height = baseHeight + this.heightOffset;
 
@@ -133,7 +147,11 @@ class Notification extends Component {
           iconApp={iconApp}
           icon={icon}
           vibrate={vibrate}
-          onClose={() => this.setState({ isOpen: false }, this.closeNotification)}
+          onClose={() =>
+            this.setState({ isOpen: false }, this.closeNotification)
+          }
+          closeNotification={this.closeNotification}
+          data={data}
         />
       </Animated.View>
     );
@@ -146,7 +164,10 @@ Notification.propTypes = {
   height: PropTypes.number,
   topOffset: PropTypes.number,
   backgroundColour: PropTypes.string,
-  notificationBodyComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  notificationBodyComponent: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.func,
+  ]),
   iconApp: Image.propTypes.source,
 };
 

src/Provider.js

@@ -7,7 +7,6 @@ import Notification from './Notification';
 class Provider extends React.PureComponent {
   constructor(props) {
     super(props);
-
     this.showNotification = this.showNotification.bind(this);
   }
 
@@ -17,12 +16,23 @@ class Provider extends React.PureComponent {
     }
   }
 
+  closeNotification() {
+    if (this.notification) {
+      this.notification.closeNotification();
+    }
+  }
+
   render() {
     return (
-      <Context.Provider value={this.showNotification}>
+      <Context.Provider
+        value={{
+          showNotification: this.showNotification,
+          closeNotification: this.closeNotification,
+        }}
+      >
         {Children.only(this.props.children)}
         <Notification
-          ref={(ref) => {
+          ref={ref => {
             this.notification = ref;
           }}
           {...this.props}

src/WithInAppNotification.hoc.js

@@ -9,10 +9,11 @@ function withInAppNotification(WrappedComponent) {
     render() {
       return (
         <Context.Consumer>
-          {showNotification => (
+          {({ showNotification, closeNotification }) => (
             <WrappedComponent
               {...this.props}
               showNotification={showNotification}
+              closeNotification={closeNotification}
             />
           )}
         </Context.Consumer>

yarn.lock

@@ -641,6 +641,13 @@ has@^1.0.1:
   dependencies:
     function-bind "^1.0.2"
 
+hoist-non-react-statics@^3.0.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz#c09c0555c84b38a7ede6912b61efddafd6e75e1e"
+  integrity sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==
+  dependencies:
+    react-is "^16.3.2"
+
 ignore@^3.2.0:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.7.tgz#4810ca5f1d8eca5595213a34b94f2eb4ed926bbd"
@@ -986,6 +993,11 @@ progress@^1.1.8:
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
   integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=
 
+react-is@^16.3.2:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
+  integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==
+
 react-native-iphone-x-helper@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.0.tgz#9f8a376eb00bc712115abff4420318a0063fa796"