fix drawer close

fix drawer close

Author: jasonleewj85

src/Drawer.js

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component, PropTypes } from "react";
 import {
   Animated,
   Dimensions,
@@ -9,12 +9,12 @@ import {
   StatusBar,
   Text,
   TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons';
+  View
+} from "react-native";
+import Icon from "react-native-vector-icons/Ionicons";
 
 // Get screen dimensions
-const { width, height } = Dimensions.get('window');
+const { width, height } = Dimensions.get("window");
 
 export default class Drawer extends Component {
   // Define prop types
@@ -28,15 +28,15 @@ export default class Drawer extends Component {
     // Header height
     headerHeight: PropTypes.number,
     // Height of the visible teaser area at the bottom of the screen
-    teaserHeight: PropTypes.number,
+    teaserHeight: PropTypes.number
   };
 
   // Set default prop values
   static defaultProps = {
     isOpen: false,
-    header: 'Messages',
+    header: "Messages",
     headerHeight: 70,
-    teaserHeight: 75,
+    teaserHeight: 75
   };
 
   // Define state
@@ -46,7 +46,7 @@ export default class Drawer extends Component {
     // Whether the window is being pulled up/down or not
     pulling: false,
     // Zero means user haven't scrolled the content yet
-    scrollOffset: 0,
+    scrollOffset: 0
   };
 
   // Configure animations
@@ -62,18 +62,18 @@ export default class Drawer extends Component {
       // minimal possible value - a bit lower the top of the screen
       min: this.props.headerHeight,
       // When animated triggers these value updates
-      animates: [() => this._animatedOpacity, () => this._animatedWidth],
+      animates: [() => this._animatedOpacity, () => this._animatedWidth]
     },
     // Window width
     width: {
       end: width, // takes full with once opened
-      start: width - 20, // slightly narrower than screen when closed
+      start: width - 20 // slightly narrower than screen when closed
     },
     // Window backdrop opacity
     opacity: {
       start: 0, // fully transparent when closed
-      end: 1, // not transparent once opened
-    },
+      end: 1 // not transparent once opened
+    }
   };
 
   // Pan responder to handle gestures
@@ -87,18 +87,18 @@ export default class Drawer extends Component {
 
   // Animates window position
   _animatedPosition = new Animated.Value(
-    this.props.isOpen ? this.config.position.end : this.config.position.start,
+    this.props.isOpen ? this.config.position.end : this.config.position.start
   );
 
   componentWillMount() {
     // Set current position
     this._currentPosition = this._animatedPosition._value;
     // Listen for this._animatedPosition changes
-    this._animatedPosition.addListener((value) => {
+    this._animatedPosition.addListener(value => {
       // Update _currentPosition
       this._currentPosition = value.value;
       // Animate depending values
-      this.config.position.animates.map((item) => {
+      this.config.position.animates.map(item => {
         item().setValue(value.value);
       });
     });
@@ -115,7 +115,7 @@ export default class Drawer extends Component {
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderRelease: this._handlePanResponderEnd,
       onPanResponderTerminate: this._handlePanResponderEnd,
-      onShouldBlockNativeResponder: (evt, gestureState) => true,
+      onShouldBlockNativeResponder: (evt, gestureState) => true
     });
   }
 
@@ -135,27 +135,27 @@ export default class Drawer extends Component {
       // Interpolate position value into opacity value
       animatedOpacity = this._animatedOpacity.interpolate({
         inputRange: [this.config.position.end, this.config.position.start],
-        outputRange: [this.config.opacity.end, this.config.opacity.start],
+        outputRange: [this.config.opacity.end, this.config.opacity.start]
       }),
       // Interpolate position value into width value
       animatedWidth = this._animatedWidth.interpolate({
         inputRange: [
           this.config.position.min, // top of the screen
           this.config.position.start - 50, // 50 pixels higher than next point
           this.config.position.start, // a bit higher than the bottom of the screen
-          this.config.position.max, // the bottom of the screen
+          this.config.position.max // the bottom of the screen
         ],
         outputRange: [
           this.config.width.end, // keep max width after next point
           this.config.width.end, // end: max width at 50 pixel higher
           this.config.width.start, // start: min width at the bottom
-          this.config.width.start, // keep min width before previous point
-        ],
+          this.config.width.start // keep min width before previous point
+        ]
       });
     return (
       <Animated.View style={[styles.container, this.getContainerStyle()]}>
         {/* Use light status bar because we have dark background */}
-        <StatusBar barStyle={'light-content'} />
+        <StatusBar barStyle={"light-content"} />
         {/* Backdrop with animated opacity */}
         <Animated.View style={[styles.backdrop, { opacity: animatedOpacity }]}>
           {/* Close window when tapped on header */}
@@ -184,16 +184,16 @@ export default class Drawer extends Component {
               // Animate position on the screen
               transform: [
                 { translateY: this._animatedPosition },
-                { translateX: 0 },
-              ],
-            },
+                { translateX: 0 }
+              ]
+            }
           ]}
           // Handle gestures
           {...this._panResponder.panHandlers}
         >
           {/* Put all content in a scrollable container */}
           <ScrollView
-            ref={(scrollView) => {
+            ref={scrollView => {
               this._scrollView = scrollView;
             }}
             // Enable scrolling only when the window is open
@@ -249,6 +249,7 @@ export default class Drawer extends Component {
 
   // Called when gesture ended
   _handlePanResponderEnd = (evt, gestureState) => {
+    console.log(gestureState);
     // Reset offset
     this._animatedPosition.flattenOffset();
     // Reset pulling state
@@ -262,20 +263,25 @@ export default class Drawer extends Component {
     } else if (this.tapped(gestureState)) {
       // Toggle if tapped
       return this.toggle();
+    } else if (this.down(gestureState)) {
+      // Toggle if tapped
+      return this.toggle();
     }
     // Restore back to appropriate position otherwise
     this.restore();
   };
 
   // Handle content scrolling
-  _handleScroll = (event) => {
+  _handleScroll = event => {
     const { y } = event.nativeEvent.contentOffset;
     this.setState({ scrollOffset: y });
   };
 
   // Check if gesture was a tap
   tapped = gestureState => gestureState.dx === 0 && gestureState.dy === 0;
 
+  down = gestureState => gestureState.dy > 0;
+
   // Check if pulled up
   pulledUp = gestureState => gestureState.dy < 0;
 
@@ -298,7 +304,7 @@ export default class Drawer extends Component {
     this.setState({ open: true }, () => {
       Animated.timing(this._animatedPosition, {
         toValue: this.config.position.end,
-        duration: 400,
+        duration: 400
       }).start();
     });
   };
@@ -308,10 +314,10 @@ export default class Drawer extends Component {
     this._scrollView.scrollTo({ y: 0 });
     Animated.timing(this._animatedPosition, {
       toValue: this.config.position.start,
-      duration: 400,
+      duration: 400
     }).start(() => {
       this.setState({
-        open: false,
+        open: false
       });
 
       this._scrollView.scrollTo({ y: 0 });
@@ -339,57 +345,57 @@ export default class Drawer extends Component {
   // Get header style
   getHeaderStyle = () => ({
     height:
-      Platform.OS === 'ios'
+      Platform.OS === "ios"
         ? this.props.headerHeight
-        : this.props.headerHeight - 40, // compensate for the status bar
+        : this.props.headerHeight - 40 // compensate for the status bar
   });
 
   // Get container style
   getContainerStyle = () => ({
     // Move the view below others if not open or moving
     // to not block gesture handlers on other views
-    zIndex: this.state.pulling || this.state.open ? 1 : -1,
+    zIndex: this.state.pulling || this.state.open ? 1 : -1
   });
 }
 
 const styles = StyleSheet.create({
   // Main container
   container: {
     ...StyleSheet.absoluteFillObject, // fill up all screen
-    alignItems: 'center', // center children
-    justifyContent: 'flex-end', // align popup at the bottom
-    backgroundColor: 'transparent', // transparent background
-    elevation: 999, // fix android dynamic zindex issue
+    alignItems: "center", // center children
+    justifyContent: "flex-end", // align popup at the bottom
+    backgroundColor: "transparent", // transparent background
+    elevation: 999 // fix android dynamic zindex issue
   },
   // Semi-transparent background below popup
   backdrop: {
     ...StyleSheet.absoluteFillObject, // fill up all screen
-    alignItems: 'center', // center children
-    justifyContent: 'flex-start', // align popup at the bottom
-    backgroundColor: 'black',
+    alignItems: "center", // center children
+    justifyContent: "flex-start", // align popup at the bottom
+    backgroundColor: "black"
   },
   // Body
   content: {
-    backgroundColor: 'black',
-    height,
+    backgroundColor: "black",
+    height
   },
   // Header
   header: {
-    flexDirection: 'row', // arrange children in a row
-    alignItems: 'center', // center vertically
+    flexDirection: "row", // arrange children in a row
+    alignItems: "center", // center vertically
     paddingTop: 20,
-    paddingHorizontal: 20,
+    paddingHorizontal: 20
   },
   headerIcon: {
-    marginRight: 10,
+    marginRight: 10
   },
   headerTitle: {
-    flex: 1, // take up all available space
+    flex: 1 // take up all available space
   },
   headerText: {
-    color: 'white',
-    fontFamily: 'Avenir',
-    fontWeight: '600',
-    fontSize: 16,
-  },
+    color: "white",
+    fontFamily: "Avenir",
+    fontWeight: "600",
+    fontSize: 16
+  }
 });