react-native-raw-bottom-sheet - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

package.json

 {
   "name": "react-native-raw-bottom-sheet",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Add Your Own Component To Bottom Sheet Whatever You Want (Android & iOS)",
@@ -32,3 +32,15 @@ "main": "index.js",
     "prop-types": "^15.6.2"
+  },
+  "devDependencies": {
+    "eslint": "^5.14.1",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "prettier": "^1.16.4",
+    "react": "^16.8.3",
+    "react-native": "^0.58.5"
   }
 }

README.md

@@ -52,3 +52,2 @@ # react-native-raw-bottom-sheet
           height={300}
-          minHeight={0}
           duration={250}
@@ -55,0 +54,0 @@ customStyles={{

src/index.js

 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import {
-  View,
-  Modal,
-  TouchableOpacity,
-  Animated,
-  PanResponder
-} from "react-native";
+import { View, Modal, TouchableOpacity, Animated, PanResponder } from "react-native";
 import styles from "./style";
@@ -21,4 +15,4 @@
 class RBSheet extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
@@ -30,40 +24,23 @@ modalVisible: false,
 
-    this.createPanResponder();
+    this.createPanResponder(props);
   }
 
-  createPanResponder() {
-    this.panResponder = PanResponder.create({
-      onStartShouldSetPanResponder: () => this.props.closeOnSwipeDown,
-      onPanResponderMove: (e, gestureState) => {
-        gestureState.dy < 0
-          ? null
-          : Animated.event([null, { dy: this.state.pan.y }])(e, gestureState);
-      },
-      onPanResponderRelease: (e, gestureState) => {
-        if (this.props.height / 4 - gestureState.dy < 0) {
-          this.setModalVisible(false);
-        } else {
-          Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start();
-        }
-      }
-    });
-  }
-
   setModalVisible(visible) {
     const { height, minClosingHeight, duration, onClose } = this.props;
+    const { animatedHeight, pan } = this.state;
     if (visible) {
       this.setState({ modalVisible: visible });
-      Animated.timing(this.state.animatedHeight, {
+      Animated.timing(animatedHeight, {
         toValue: height,
-        duration: duration
+        duration
       }).start();
     } else {
-      Animated.timing(this.state.animatedHeight, {
+      Animated.timing(animatedHeight, {
         toValue: minClosingHeight,
-        duration: duration
+        duration
       }).start(() => {
+        pan.setValue({ x: 0, y: 0 });
         this.setState({
           modalVisible: visible,
-          animatedHeight: new Animated.Value(0),
-          pan: new Animated.ValueXY()
+          animatedHeight: new Animated.Value(0)
         });
@@ -76,2 +53,22 @@
 
+  createPanResponder(props) {
+    const { closeOnSwipeDown, height } = props;
+    const { pan } = this.state;
+    this.panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => closeOnSwipeDown,
+      onPanResponderMove: (e, gestureState) => {
+        if (gestureState.dy > 0) {
+          Animated.event([null, { dy: pan.y }])(e, gestureState);
+        }
+      },
+      onPanResponderRelease: (e, gestureState) => {
+        if (height / 4 - gestureState.dy < 0) {
+          this.setModalVisible(false);
+        } else {
+          Animated.spring(pan, { toValue: { x: 0, y: 0 } }).start();
+        }
+      }
+    });
+  }
+
   open() {
@@ -87,4 +84,5 @@ this.setModalVisible(true);
     const { closeOnPressMask, children, customStyles } = this.props;
+    const { animatedHeight, pan, modalVisible } = this.state;
     const panStyle = {
-      transform: this.state.pan.getTranslateTransform()
+      transform: pan.getTranslateTransform()
     };
@@ -94,5 +92,5 @@
       <Modal
-        transparent={true}
+        transparent
         animationType="none"
-        visible={this.state.modalVisible}
+        visible={modalVisible}
         supportedOrientations={SUPPORTED_ORIENTATIONS}
@@ -111,8 +109,3 @@ onRequestClose={() => {
             {...this.panResponder.panHandlers}
-            style={[
-              panStyle,
-              styles.container,
-              customStyles.container,
-              { height: this.state.animatedHeight }
-            ]}
+            style={[panStyle, styles.container, customStyles.container, { height: animatedHeight }]}
           >
@@ -133,4 +126,5 @@ {children}
   closeOnPressMask: PropTypes.bool,
-  customStyles: PropTypes.object,
-  onClose: PropTypes.func
+  customStyles: PropTypes.objectOf(PropTypes.object),
+  onClose: PropTypes.func,
+  children: PropTypes.node
 };
@@ -144,5 +138,7 @@
   closeOnPressMask: true,
-  customStyles: {}
+  customStyles: {},
+  onClose: null,
+  children: <View />
 };
 
 export default RBSheet;

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

10735

increased by8.92%

Number of package files

7

increased by16.67%

Worsened metrics

Dev dependency count

10

increased byInfinity%

Lines of code

143

decreased by-2.72%

Number of lines in readme file

116

decreased by-0.85%

No dependency changes