react-native-modal - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

package.json

 {
   "name": "react-native-modal",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "An enhanced React-Native modal",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -5,3 +5,3 @@ # 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.  
@@ -79,2 +79,3 @@
 | onBackdropPress | func | () => null | Called when the backdrop is pressed |
+| useNativeDriver | bool | false | Define if animations should use [native driver](https://facebook.github.io/react-native/docs/animated.html#using-the-native-driver) |
 | isVisible | bool | **REQUIRED** | Show the modal? |
@@ -91,3 +92,3 @@ | children | node | **REQUIRED** | The modal content |
 Pull requests, feedbacks and suggestions are welcome!  
-  
+
 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.d.ts

@@ -5,6 +5,8 @@ declare module 'react-native-modal' {
 
+  type AnimationConfig = string | { from: Object, to: Object }
+
   export interface ModalProps {
-    animationIn?: string
+    animationIn?: AnimationConfig
     animationInTiming?: number
-    animationOut?: string
+    animationOut?: AnimationConfig
     animationOutTiming?: number
@@ -11,0 +13,0 @@ backdropColor?: string

src/index.js

@@ -49,2 +49,3 @@ import React, { Component } from 'react';
     onBackdropPress: PropTypes.func,
+    useNativeDriver: PropTypes.bool,
     style: PropTypes.any,
@@ -68,2 +69,3 @@ };
     onBackButtonPress: () => null,
+    useNativeDriver: false,
   };
@@ -82,2 +84,4 @@
 
+  transitionLock = null;
+
   constructor(props) {
@@ -119,6 +123,7 @@ super(props);
     // On modal open request, we slide the view up and fade in the backdrop
-    if (this.state.isVisible && !prevState.isVisible) {
+    if (this.props.isVisible && !prevProps.isVisible) {
       this._open();
-      // On modal close request, we slide the view down and fade out the backdrop
-    } else if (!this.props.isVisible && prevProps.isVisible) {
+    }
+    // On modal close request, we slide the view down and fade out the backdrop
+    else if (!this.props.isVisible && prevProps.isVisible) {
       this._close();
@@ -157,2 +162,4 @@ }
   _open = () => {
+    if (this.transitionLock) return;
+    this.transitionLock = true;
     this.backdropRef.transitionTo(
@@ -163,11 +170,25 @@ { opacity: this.props.backdropOpacity },
     this.contentRef[this.animationIn](this.props.animationInTiming).then(() => {
-      this.props.onModalShow();
+      this.transitionLock = false;
+      if (!this.props.isVisible) {
+        this._close();
+      }
+      else {
+        this.props.onModalShow();
+      }
     });
   };
 
-  _close = async () => {
+  _close = () => {
+    if (this.transitionLock) return;
+    this.transitionLock = true;
     this.backdropRef.transitionTo({ opacity: 0 }, this.props.backdropTransitionOutTiming);
     this.contentRef[this.animationOut](this.props.animationOutTiming).then(() => {
-      this.setState({ isVisible: false });
-      this.props.onModalHide();
+      this.transitionLock = false;
+      if (this.props.isVisible) {
+        this._open();
+      }
+      else {
+        this.setState({ isVisible: false });
+        this.props.onModalHide();
+      }
     });
@@ -192,2 +213,3 @@ };
       onBackButtonPress,
+      useNativeDriver,
       style,
@@ -209,2 +231,3 @@ ...otherProps
         pointerEvents={'box-none'}
+        useNativeDriver={useNativeDriver}
         {...otherProps}
@@ -227,2 +250,3 @@ >
             ref={ref => (this.backdropRef = ref)}
+            useNativeDriver={useNativeDriver}
             style={[
@@ -229,0 +253,0 @@ styles.backdrop,

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

17720

increased by4.22%

Lines of code

314

increased by8.28%

Number of lines in readme file

92

increased by1.1%

Worsened metrics

Number of package files

9

decreased by-10%

No dependency changes