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

Comparing version 1.2.0 to 1.3.0

package.json

 {
   "name": "react-native-push-notification-popup",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React Native Push Notification Popup Component",
   "main": "src/index.js",
+  "types": "./types.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "eslint --fix --ext js src"
   },
@@ -35,6 +36,9 @@ "repository": {
     "eslint": "^4.19.1",
-    "eslint-plugin-react": "^7.7.0"
+    "eslint-plugin-react": "^7.7.0",
+    "react": "^16.8.6",
+    "react-native": "^0.59.8"
   },
   "dependencies": {
+    "prop-types": "^15.7.2"
   }
 }

README.md

@@ -43,2 +43,6 @@ # React Native Push Notification Popup
 ```javascript
+import NotificationPopup from 'react-native-push-notification-popup';
+
+// ...
+
   render() {
@@ -65,2 +69,3 @@ return (
     body: 'This is a sample message.\nTesting emoji 😀',
+    slideOutTime: 5000
   });
@@ -72,3 +77,5 @@ }
 
-*(Customizing options coming soon)*
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| **`renderPopupContent`** | function <br /> `(options?: { appIconSource?: ImageSourcePropType; appTitle?: string; timeText?: string; title?: string;body?: string; }) => React.ReactElement<any>` | null | Render your own custom popup body (Optional) |
 
@@ -87,2 +94,3 @@ ### Methods
 | **`body`** | String | '' | Message body (support multi-line) |
+| **`slideOutTime`** | Number | 4000 | Time until notification slides out |
 
@@ -92,2 +100,5 @@
 
+- [ ] Add testing
+- [ ] Add example/ project
+- [ ] Support showing it globally
 - [ ] Customizing props: speed, duration, etc
@@ -98,5 +109,21 @@ - [ ] Support image on the right-side
 - [ ] More usage examples
-- [ ] Transparent Background
 - [ ] Identify peerDependencies on react-native
 
+## Contributing
+
+### Debugging
+
+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
+
+### Linting
+
+1. Run `yarn` (Install devDependencies)
+2. Run `yarn run lint`
+
 ## License
@@ -103,0 +130,0 @@

src/utils/index.js

@@ -5,9 +5,9 @@ import { Dimensions, Platform } from 'react-native';
 export function isIphoneX() {
-    const dimen = Dimensions.get('window');
-    return (
-        Platform.OS === 'ios' &&
+  const dimen = Dimensions.get('window');
+  return (
+    Platform.OS === 'ios' &&
         !Platform.isPad &&
         !Platform.isTVOS &&
         ((dimen.height === 812 || dimen.width === 812) || (dimen.height === 896 || dimen.width === 896))
-    );
+  );
 }

src/views/DefaultPopup.js

 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Animated, View, Text, Image, Dimensions, Platform, StatusBar, StyleSheet, PanResponder, TouchableWithoutFeedback } from 'react-native';
@@ -6,3 +7,3 @@
 
-const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
+const { width: deviceWidth } = Dimensions.get('window');
 
@@ -45,5 +46,4 @@ const CONTAINER_MARGIN_TOP = (
   static propTypes = {
-    // TODO: customizable props
-    // show: PropTypes.bool,
-  };
+    renderPopupContent: PropTypes.func,
+  }
 
@@ -75,2 +75,3 @@ constructor(props) {
       body: null,
+      slideOutTime: null,
     };
@@ -130,7 +131,44 @@ this._panResponder = PanResponder.create({
   }
+  
+  renderPopupContent = () => {
+    const { appIconSource, appTitle, timeText, title, body } = this.state;
+    const { renderPopupContent } = this.props;
+    if (renderPopupContent) {
+      return renderPopupContent({ appIconSource, appTitle, timeText, title, body });
+    }
 
+    return (
+      <View style={styles.popupContentContainer}>
+        <View style={styles.popupHeaderContainer}>
+          <View style={styles.headerIconContainer}>
+            <Image style={styles.headerIcon} source={appIconSource || null} />
+          </View>
+          <View style={styles.headerTextContainer}>
+            <Text style={styles.headerText} numberOfLines={1}>
+              {appTitle || ''}
+            </Text>
+          </View>
+          <View style={styles.headerTimeContainer}>
+            <Text style={styles.headerTime} numberOfLines={1}>
+              {timeText || ''}
+            </Text>
+          </View>
+        </View>
+        <View style={styles.contentContainer}>
+          <View style={styles.contentTitleContainer}>
+            <Text style={styles.contentTitle}>{title || ''}</Text>
+          </View>
+          <View style={styles.contentTextContainer}>
+            <Text style={styles.contentText}>{body || ''}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
   render() {
     const {
-      show, containerSlideOffsetY, containerDragOffsetY, containerScale,
-      onPressAndSlideOut, appIconSource, appTitle, timeText, title, body
+      show,
+      containerSlideOffsetY, containerDragOffsetY, containerScale,
+      onPressAndSlideOut,
     } = this.state;
@@ -148,21 +186,3 @@
           <View>
-            <View style={styles.popupHeaderContainer}>
-              <View style={styles.headerIconContainer}>
-                <Image style={styles.headerIcon} source={appIconSource || null} />
-              </View>
-              <View style={styles.headerTextContainer}>
-                <Text style={styles.headerText} numberOfLines={1}>{appTitle || ''}</Text>
-              </View>
-              <View style={styles.headerTimeContainer}>
-                <Text style={styles.headerTime} numberOfLines={1}>{timeText || ''}</Text>
-              </View>
-            </View>
-            <View style={styles.contentContainer}>
-              <View style={styles.contentTitleContainer}>
-                <Text style={styles.contentTitle}>{title || ''}</Text>
-              </View>
-              <View style={styles.contentTextContainer}>
-                <Text style={styles.contentText}>{body || ''}</Text>
-              </View>
-            </View>
+            {this.renderPopupContent()}
           </View>
@@ -217,3 +237,3 @@ </TouchableWithoutFeedback>
       this.slideOutAndDismiss();
-    }, 4000);  // TODO: customize
+    }, this.state.slideOutTime);
     this.setState({ slideOutTimer });
@@ -239,3 +259,11 @@ }
     const _messageConfig = messageConfig || {};
-    const { onPress: onPressCallback, appIconSource, appTitle, timeText, title, body } = _messageConfig;
+    const {
+      onPress: onPressCallback,
+      appIconSource,
+      appTitle,
+      timeText,
+      title,
+      body,
+      slideOutTime
+    } = _messageConfig;
     const onPressAndSlideOut = this.createOnPressWithCallback(onPressCallback);
@@ -248,3 +276,9 @@ this.setState({
       containerScale: new Animated.Value(1),
-      onPressAndSlideOut, appIconSource, appTitle, timeText, title, body
+      onPressAndSlideOut,
+      appIconSource,
+      appTitle,
+      timeText,
+      title,
+      body,
+      slideOutTime: typeof slideOutTime !== 'number' ? 4000 : slideOutTime
     }, this.slideIn);
@@ -257,3 +291,2 @@ }
     position: 'absolute',
-    minHeight: 86,
     width: deviceWidth - (HORIZONTAL_MARGIN * 2),
@@ -263,6 +296,9 @@ left: HORIZONTAL_MARGIN,
     top: CONTAINER_MARGIN_TOP,
+    zIndex: 1000,
+  },
+
+  popupContentContainer: {
     backgroundColor: 'white',  // TEMP
     borderRadius: 12,
-    zIndex: 1000,
-
+    minHeight: 86,
     // === Shadows ===
@@ -280,2 +316,3 @@ // Android
   },
+
   popupHeaderContainer: {
@@ -282,0 +319,0 @@ height: 32,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Lines of code

406

increased by16.33%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

128

increased by26.73%

Worsened metrics

Total package byte prevSize

19401

decreased by-73.55%

Dependency count

1

increased byInfinity%

Dev dependency count

6

increased by50%

Dependency changes

• + Addedprop-types@^15.7.2

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)