react-native-push-notification-popup - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

package.json

 {
   "name": "react-native-push-notification-popup",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React Native Push Notification Popup Component",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -32,3 +32,6 @@ # React Native Push Notification Popup
 ```bash
-yarn add react-native-push-notification-popup  # recommended
+# yarn, recommended
+yarn add react-native-push-notification-popup
+
+# or npm
 npm install react-native-push-notification-popup --save
@@ -46,14 +49,40 @@ ```
 
-// ...
-
+class MyComponent extends React.Component {
   render() {
     return (
       <View style={styles.container}>
+        <MaybeYourNavigator />
         <NotificationPopup ref={ref => this.popup = ref} />
-        <MaybeYourNavigator />
       </View>
     );
   }
+// ...
 ```
 
+> **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](https://github.com/carsonwah/react-native-push-notification-popup/issues/21).
+
+#### Optional: Customize your popup
+
+```javascript
+// 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>
+      );
+    }
+// ...
+```
+
 ### Show it!
@@ -119,2 +148,3 @@
 5. Try it
+6. Re-run `yarn --production` whenever there is any code change
 
@@ -121,0 +151,0 @@ ### Linting

src/views/DefaultPopup.js

@@ -287,3 +287,2 @@ import React, { Component } from 'react';
     top: CONTAINER_MARGIN_TOP,
-    zIndex: 1000,
   },
@@ -290,0 +289,0 @@

types.d.ts

@@ -22,3 +22,3 @@ /// <reference types="react"/>
   interface PushNotificationPopupProps {
-    renderPopupContent: (options: ContentOptionsBase) => ReactElement;
+    renderPopupContent?: (options: ContentOptionsBase) => ReactElement;
   }
@@ -25,0 +25,0 @@

No alert changes

Improved metrics

Total package byte prevSize

20293

increased by4.6%

Number of lines in readme file

158

increased by23.44%

Worsened metrics

Lines of code

405

decreased by-0.25%

No dependency changes