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

Comparing version 2.0.2 to 2.0.3

__tests__/RBSheet.test.js

@@ -49,2 +49,42 @@ import React from "react";
     });
+
+    describe("Mask", () => {
+      it("should render mask", () => {
+        const wrapper = shallow(<RBSheet />);
+        expect(wrapper.find(TouchableOpacity).length).toEqual(1);
+      });
+
+      it("should closeOnPressMask when given prop true", () => {
+        const wrapper = shallow(<RBSheet closeOnPressMask />);
+        wrapper.instance().close = jest.fn();
+        wrapper.find(TouchableOpacity).simulate("Press");
+        expect(wrapper.instance().close).toHaveBeenCalled();
+      });
+
+      it("should not closeOnPressMask when given prop false", () => {
+        const wrapper = shallow(<RBSheet closeOnPressMask={false} />);
+        wrapper.instance().close = jest.fn();
+        wrapper.find(TouchableOpacity).simulate("Press");
+        expect(wrapper.instance().close).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("Modal", () => {
+      it("should render modal", () => {
+        const wrapper = shallow(<RBSheet />);
+        expect(wrapper.find(Modal).length).toEqual(1);
+      });
+    });
+
+    describe("DraggableArea", () => {
+      it("should not render draggable area", () => {
+        const wrapper = shallow(<RBSheet />);
+        expect(wrapper.find(View).length).toEqual(1);
+      });
+
+      it("should render draggable area", () => {
+        const wrapper = shallow(<RBSheet closeOnDragDown />);
+        expect(wrapper.find(View).length).toEqual(3);
+      });
+    });
   });
@@ -99,35 +139,6 @@
     });
-  });
 
-  describe("Button", () => {
-    it("should render <TouchableOpacity>", () => {
-      const wrapper = shallow(<RBSheet />);
-      expect(wrapper.find(TouchableOpacity).length).toEqual(1);
-    });
-
-    it("should closeOnPressMask when given prop true", () => {
-      const wrapper = shallow(<RBSheet closeOnPressMask />);
-      wrapper.instance().close = jest.fn();
-      wrapper.find(TouchableOpacity).simulate("Press");
-      expect(wrapper.instance().close).toHaveBeenCalled();
-    });
-
-    it("should not closeOnPressMask when given prop false", () => {
-      const wrapper = shallow(<RBSheet closeOnPressMask={false} />);
-      wrapper.instance().close = jest.fn();
-      wrapper.find(TouchableOpacity).simulate("Press");
-      expect(wrapper.instance().close).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("Modal", () => {
-    it("should render <Modal>", () => {
-      const wrapper = shallow(<RBSheet />);
-      expect(wrapper.find(Modal).length).toEqual(1);
-    });
-
     it("should onRequestClose called", () => {
       const mockFn = jest.fn();
       RBSheet.prototype.setModalVisible = mockFn;
-      const wrapper = shallow(<RBSheet />);
       wrapper
@@ -137,3 +148,2 @@ .find(Modal)
         .onRequestClose();
-
       expect(mockFn).toHaveBeenCalled();
@@ -140,0 +150,0 @@ });

package.json

 {
   "name": "react-native-raw-bottom-sheet",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Add Your Own Component To Bottom Sheet Whatever You Want (Android & iOS)",
   "main": "index.js",
-  "typings": "typings/index.d.ts",
+  "typings": "index.d.ts",
   "scripts": {
-    "test": "jest"
+    "test": "jest --coverage"
   },
@@ -31,5 +31,2 @@ "repository": {
   "homepage": "https://github.com/nysamnang/react-native-raw-bottom-sheet#readme",
-  "dependencies": {
-    "prop-types": "^15.6.2"
-  },
   "devDependencies": {
@@ -45,8 +42,9 @@ "enzyme": "^3.9.0",
     "eslint-plugin-react": "^7.12.4",
-    "jest": "^24.1.0",
+    "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.52.0",
     "prettier": "^1.16.4",
-    "react": "^16.6.3",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
     "react-dom": "^16.8.3",
-    "react-native": "^0.59.3"
+    "react-native": "^0.60.5"
   },
@@ -53,0 +51,0 @@ "jest": {

README.md

@@ -19,3 +19,3 @@ # react-native-raw-bottom-sheet
 | :--------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: |
-| ![](https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-IOS-1.1.0.gif) | ![](https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-AOS-1.1.0.gif) |
+| ![](https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-IOS-2.0.3.gif) | ![](https://raw.githubusercontent.com/nysamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-AOS-2.0.3.gif) |
 
@@ -44,3 +44,3 @@ ## Installation
     return (
-      <View style={{ flex: 1, marginTop: 50, alignItems: "center" }}>
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
         <Button
@@ -77,2 +77,18 @@ title="OPEN BOTTOM SHEET"
 
+### Dynamic Bottom Sheet
+
+```jsx
+renderItem = (item, index) => (
+    <View>
+      <Button title=`OPEN BOTTOM SHEET-${index}` onPress={() => this[RBSheet + index].open()} />
+      <RBSheet
+        ref={ref => {
+          this[RBSheet + index] = ref;
+        }}>
+        <YourOwnComponent />
+      </RBSheet>
+    </View>
+  );
+```
+
 ## Props
@@ -88,3 +104,3 @@
 | closeOnPressMask | boolean  | Press the area outside to close Bottom Sheet   | true     |
-| onClose          | function | Callback function when Bottom Sheet has closed |          |
+| onClose          | function | Callback function when Bottom Sheet has closed | null     |
 | customStyles     | object   | Custom style to Bottom Sheet                   | {}       |
@@ -94,6 +110,7 @@
 
-```jsx
+```
 customStyles: {
   wrapper: {...}, // The Root of Component
-  container: {...} // The Container of Bottom Sheet
+  container: {...}, // The Container of Bottom Sheet
+  draggableIcon: {...} // The Draggable Icon (If you set closeOnDragDown to true)
 }
@@ -112,3 +129,4 @@ ```
 - Always set `ref` to `RBSheet` and call each method by using `this.RBSheet.methodName()` like example above.
-- If you want to use `Scrollable Component` like `ScrollView`, `FlatList` or something else inside `RBSheet`, you have to change props `closeOnDragDown` to `false` otherwise it won't work.
+- If you want to use `Scrollable Component` like `ScrollView`, `FlatList` or something else inside `RBSheet`, you have to set props `closeOnDragDown` to `false` otherwise it won't work.
+- The demo source codes are in `example folder`.
 
@@ -115,0 +133,0 @@ ## Give me a Star

src/index.js

 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { View, Modal, TouchableOpacity, Animated, PanResponder } from "react-native";
+import {
+  View,
+  KeyboardAvoidingView,
+  Modal,
+  TouchableOpacity,
+  Animated,
+  PanResponder,
+  Platform
+} from "react-native";
 import styles from "./style";
@@ -80,3 +88,3 @@
   render() {
-    const { animationType, closeOnPressMask, children, customStyles } = this.props;
+    const { animationType, closeOnDragDown, closeOnPressMask, children, customStyles } = this.props;
     const { animatedHeight, pan, modalVisible } = this.state;
@@ -97,15 +105,24 @@ const panStyle = {
       >
-        <View style={[styles.wrapper, customStyles.wrapper]}>
+        <KeyboardAvoidingView
+          enabled={Platform.OS === "ios"}
+          behavior="padding"
+          style={[styles.wrapper, customStyles.wrapper]}
+        >
           <TouchableOpacity
             style={styles.mask}
             activeOpacity={1}
-            onPress={() => (closeOnPressMask ? this.close() : {})}
+            onPress={() => (closeOnPressMask ? this.close() : null)}
           />
           <Animated.View
             {...this.panResponder.panHandlers}
-            style={[panStyle, styles.container, customStyles.container, { height: animatedHeight }]}
+            style={[panStyle, styles.container, { height: animatedHeight }, customStyles.container]}
           >
+            {closeOnDragDown && (
+              <View style={styles.draggableContainer}>
+                <View style={[styles.draggableIcon, customStyles.draggableIcon]} />
+              </View>
+            )}
             {children}
           </Animated.View>
-        </View>
+        </KeyboardAvoidingView>
       </Modal>
@@ -112,0 +129,0 @@ );

src/style.js

@@ -17,2 +17,14 @@ import { StyleSheet } from "react-native";
     overflow: "hidden"
+  },
+  draggableContainer: {
+    width: "100%",
+    alignItems: "center",
+    backgroundColor: "transparent"
+  },
+  draggableIcon: {
+    width: 35,
+    height: 5,
+    borderRadius: 5,
+    margin: 10,
+    backgroundColor: "#ccc"
   }
@@ -19,0 +31,0 @@ });

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

30568

increased by80.28%

Dependency count

0

decreased by-100%

Number of package files

16

increased by33.33%

Lines of code

812

increased by179.04%

Number of lines in readme file

138

increased by15%

Worsened metrics

Dev dependency count

16

increased by6.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedprop-types@^15.6.2

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)