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

Comparing version 2.1.0 to 2.2.0

__tests__/RBSheet.test.js

 import React from "react";
-import { View, Text, Modal, TouchableOpacity } from "react-native";
+import { View, Text, Modal, TouchableOpacity, Animated } from "react-native";
 import Enzyme, { shallow } from "enzyme";
@@ -21,3 +21,3 @@ import Adapter from "enzyme-adapter-react-16";
           minClosingHeight={100}
-          duration={350}
+          openDuration={350}
           closeOnSwipeDown={false}
@@ -93,32 +93,24 @@ closeOnPressMask={false}
   describe("Method", () => {
-    it("should createPanResponder called", () => {
-      const wrapper = shallow(<RBSheet />);
-      const createPanResponder = jest.spyOn(RBSheet.prototype, "createPanResponder");
-      wrapper.instance().createPanResponder({ closeOnSwipeDown: true, height: 300 });
-      expect(createPanResponder).toHaveBeenCalledTimes(1);
-    });
-
     let wrapper;
     let setModalVisible;
-    const onClose = jest.fn();
     beforeEach(() => {
-      wrapper = shallow(<RBSheet onClose={onClose} />);
+      wrapper = shallow(<RBSheet />);
       setModalVisible = jest.spyOn(RBSheet.prototype, "setModalVisible");
-      jest.useFakeTimers(); // https://github.com/facebook/jest/issues/4359
-      jest.mock("Animated", () => {
-        const ActualAnimated = require.requireActual("Animated");
+      Animated.timing = (value, config) => {
         return {
-          ...ActualAnimated,
-          timing: (value, config) => {
-            return {
-              start: callback => {
-                value.setValue(config.toValue);
-                if (typeof callback === "function") callback();
-              }
-            };
+          start: callback => {
+            value.setValue(config.toValue);
+            if (typeof callback === "function") callback();
           }
         };
-      });
+      };
     });
 
+    it("should createPanResponder called", () => {
+      wrapper = shallow(<RBSheet />);
+      const createPanResponder = jest.spyOn(RBSheet.prototype, "createPanResponder");
+      wrapper.instance().createPanResponder({ closeOnSwipeDown: true, height: 300 });
+      expect(createPanResponder).toHaveBeenCalledTimes(1);
+    });
+
     it("should method open called", () => {
@@ -130,2 +122,9 @@ wrapper.instance().open();
 
+    it("should onOpen callback function called", () => {
+      const onOpen = jest.fn();
+      wrapper = shallow(<RBSheet onOpen={onOpen} />);
+      wrapper.instance().open();
+      expect(onOpen).toHaveBeenCalled();
+    });
+
     it("should method close called", () => {
@@ -138,2 +137,4 @@ wrapper.instance().close();
     it("should onClose callback function called", () => {
+      const onClose = jest.fn();
+      wrapper = shallow(<RBSheet onClose={onClose} />);
       wrapper.instance().close();
@@ -140,0 +141,0 @@ expect(onClose).toHaveBeenCalled();

index.d.ts

@@ -9,4 +9,6 @@ import { Component } from "react";
     minClosingHeight?: number;
-    duration?: number;
+    openDuration?: number;
+    closeDuration?: number;
     closeOnDragDown?: boolean;
+    dragFromTopOnly?: boolean;
     closeOnPressMask?: boolean;
@@ -13,0 +15,0 @@ closeOnPressBack?: boolean;

package.json

 {
   "name": "react-native-raw-bottom-sheet",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Add Your Own Component To Bottom Sheet Whatever You Want (Android & iOS)",
@@ -48,3 +48,3 @@ "main": "index.js",
     "react-dom": "^16.8.3",
-    "react-native": "^0.60.5"
+    "react-native": "^0.62.2"
   },
@@ -57,2 +57,2 @@ "jest": {
   }
-}
+}

README.md

@@ -54,3 +54,3 @@ # react-native-raw-bottom-sheet
           height={300}
-          duration={250}
+          openDuration={250}
           customStyles={{
@@ -134,4 +134,6 @@ container: {
 | minClosingHeight | number   | Minimum height of Bottom Sheet before close             | 0        |
-| duration         | number   | Duration of Bottom Sheet animation                      | 300 (ms) |
+| openDuration     | number   | Open Bottom Sheet animation duration                    | 300 (ms) |
+| closeDuration    | number   | Close Bottom Sheet animation duration                   | 200 (ms) |
 | closeOnDragDown  | boolean  | Use gesture drag down to close Bottom Sheet             | false    |
+| dragFromTopOnly  | boolean  | Drag only the top area of the draggableIcon to close Bottom Sheet instead of the whole content | false    |
 | closeOnPressMask | boolean  | Press the area outside to close Bottom Sheet            | true     |
@@ -142,3 +144,3 @@ | closeOnPressBack | boolean  | Press back android to close Bottom Sheet (Android only) | true     |
 | customStyles     | object   | Custom style to Bottom Sheet                            | {}       |
-| keyboardAvoidingViewEnabled     | boolean   | Enable KeyboardAvoidingView                            | true (ios)       |
+| keyboardAvoidingViewEnabled     | boolean   | Enable KeyboardAvoidingView             | true (ios) |
 
@@ -145,0 +147,0 @@ ### Available Custom Style

src/index.js

@@ -35,3 +35,3 @@ import React, { Component } from "react";
   setModalVisible(visible, props) {
-    const { height, minClosingHeight, duration, onClose, onOpen } = this.props;
+    const { height, minClosingHeight, openDuration, closeDuration, onClose, onOpen } = this.props;
     const { animatedHeight, pan } = this.state;
@@ -42,9 +42,11 @@ if (visible) {
       Animated.timing(animatedHeight, {
+        useNativeDriver: false,
         toValue: height,
-        duration
+        duration: openDuration
       }).start();
     } else {
       Animated.timing(animatedHeight, {
+        useNativeDriver: false,
         toValue: minClosingHeight,
-        duration
+        duration: closeDuration
       }).start(() => {
@@ -69,3 +71,3 @@ pan.setValue({ x: 0, y: 0 });
         if (gestureState.dy > 0) {
-          Animated.event([null, { dy: pan.y }])(e, gestureState);
+          Animated.event([null, { dy: pan.y }], { useNativeDriver: false })(e, gestureState);
         }
@@ -77,3 +79,3 @@ },
         } else {
-          Animated.spring(pan, { toValue: { x: 0, y: 0 } }).start();
+          Animated.spring(pan, { toValue: { x: 0, y: 0 }, useNativeDriver: false }).start();
         }
@@ -96,2 +98,3 @@ }
       closeOnDragDown,
+      dragFromTopOnly,
       closeOnPressMask,
@@ -129,7 +132,10 @@ closeOnPressBack,
           <Animated.View
-            {...this.panResponder.panHandlers}
+            {...(!dragFromTopOnly && this.panResponder.panHandlers)}
             style={[panStyle, styles.container, { height: animatedHeight }, customStyles.container]}
           >
             {closeOnDragDown && (
-              <View style={styles.draggableContainer}>
+              <View
+                {...(dragFromTopOnly && this.panResponder.panHandlers)}
+                style={styles.draggableContainer}
+              >
                 <View style={[styles.draggableIcon, customStyles.draggableIcon]} />
@@ -150,5 +156,7 @@ </View>
   minClosingHeight: PropTypes.number,
-  duration: PropTypes.number,
+  openDuration: PropTypes.number,
+  closeDuration: PropTypes.number,
   closeOnDragDown: PropTypes.bool,
   closeOnPressMask: PropTypes.bool,
+  dragFromTopOnly: PropTypes.bool,
   closeOnPressBack: PropTypes.bool,
@@ -166,4 +174,6 @@ keyboardAvoidingViewEnabled: PropTypes.bool,
   minClosingHeight: 0,
-  duration: 300,
+  openDuration: 300,
+  closeDuration: 200,
   closeOnDragDown: false,
+  dragFromTopOnly: false,
   closeOnPressMask: true,
@@ -170,0 +180,0 @@ closeOnPressBack: true,

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

20830

increased by3.64%

Lines of code

359

increased by3.46%

Number of lines in readme file

173

increased by1.17%

No dependency changes