react-native-modal - npm Package Compare versions

Comparing version 2.5.0 to 3.0.0

package.json

 {
   "name": "react-native-modal",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "description": "An enhanced React-Native modal",
   "main": "src/index.js",
+  "types": "src/index.d.ts",
   "scripts": {
@@ -7,0 +8,0 @@ "lint": "eslint src",

README.md

@@ -77,2 +77,3 @@ # react-native-modal
 | onBackButtonPress | func | () => null | Called when the Android back button is pressed |
+| onBackdropPress | func | () => null | Called when the backdrop is pressed |
 | isVisible | bool | **REQUIRED** | Show the modal? |
@@ -89,2 +90,2 @@ | children | node | **REQUIRED** | The modal content |
   
-P.S.: Thanks [@oblador](https://github.com/oblador) for react-native-animatable and [@brentvatne](https://github.com/brentvatne) for the npm namespace!  
+P.S.: Thanks [@oblador](https://github.com/oblador) for react-native-animatable, [@brentvatne](https://github.com/brentvatne) for the npm namespace and to anyone who contributed to this library!  

src/index.js

 import React, { Component } from 'react';
-import { Dimensions, Modal, DeviceEventEmitter } from 'react-native';
+import { Dimensions, Modal, DeviceEventEmitter, TouchableWithoutFeedback } from 'react-native';
 import PropTypes from 'prop-types';
@@ -27,3 +27,5 @@ import { View, initializeRegistryWithDefinitions } from 'react-native-animatable';
     hideOnBack: PropTypes.bool,
+    hideOnBackdropPress: PropTypes.bool,
     onBackButtonPress: PropTypes.func,
+    onBackdropPress: PropTypes.func,
     style: PropTypes.any,
@@ -45,2 +47,4 @@ };
     hideOnBack: true,
+    hideOnBackdropPress: true,
+    onBackdropPress: () => null,
     onBackButtonPress: () => null,
@@ -124,2 +128,9 @@ };
 
+  _closeOnBackdrop = () => {
+    if (this.props.hideOnBackdropPress) {
+      this._close()
+    }
+    this.props.onBackdropPress()
+  }
+
   render() {
@@ -151,12 +162,19 @@ const {
       >
+        <TouchableWithoutFeedback onPress={this._closeOnBackdrop}>
+          <View
+            ref={ref => (this.backdropRef = ref)}
+            style={[
+              styles.backdrop,
+              {
+                backgroundColor: backdropColor,
+                width: deviceWidth,
+                height: deviceHeight,
+              },
+            ]}
+          />
+        </TouchableWithoutFeedback>
         <View
-          ref={ref => (this.backdropRef = ref)}
-          style={[
-            styles.backdrop,
-            { backgroundColor: backdropColor, width: deviceWidth, height: deviceHeight },
-          ]}
-        />
-        <View
           ref={ref => (this.contentRef = ref)}
-          style={[{ margin: deviceWidth * 0.05 }, styles.content, style]}
+          style={[{ margin: deviceWidth * 0.05, transform: [{translateY: 0}] }, styles.content, style]}
+          pointerEvents="box-none"
           {...otherProps}
@@ -163,0 +181,0 @@ >

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

Improved metrics

Total package byte prevSize

15308

increased by22.91%

Number of package files

10

increased by25%

Lines of code

241

increased by21.11%

Number of lines in readme file

90

increased by1.12%

No dependency changes