react-native-modal - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0

package.json

 {
   "name": "react-native-modal",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "An enhanced React-Native modal",
@@ -33,3 +33,3 @@ "main": "src/index.js",
     "prop-types": "15.5.10",
-    "react-native-animatable": "^1.2.0"
+    "react-native-animatable": "^1.2.3"
   },
@@ -36,0 +36,0 @@ "devDependencies": {

README.md

@@ -1,21 +0,18 @@
-[![npm version](https://badge.fury.io/js/react-native-modal.svg)](https://badge.fury.io/js/react-native-modal)  
-   
-  
-<img src="https://github.com/react-native-community/react-native-modal/raw/master/extras/react-native-modal-logo.png" width="130" align="left" /> 
+# react-native-modal
 
-# react-native-modal
+[![npm version](https://badge.fury.io/js/react-native-modal.svg)](https://badge.fury.io/js/react-native-modal)
+[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+ 
 An enhanced, animated and customizable react-native modal.  
-  
-&nbsp; 
-&nbsp;   
-  
-## Description
-This component enhances the original react-native modal by adding animations and many possible customization options while still providing nice defaults:  
-- You can customize the backdrop opacity, color, animation type and animation timing.  
-- You can provide your own content and customize its animation type and animation timing.
-- You'll know when the animations end thanks to `onModalShow` and `onModalHide`  
 
-P.S.: The modal will resize itself correctly on device rotation. 
+## Features
 
-## Gifs!
+- Smooth enter/exit animations
+- Plain simple and flexible APIs
+- Customizable backdrop opacity, color and timing
+- Listeners for the modal animations ending
+- Resize itself correctly on device rotation
+
+## Demo
+
 <p align="center">
@@ -28,5 +25,7 @@ <img src="https://raw.githubusercontent.com/mmazzarolo/react-native-tips/master/imgs/modal.gif" height="300" />
 ## Setup
-This library is available on npm, install it with: `npm install --save react-native-modal`.  
 
+This library is available on npm, install it with: `npm install --save react-native-modal` or `yarn add react-native-modal`.
+
 ## Usage
+
 ```javascript
@@ -66,2 +65,3 @@ import React, { Component } from 'react'
 ## Available props
+
 | Name | Type| Default | Description |
@@ -86,4 +86,6 @@ | --- | --- | --- | --- |
 ## Avaliable animations
+
 Take a look at [react-native-animatable](https://github.com/oblador/react-native-animatable) for available animations.     
 Pull requests, feedbacks and suggestions are welcome!  
+  
 P.S.: Thanks [@oblador](https://github.com/oblador) for react-native-animatable and [@brentvatne](https://github.com/brentvatne) for the npm namespace!  

src/index.js

 import React, { Component } from 'react';
-import { Dimensions, Modal } from 'react-native';
+import { Dimensions, Modal, DeviceEventEmitter } from 'react-native';
 import PropTypes from 'prop-types';
@@ -74,2 +74,3 @@ import { View, initializeRegistryWithDefinitions } from 'react-native-animatable';
     }
+    DeviceEventEmitter.addListener('didUpdateDimensions', this._handleDimensionsUpdate);
   }
@@ -87,2 +88,11 @@
 
+  _handleDimensionsUpdate = dimensionsUpdate => {
+    // Here we update the device dimensions in the state if the layout changed (triggering a render)
+    const deviceWidth = Dimensions.get('window').width;
+    const deviceHeight = Dimensions.get('window').height;
+    if (deviceWidth !== this.state.deviceWidth || deviceHeight !== this.state.deviceHeight) {
+      this.setState({ deviceWidth, deviceHeight });
+    }
+  };
+
   _open = () => {
@@ -114,11 +124,2 @@ this.backdropRef.transitionTo(
 
-  _handleLayout = event => {
-    // Here we update the device dimensions in the state if the layout changed (triggering a render)
-    const deviceWidth = Dimensions.get('window').width;
-    const deviceHeight = Dimensions.get('window').height;
-    if (deviceWidth !== this.state.deviceWidth || deviceHeight !== this.state.deviceHeight) {
-      this.setState({ deviceWidth, deviceHeight });
-    }
-  };
-
   render() {
@@ -151,3 +152,2 @@ const {
         <View
-          onLayout={this._handleLayout}
           ref={ref => (this.backdropRef = ref)}
@@ -154,0 +154,0 @@ style={[

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

Number of lines in readme file

89

increased by2.3%

Worsened metrics

Total package byte prevSize

12455

decreased by-1.66%

Dependency changes

• Updatedreact-native-animatable@^1.2.3