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

Comparing version 1.6.2 to 1.7.0

package.json

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

README.md

@@ -83,3 +83,4 @@ # React Native Push Notification Popup
             shouldChildHandleResponderStart={true}
-            shouldChildHandleResponderMove={true} />
+            shouldChildHandleResponderMove={true}
+            isSkipStatusBarPadding={true} />
         </View>
@@ -114,2 +115,3 @@ );
 | **`shouldChildHandleResponderMove`** | boolean | false | By default, parent popup will prevent bubbling event to child. This should be set to true if you have button inside your custom popup that wants to receive the event. |
+| **`isSkipStatusBarPadding`** | boolean | false | Set this to true if your app is an Android app with non-translucent StatusBar. ([See #35](https://github.com/carsonwah/react-native-push-notification-popup/issues/35)) |
 
@@ -116,0 +118,0 @@ ### Methods

src/index.js

 import { DefaultPopup } from './views';
 
 export default DefaultPopup;

src/utils/index.js

@@ -29,48 +29,28 @@ import { Dimensions, Platform, StatusBar } from 'react-native';
 
-const { height: W_HEIGHT, width: W_WIDTH } = Dimensions.get("window");
+const { height: W_HEIGHT, width: W_WIDTH } = Dimensions.get('window');
 
 let statusBarHeight = STATUSBAR_DEFAULT_HEIGHT;
-let isIPhoneX_v = false;
-let isIPhoneXMax_v = false;
-let isIPhone12_v = false;
-let isIPhone12Max_v = false;
-let isIPhone14Pro_v = false;
-let isIPhone14ProMax_v = false;
-let isIPhoneWithMonobrow_v = false;
 
-if (Platform.OS === "ios" && !Platform.isPad && !Platform.isTVOS) {
-    if (W_WIDTH === X_WIDTH && W_HEIGHT === X_HEIGHT) {
-        isIPhoneWithMonobrow_v = true;
-        isIPhoneX_v = true;
-        statusBarHeight = STATUSBAR_X_HEIGHT;
-    } else if (W_WIDTH === XSMAX_WIDTH && W_HEIGHT === XSMAX_HEIGHT) {
-        isIPhoneWithMonobrow_v = true;
-        isIPhoneXMax_v = true;
-        statusBarHeight = STATUSBAR_X_HEIGHT;
-    } else if (W_WIDTH === IP12_WIDTH && W_HEIGHT === IP12_HEIGHT) {
-        isIPhoneWithMonobrow_v = true;
-        isIPhone12_v = true;
-        statusBarHeight = STATUSBAR_IP12_HEIGHT;
-    } else if (W_WIDTH === IP12MAX_WIDTH && W_HEIGHT === IP12MAX_HEIGHT) {
-        isIPhoneWithMonobrow_v = true;
-        isIPhone12Max_v = true;
-        statusBarHeight = STATUSBAR_IP12MAX_HEIGHT;
-    } else if (W_WIDTH === IP14PRO_WIDTH && W_HEIGHT === IP14PRO_HEIGHT) {
-        isIPhoneWithMonobrow_v = true;
-        isIPhone14Pro_v = true;
-        statusBarHeight = STATUSBAR_IP14PRO_HEIGHT;
-    } else if (W_WIDTH === IP14PROMAX_WIDTH && W_HEIGHT === IP14PROMAX_HEIGHT) {
-        isIPhoneWithMonobrow_v = true;
-        isIPhone14ProMax_v = true;
-        statusBarHeight = STATUSBAR_IP14PROMAX_HEIGHT;
-    }
+if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
+  if (W_WIDTH === X_WIDTH && W_HEIGHT === X_HEIGHT) {
+    statusBarHeight = STATUSBAR_X_HEIGHT;
+  } else if (W_WIDTH === XSMAX_WIDTH && W_HEIGHT === XSMAX_HEIGHT) {
+    statusBarHeight = STATUSBAR_X_HEIGHT;
+  } else if (W_WIDTH === IP12_WIDTH && W_HEIGHT === IP12_HEIGHT) {
+    statusBarHeight = STATUSBAR_IP12_HEIGHT;
+  } else if (W_WIDTH === IP12MAX_WIDTH && W_HEIGHT === IP12MAX_HEIGHT) {
+    statusBarHeight = STATUSBAR_IP12MAX_HEIGHT;
+  } else if (W_WIDTH === IP14PRO_WIDTH && W_HEIGHT === IP14PRO_HEIGHT) {
+    statusBarHeight = STATUSBAR_IP14PRO_HEIGHT;
+  } else if (W_WIDTH === IP14PROMAX_WIDTH && W_HEIGHT === IP14PROMAX_HEIGHT) {
+    statusBarHeight = STATUSBAR_IP14PROMAX_HEIGHT;
+  }
 }
 
 export function getStatusBarHeight() {
-    return Platform.select({
-        ios: statusBarHeight,
-        android: StatusBar.currentHeight,
-        default: 0,
-    });
+  return Platform.select({
+    ios: statusBarHeight,
+    android: StatusBar.currentHeight,
+    default: 0,
+  });
 }
-

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';
+import { Animated, View, Text, Image, Dimensions, StyleSheet, PanResponder, TouchableWithoutFeedback } from 'react-native';
 
@@ -9,3 +9,4 @@ import { getStatusBarHeight } from '../utils';
 
-const CONTAINER_MARGIN_TOP = getStatusBarHeight() + 10;  // Just to add a bit more padding
+const CONTAINER_MARGIN_TOP_WITHOUT_STATUS_BAR = 10; // Add padding to prevent touching edge of the screen
+const CONTAINER_MARGIN_TOP_WITH_STATUS_BAR = getStatusBarHeight() + CONTAINER_MARGIN_TOP_WITHOUT_STATUS_BAR;
 
@@ -19,3 +20,3 @@ const slideOffsetYToTranslatePixelMapping = {
 
-const getAnimatedContainerStyle = ({containerSlideOffsetY, containerDragOffsetY, containerScale}) => {
+const getAnimatedContainerStyle = ({containerSlideOffsetY, containerDragOffsetY, containerScale, isSkipStatusBarPadding}) => {
   // Map 0-1 value to translateY value
@@ -33,2 +34,3 @@ const slideInAnimationStyle = {
     styles.popupContainer,
+    isSkipStatusBarPadding ? { top: CONTAINER_MARGIN_TOP_WITHOUT_STATUS_BAR } : { top: CONTAINER_MARGIN_TOP_WITH_STATUS_BAR },
     slideInAnimationStyle,
@@ -46,2 +48,3 @@ ];
     shouldChildHandleResponderMove: PropTypes.bool,
+    isSkipStatusBarPadding: PropTypes.bool,
   }
@@ -129,3 +132,3 @@
   }
-  
+
   renderPopupContent = () => {
@@ -173,2 +176,3 @@ const { appIconSource, appTitle, timeText, title, body } = this.state;
     } = this.state;
+    const { isSkipStatusBarPadding } = this.props;
 
@@ -181,3 +185,3 @@ if (!show) {
       <Animated.View
-        style={getAnimatedContainerStyle({containerSlideOffsetY, containerDragOffsetY, containerScale})}
+        style={getAnimatedContainerStyle({containerSlideOffsetY, containerDragOffsetY, containerScale, isSkipStatusBarPadding})}
         {...this._panResponder.panHandlers}>
@@ -290,3 +294,3 @@ <TouchableWithoutFeedback onPress={onPressAndSlideOut}>
     right: HORIZONTAL_MARGIN,
-    top: CONTAINER_MARGIN_TOP,
+    // top: CONTAINER_MARGIN_TOP, // Refactored as dynamic style
   },
@@ -293,0 +297,0 @@

src/views/index.js

@@ -0,0 +0,0 @@ import DefaultPopup from './DefaultPopup';

types.d.ts

@@ -25,2 +25,3 @@ /// <reference types="react"/>
     shouldChildHandleResponderMove?: boolean;
+    isSkipStatusBarPadding?: boolean;
   }
@@ -27,0 +28,0 @@

No alert changes

Improved metrics

Total package byte prevSize

24202

increased by0.57%

Number of package files

13

increased by8.33%

Number of lines in readme file

170

increased by1.19%

Worsened metrics

Lines of code

443

decreased by-3.06%

No dependency changes