fix overlay shouldCaptureGestures implementation

Author: Zack Story

examples/RNDrawerExample/src/App.js

@@ -31,8 +31,7 @@ export default class App extends Component {
           <ControlPanel closeDrawer={this.closeDrawer} />
         }
         acceptDoubleTap
-        openDrawerOffset={0.35}
-        styles={{main: {shadowColor: "#000000", shadowOpacity: 0.3, shadowRadius: 15}}}
+        styles={{main: {shadowColor: '#000000', shadowOpacity: 0.3, shadowRadius: 15}}}
         onOpen={() => {
           console.log('onopen')
           this.setState({drawerOpen: true})
@@ -42,11 +41,12 @@ export default class App extends Component {
           this.setState({drawerOpen: false})
         }}
         tweenDuration={100}
-        negotiatePan={true}
         panThreshold={0.08}
-        panOpenMask={0.35}
         disabled={this.state.drawerDisabled}
-        tweenHandler={Drawer.tweenPresets.parallax}>
+        openDrawerOffset={0.2}
+        panOpenMask={0.2}
+        negotiatePan
+        >
         <Main />
       </Drawer>
     )

index.js

@@ -189,6 +189,7 @@ class Drawer extends Component {
     return false
   };
 
+  // @TODO using shouldCaptureGestures in pan responder may be obsolete now that we have overlay
   shouldCaptureGestures = () => {
     if (this.props.captureGestures === true) return true
     if (this.props.captureGestures === 'closed' && this._open === false) return true
@@ -212,11 +213,16 @@ class Drawer extends Component {
   };
 
   handleMoveShouldSetPanResponderCapture = (e, gestureState) => {
-    if (this.shouldCaptureGestures() && this.props.negotiatePan) return this.handleMoveShouldSetPanResponder(e, gestureState)
+    if (this.shouldCaptureGestures() && this.props.negotiatePan) return this.processMoveShouldSet(e, gestureState)
     return false
   };
 
   handleMoveShouldSetPanResponder = (e, gestureState) => {
+    if (!this.shouldCaptureGestures() && this.props.negotiatePan) return this.processMoveShouldSet(e, gestureState)
+    return false
+  };
+
+  processMoveShouldSet = (e, gestureState) => {
     let inMask = this.testPanResponderMask(e, gestureState)
     if (!inMask) return false
     if (!this.props.acceptPan) return false
@@ -374,7 +380,7 @@ class Drawer extends Component {
         style={[this.stylesheet.main, {height: this.getHeight(), width: this.getMainWidth()}]}
         >
         {this.props.children}
-        {this.shouldCaptureGestures()
+        {this.captureGestures !== false
           ? <View
               ref={c => this.mainOverlay = c}
               style={styles.mainOverlay}
@@ -497,6 +503,7 @@ class Drawer extends Component {
     if (didRotationChange) this._syncAfterUpdate = true
     viewport = viewport || this.state.viewport
     props = props || this.props
+    // @TODO code should be methodized and shared with similar calls
     this._offsetClosed = props.closedDrawerOffset % 1 === 0 ? props.closedDrawerOffset : props.closedDrawerOffset * viewport.width
     this._offsetOpen = props.openDrawerOffset % 1 === 0 ? props.openDrawerOffset : props.openDrawerOffset * viewport.width
     this.setState({ viewport })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-drawer",
-  "version": "2.0.0-beta3",
+  "version": "2.0.0-beta4",
   "description": "React Native Drawer",
   "main": "index.js",
   "scripts": {