Add "touchToClose" functionality.

examples/simple/index.ios.js

@@ -39,20 +39,49 @@ var Menu = React.createClass({
 });
 
 var Button = React.createClass({
+
+  handlePress: function(e) {
+    this.props.menuActions.toggle();
+    if (this.props.onPress) {
+      this.props.onPress(e);
+    }
+  },
+
   render: function() {
     return (
       <TouchableOpacity
-        onPress={this.props.menuActions.toggle}>
+        onPress={this.handlePress}>
         <Text style={this.props.style}>{this.props.children}</Text>
       </TouchableOpacity>
     );
   }
 })
 
 var simple = React.createClass({
+
+  getInitialState: function() {
+    return {
+      touchToClose: false
+    };
+  },
+
+  handleOpenWithTouchToClose: function() {
+    this.setState({
+      touchToClose: true
+    });
+  },
+
+  handleChange: function(isOpen) {
+    if (!isOpen) { // when it closes, reset touchToClose
+      this.setState({
+        touchToClose: false
+      });
+    }
+  },
+
   render: function() {
     return (
-      <SideMenu menu={<Menu />}>
+      <SideMenu menu={<Menu />} touchToClose={this.state.touchToClose} onChange={this.handleChange}>
         <View style={styles.container}>
           <Text style={styles.welcome}>
             Welcome to React Native!
@@ -65,7 +94,8 @@ var simple = React.createClass({
             Cmd+Control+Z for dev menu
           </Text>
         </View>
-        <Button style={styles.button}>Open menu</Button>
+        <Button style={styles.button}>Toggle menu</Button>
+        <Button style={styles.button2} onPress={this.handleOpenWithTouchToClose}>Open menu (Overlay Closes)</Button>
       </SideMenu>
     );
   }
@@ -85,6 +115,12 @@ var styles = StyleSheet.create({
     backgroundColor: 'red',
     borderRadius: 20,
   },
+  button2: {
+    position: 'absolute',
+    bottom: 20,
+    backgroundColor: 'red',
+    borderRadius: 20,
+  },
   caption: {
     fontSize: 20,
     fontWeight: 'bold',

index.js

@@ -8,6 +8,7 @@ var queueAnimation = require('./animations');
 var {
   PanResponder,
   View,
+  TouchableWithoutFeedback
 } = React;
 
 /**
@@ -160,6 +161,9 @@ var SideMenu = React.createClass({
     }
 
     this.isOpen = true;
+
+    // Force update to make the overlay appear (if touchToClose is set)
+    this.props.touchToClose && this.forceUpdate();
   },
 
   /**
@@ -179,6 +183,9 @@ var SideMenu = React.createClass({
     }
 
     this.isOpen = false;
+
+    // Force update to make the overlay disappear (if touchToClose is set)
+    this.props.touchToClose && this.forceUpdate();
   },
 
   /**
@@ -213,23 +220,40 @@ var SideMenu = React.createClass({
     this.prevLeft = this.left;
   },
 
+  handleOverlayPress: function(e: Object) {
+    this.closeMenu();
+  },
+
   /**
    * Get content view. This view will be rendered over menu
    * @return {React.Component}
    */
   getContentView: function() {
     var getMenuActions = this.getMenuActions();
+
+    var overlay = null;
+
+    if (this.isOpen && this.props.touchToClose) {
+      overlay = (
+        <TouchableWithoutFeedback onPress={this.handleOverlayPress}>
+          <View style={styles.overlay} />
+        </TouchableWithoutFeedback>
+      );
+    }
+
+    var children = React.Children.map(this.props.children, function(child) {
+      return React.cloneElement(child, {
+        menuActions: getMenuActions
+      });
+    });
+
     return (
       <View
         style={styles.frontView}
         ref={(sideMenu) => this.sideMenu = sideMenu}
         {...this.responder.panHandlers}>
-
-        {React.Children.map(this.props.children, function(child) {
-          return React.cloneElement(child, {
-            menuActions: getMenuActions
-          });
-        })}
+        {children}
+        {overlay}
       </View>
     );
   },
@@ -280,13 +304,15 @@ var SideMenu = React.createClass({
 SideMenu.propTypes = {
   toleranceX: React.PropTypes.number,
   toleranceY: React.PropTypes.number,
-  onChange: React.PropTypes.func
+  onChange: React.PropTypes.func,
+  touchToClose: React.PropTypes.boolean
 }
 
 SideMenu.defaultProps = {
   toleranceY: 10,
   toleranceX: 10,
-  onChange: noop
+  onChange: noop,
+  touchToClose: false
 };
 
 module.exports = SideMenu;

styles.js

@@ -26,5 +26,13 @@ module.exports = StyleSheet.create({
     backgroundColor: 'transparent',
     width: deviceScreen.width,
     height: deviceScreen.height,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    backgroundColor: 'transparent'
   }
-});
+});