react-native-modal - npm Package Compare versions

Comparing version 8.0.0-beta.1 to 9.0.0

package.json

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

src/index.js

 import React, { Component } from "react";
 import {
+  Animated,
+  DeviceEventEmitter,
   Dimensions,
+  KeyboardAvoidingView,
   Modal,
-  DeviceEventEmitter,
-  TouchableWithoutFeedback,
-  KeyboardAvoidingView,
+  PanResponder,
   Platform,
-  PanResponder,
-  Animated,
+  TouchableWithoutFeedback
 } from "react-native";
 import PropTypes from "prop-types";
-import {
-  View,
-  initializeRegistryWithDefinitions,
-  registerAnimation,
-  createAnimation,
-} from "react-native-animatable";
-import * as ANIMATION_DEFINITIONS from "./animations";
+import * as animatable from "react-native-animatable";
+import { initializeAnimations, buildAnimations } from "./utils";
 
 import styles from "./index.style.js";
 
-// Override default animations
-initializeRegistryWithDefinitions(ANIMATION_DEFINITIONS);
+// Override default react-native-animatable animations
+initializeAnimations();
 
-// Utility for creating custom animations
-const makeAnimation = (name, obj) => {
-  registerAnimation(name, createAnimation(obj));
-};
-
-const isObject = obj => {
-  return obj !== null && typeof obj === "object";
-};
-
 class ReactNativeModal extends Component {
@@ -76,5 +62,5 @@ static propTypes = {
         "landscape-left",
-        "landscape-right",
-      ]),
-    ),
+        "landscape-right"
+      ])
+    )
   };
@@ -109,3 +95,3 @@
     scrollOffsetMax: 0,
-    supportedOrientations: ["portrait", "landscape"],
+    supportedOrientations: ["portrait", "landscape"]
   };
@@ -124,6 +110,6 @@
     isSwipeable: this.props.swipeDirection ? true : false,
-    pan: null,
+    pan: null
   };
 
-  transitionLock = null;
+  isTransitioning = false;
   inSwipeClosingState = false;
@@ -133,3 +119,5 @@
     super(props);
-    this.buildAnimations(props);
+    const { animationIn, animationOut } = buildAnimations(props);
+    this.animationIn = animationIn;
+    this.animationOut = animationOut;
     if (this.state.isSwipeable) {
@@ -143,3 +131,3 @@ this.state = { ...this.state, pan: new Animated.ValueXY() };
         isVisible: true,
-        showContent: true,
+        showContent: true
       };
@@ -149,2 +137,3 @@ }
 
+  // TODO: Stop using componentWillReceiveProps
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -158,3 +147,5 @@ if (!this.state.isVisible && nextProps.isVisible) {
     ) {
-      this.buildAnimations(nextProps);
+      const { animationIn, animationOut } = buildAnimations(nextProps);
+      this.animationIn = animationIn;
+      this.animationOut = animationOut;
     }
@@ -167,3 +158,3 @@ if (
         { opacity: nextProps.backdropOpacity },
-        this.props.backdropTransitionInTiming,
+        this.props.backdropTransitionInTiming
       );
@@ -177,3 +168,3 @@ }
       console.warn(
-        '`<Modal onSwipe="..." />` is deprecated. Use `<Modal onSwipeComplete="..." />` instead.',
+        '`<Modal onSwipe="..." />` is deprecated. Use `<Modal onSwipeComplete="..." />` instead.'
       );
@@ -186,3 +177,3 @@ }
       "didUpdateDimensions",
-      this.handleDimensionsUpdate,
+      this.handleDimensionsUpdate
     );
@@ -194,3 +185,3 @@ }
       "didUpdateDimensions",
-      this.handleDimensionsUpdate,
+      this.handleDimensionsUpdate
     );
@@ -255,3 +246,3 @@ }
             this.backdropRef.transitionTo({
-              opacity: this.props.backdropOpacity * newOpacityFactor,
+              opacity: this.props.backdropOpacity * newOpacityFactor
             });
@@ -295,3 +286,3 @@ animEvt(evt, gestureState);
             { opacity: this.props.backdropOpacity },
-            this.props.backdropTransitionInTiming,
+            this.props.backdropTransitionInTiming
           );
@@ -301,3 +292,3 @@ }
           toValue: { x: 0, y: 0 },
-          bounciness: 0,
+          bounciness: 0
         }).start();
@@ -307,6 +298,6 @@ if (this.props.scrollOffset > this.props.scrollOffsetMax) {
             y: this.props.scrollOffsetMax,
-            animated: true,
+            animated: true
           });
         }
-      },
+      }
     });
@@ -348,23 +339,2 @@ };
 
-  // User can define custom react-native-animatable animations, see PR #72
-  buildAnimations = props => {
-    let animationIn = props.animationIn;
-    let animationOut = props.animationOut;
-
-    if (isObject(animationIn)) {
-      const animationName = JSON.stringify(animationIn);
-      makeAnimation(animationName, animationIn);
-      animationIn = animationName;
-    }
-
-    if (isObject(animationOut)) {
-      const animationName = JSON.stringify(animationOut);
-      makeAnimation(animationName, animationOut);
-      animationOut = animationName;
-    }
-
-    this.animationIn = animationIn;
-    this.animationOut = animationOut;
-  };
-
   handleDimensionsUpdate = dimensionsUpdate => {
@@ -386,14 +356,14 @@ if (!this.props.deviceHeight && !this.props.deviceWidth) {
   open = () => {
-    if (this.transitionLock) return;
-    this.transitionLock = true;
+    if (this.isTransitioning) return;
+    this.isTransitioning = true;
     if (this.backdropRef) {
       this.backdropRef.transitionTo(
         { opacity: this.props.backdropOpacity },
-        this.props.backdropTransitionInTiming,
+        this.props.backdropTransitionInTiming
       );
     }
 
-    // This is for reset the pan position, if not modal get stuck
-    // at the last release position when you try to open it.
-    // Could certainly be improved - no idea for the moment.
+    // This is for resetting the pan position,otherwise the modal gets stuck
+    // at the last released position when you try to open it.
+    // TODO: Could certainly be improved - no idea for the moment.
     if (this.state.isSwipeable) {
@@ -404,6 +374,6 @@ this.state.pan.setValue({ x: 0, y: 0 });
     if (this.contentRef) {
-      this.props.onModalWillShow && this.props.onModalWillShow()
+      this.props.onModalWillShow && this.props.onModalWillShow();
       this.contentRef[this.animationIn](this.props.animationInTiming).then(
         () => {
-          this.transitionLock = false;
+          this.isTransitioning = false;
           if (!this.props.isVisible) {
@@ -414,3 +384,3 @@ this.close();
           }
-        },
+        }
       );
@@ -421,8 +391,8 @@ }
   close = () => {
-    if (this.transitionLock) return;
-    this.transitionLock = true;
+    if (this.isTransitioning) return;
+    this.isTransitioning = true;
     if (this.backdropRef) {
       this.backdropRef.transitionTo(
         { opacity: 0 },
-        this.props.backdropTransitionOutTiming,
+        this.props.backdropTransitionOutTiming
       );
@@ -447,5 +417,5 @@ }
     if (this.contentRef) {
-      this.props.onModalWillHide && this.props.onModalWillHide()
+      this.props.onModalWillHide && this.props.onModalWillHide();
       this.contentRef[animationOut](this.props.animationOutTiming).then(() => {
-        this.transitionLock = false;
+        this.isTransitioning = false;
         if (this.props.isVisible) {
@@ -456,9 +426,9 @@ this.open();
             {
-              showContent: false,
+              showContent: false
             },
             () => {
               this.setState({
-                isVisible: false,
+                isVisible: false
               });
-            },
+            }
           );
@@ -501,3 +471,3 @@ this.props.onModalHide();
       styles.content,
-      style,
+      style
     ];
@@ -512,3 +482,3 @@
         panPosition = {
-            transform: this.state.pan.getTranslateTransform()
+          transform: this.state.pan.getTranslateTransform()
         };
@@ -524,3 +494,3 @@ } else {
       !this.state.showContent ? (
-        <View />
+        <animatable.View />
       ) : (
@@ -530,3 +500,3 @@ children
     const containerView = (
-      <View
+      <animatable.View
         {...panHandlers}
@@ -537,5 +507,6 @@ ref={ref => (this.contentRef = ref)}
         useNativeDriver={useNativeDriver}
-        {...otherProps}>
+        {...otherProps}
+      >
         {_children}
-      </View>
+      </animatable.View>
     );
@@ -549,6 +520,7 @@
         onRequestClose={onBackButtonPress}
-        {...otherProps}>
-        {hasBackdrop &&
+        {...otherProps}
+      >
+        {hasBackdrop && (
           <TouchableWithoutFeedback onPress={onBackdropPress}>
-            <View
+            <animatable.View
               ref={ref => (this.backdropRef = ref)}
@@ -563,8 +535,8 @@ useNativeDriver={true}
                   width: deviceWidth,
-                  height: deviceHeight,
-                },
+                  height: deviceHeight
+                }
               ]}
             />
-          </TouchableWithoutFeedback> 
-        }
+          </TouchableWithoutFeedback>
+        )}
 
@@ -575,3 +547,4 @@ {avoidKeyboard && (
             pointerEvents="box-none"
-            style={computedStyle.concat([{ margin: 0 }])}>
+            style={computedStyle.concat([{ margin: 0 }])}
+          >
             {containerView}
@@ -578,0 +551,0 @@ </KeyboardAvoidingView>

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 v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39516

increased by0.86%

Lines of code

622

increased by0.32%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of package files

8

decreased by-11.11%

No dependency changes