Upgrade to v1.1.0

nysamnang · nysamnang · commit 28ae7c792929 · 2019-02-09T00:18:27.000+07:00
diff --git a/README.md b/README.md
@@ -7,12 +7,13 @@
 - Smooth Animation
 - Add Your own Component To Bottom Sheet
 - Customize Whatever You Like
+- Support Gesture Swipe Down
 - Support All Orientations
 - Support Both Android And iOS
 
-|                                                   Showcase iOS                                                   |                                                 Showcase Android                                                 |
-| :--------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------: |
-| ![](https://raw.githubusercontent.com/NYSamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-IOS.gif) | ![](https://raw.githubusercontent.com/NYSamnang/stock-images/master/react-native-raw-bottom-sheet/RNRBS-AOS.gif) |
+|                                                      Showcase iOS                                                      |                                                    Showcase Android                                                    |
+| :--------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: |
+| ![](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) |
 
 ## Installation
 
@@ -50,7 +51,7 @@ class Example extends Component {
           height={300}
           duration={250}
           customStyles={{
-            content: {
+            container: {
               justifyContent: "center",
               alignItems: "center"
             }
@@ -70,20 +71,21 @@ export default Example;
 
 ## Props
 
-| Prop         | Type     | Description                                   | Default  |
-| ------------ | -------- | --------------------------------------------- | -------- |
-| height       | number   | Height of Bottom Sheet                        | 260      |
-| duration     | number   | Duration of Bottom Sheet animation            | 300 (ms) |
-| customStyles | object   | Custom style to Bottom Sheet                  | {}       |
-| onPressMask  | function | Event on Mask (The area outside Bottom Sheet) |          |
+| Prop             | Type     | Description                                    | Default  |
+| ---------------- | -------- | ---------------------------------------------- | -------- |
+| height           | number   | Height of Bottom Sheet                         | 260      |
+| duration         | number   | Duration of Bottom Sheet animation             | 300 (ms) |
+| closeOnSwipeDown | boolean  | Use gesture swipe down to close Bottom Sheet   | true     |
+| closeOnPressMask | boolean  | Press the area outside to close Bottom Sheet   | true     |
+| onClose          | function | Callback function when Bottom Sheet was closed |          |
+| customStyles     | object   | Custom style to Bottom Sheet                   | {}       |
 
 ### Available Custom Style
 
 ```jsx
 customStyles: {
-  mask: {...}, // The area outside Bottom Sheet
-  container: {...}, // Bottom Sheet Container
-  content: {...} // Bottom Sheet Content
+  wrapper: {...}, // The Background of Component
+  container: {...} // The Container of Bottom Sheet
 }
 ```
 
@@ -98,6 +100,10 @@ customStyles: {
 
 Always set `ref` to `RBSheet` and call each method by using `this.RBSheet.methodName()` like example above.
 
+### Give me a Star
+
+If you think this project is helpful just give me a ⭐️ Star is enough because i don't drink coffee :D
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/NYSamnang/react-native-raw-bottom-sheet/blob/master/LICENSE) file for details
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-raw-bottom-sheet",
-  "version": "1.0.0",
-  "description": "Add Your Own Component To Bottom Sheet Whatever You Want (Android &amp; iOS)",
+  "version": "1.1.0",
+  "description": "Add Your Own Component To Bottom Sheet Whatever You Want (Android & iOS)",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,15 +11,15 @@
     "url": "git+https://github.com/NYSamnang/react-native-raw-bottom-sheet.git"
   },
   "keywords": [
-    "Sheet",
-    "Bottom Sheet",
-    "BottomSheet",
-    "Action Sheet",
-    "Raw Sheet",
-    "Bottom Animated",
-    "Picker",
-    "Modal",
-    "Dialog"
+    "bottom-sheet",
+    "action-sheet",
+    "raw-bottom-sheet",
+    "bottomsheet",
+    "bottom-animated",
+    "picker",
+    "swipper",
+    "modal",
+    "dialog"
   ],
   "author": "NY Samnang",
   "license": "MIT",
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,12 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { View, Modal, TouchableOpacity, Animated } from "react-native";
+import {
+  View,
+  Modal,
+  TouchableOpacity,
+  Animated,
+  PanResponder
+} from "react-native";
 import styles from "./style";
 
 const SUPPORTED_ORIENTATIONS = [
@@ -16,38 +22,51 @@ class RBSheet extends Component {
     super();
     this.state = {
       modalVisible: false,
-      animatedHeight: new Animated.Value(0)
+      animatedHeight: new Animated.Value(0),
+      pan: new Animated.ValueXY()
     };
 
-    this.onPressMask = this.onPressMask.bind(this);
-    this.setModalVisible = this.setModalVisible.bind(this);
+    this.createPanResponder();
+  }
+
+  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, duration } = this.props;
+    const { height, duration, onClose } = this.props;
     if (visible) {
       this.setState({ modalVisible: visible });
-      return Animated.timing(this.state.animatedHeight, {
+      Animated.timing(this.state.animatedHeight, {
         toValue: height,
         duration: duration
       }).start();
     } else {
-      return Animated.timing(this.state.animatedHeight, {
+      Animated.timing(this.state.animatedHeight, {
         toValue: 0,
         duration: duration
       }).start(() => {
         this.setState({ modalVisible: visible });
+        this.state.pan.setValue({ x: 0, y: 0 });
+        if (typeof onClose === "function") onClose();
       });
     }
   }
 
-  onPressMask() {
-    this.setModalVisible(false);
-    if (typeof this.props.onPressMask === "function") {
-      this.props.onPressMask();
-    }
-  }
-
   open() {
     this.setModalVisible(true);
   }
@@ -57,7 +76,10 @@ class RBSheet extends Component {
   }
 
   render() {
-    const { children, customStyles } = this.props;
+    const { closeOnPressMask, children, customStyles } = this.props;
+    const panStyle = {
+      transform: this.state.pan.getTranslateTransform()
+    };
 
     return (
       <Modal
@@ -69,25 +91,24 @@ class RBSheet extends Component {
           this.setModalVisible(false);
         }}
       >
-        <TouchableOpacity
-          style={[styles.mask, customStyles.mask]}
-          activeOpacity={1}
-          onPress={this.onPressMask}
-        >
+        <View style={[styles.wrapper, customStyles.wrapper]}>
+          <TouchableOpacity
+            style={styles.mask}
+            activeOpacity={1}
+            onPress={() => (closeOnPressMask ? this.close() : {})}
+          />
           <Animated.View
+            {...this.panResponder.panHandlers}
             style={[
+              panStyle,
               styles.container,
-              { height: this.state.animatedHeight },
-              customStyles.container
+              customStyles.container,
+              { height: this.state.animatedHeight }
             ]}
           >
-            <TouchableOpacity activeOpacity={1} style={styles.content}>
-              <View style={[styles.content, customStyles.content]}>
-                {children}
-              </View>
-            </TouchableOpacity>
+            {children}
           </Animated.View>
-        </TouchableOpacity>
+        </View>
       </Modal>
     );
   }
@@ -96,13 +117,17 @@ class RBSheet extends Component {
 RBSheet.propTypes = {
   height: PropTypes.number,
   duration: PropTypes.number,
+  closeOnSwipeDown: PropTypes.bool,
+  closeOnPressMask: PropTypes.bool,
   customStyles: PropTypes.object,
-  onPressMask: PropTypes.func
+  onClose: PropTypes.func
 };
 
 RBSheet.defaultProps = {
   height: 260,
   duration: 300,
+  closeOnSwipeDown: true,
+  closeOnPressMask: true,
   customStyles: {}
 };
 
diff --git a/src/style.js b/src/style.js
@@ -1,20 +1,19 @@
 import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
-  mask: {
+  wrapper: {
     flex: 1,
-    alignItems: "flex-end",
-    flexDirection: "row",
     backgroundColor: "#00000077"
   },
+  mask: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
   container: {
     backgroundColor: "#fff",
     width: "100%",
     height: 0,
     overflow: "hidden"
-  },
-  content: {
-    flex: 1
   }
 });
 
