Enable transparent modal presentation with <Modal />

Summary:
Enable transparent modal backgrounds using `UIModalPresentationCustom` modal presentation style.

Examples/UIExplorer/ModalExample.js

@@ -19,6 +19,7 @@ var React = require('react-native');
 var {
   Modal,
   StyleSheet,
+  SwitchIOS,
   Text,
   TouchableHighlight,
   View,
@@ -29,53 +30,98 @@ exports.framework = 'React';
 exports.title = '<Modal>';
 exports.description = 'Component for presenting modal views.';
 
-var ModalExample = React.createClass({
-  getInitialState: function() {
+var Button = React.createClass({
+  getInitialState() {
     return {
-      openModal: null,
+      active: false,
     };
   },
 
-  _closeModal: function() {
-    this.setState({openModal: null});
+  _onHighlight() {
+    this.setState({active: true});
   },
 
-  _openAnimatedModal: function() {
-    this.setState({openModal: 'animated'});
+  _onUnhighlight() {
+    this.setState({active: false});
   },
 
-  _openNotAnimatedModal: function() {
-    this.setState({openModal: 'not-animated'});
+  render() {
+    var colorStyle = {
+      color: this.state.active ? '#fff' : '#000',
+    };
+    return (
+      <TouchableHighlight
+        onHideUnderlay={this._onUnhighlight}
+        onPress={this.props.onPress}
+        onShowUnderlay={this._onHighlight}
+        style={[styles.button, this.props.style]}
+        underlayColor="#a9d9d4">
+          <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
+      </TouchableHighlight>
+    );
+  }
+});
+
+var ModalExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      modalVisible: false,
+      transparent: false,
+    };
   },
 
-  render: function() {
+  _setModalVisible(visible) {
+    this.setState({modalVisible: visible});
+  },
+
+  _toggleAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
+  _toggleTransparent() {
+    this.setState({transparent: !this.state.transparent});
+  },
+
+  render() {
+    var modalBackgroundStyle = {
+      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
+    };
+    var innerContainerTransparentStyle = this.state.transparent
+      ? {backgroundColor: '#fff', padding: 20}
+      : null;
+
     return (
       <View>
-        <Modal animated={true} visible={this.state.openModal === 'animated'}>
-          <View style={styles.container}>
-            <Text>This modal was presented with animation.</Text>
-            <TouchableHighlight underlayColor="#a9d9d4" onPress={this._closeModal}>
-              <Text>Close</Text>
-            </TouchableHighlight>
+        <Modal
+          animated={this.state.animated}
+          transparent={this.state.transparent}
+          visible={this.state.modalVisible}>
+          <View style={[styles.container, modalBackgroundStyle]}>
+            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
+              <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
+              <Button
+                onPress={this._setModalVisible.bind(this, false)}
+                style={styles.modalButton}>
+                Close
+              </Button>
+            </View>
           </View>
         </Modal>
 
-        <Modal visible={this.state.openModal === 'not-animated'}>
-          <View style={styles.container}>
-            <Text>This modal was presented immediately, without animation.</Text>
-            <TouchableHighlight underlayColor="#a9d9d4" onPress={this._closeModal}>
-              <Text>Close</Text>
-            </TouchableHighlight>
+        <View style={styles.row}>
+          <Text style={styles.rowTitle}>Animated</Text>
+          <SwitchIOS value={this.state.animated} onValueChange={this._toggleAnimated} />
         </View>
-        </Modal>
 
-        <TouchableHighlight underlayColor="#a9d9d4" onPress={this._openAnimatedModal}>
-          <Text>Present Animated</Text>
-        </TouchableHighlight>
+        <View style={styles.row}>
+          <Text style={styles.rowTitle}>Transparent</Text>
+          <SwitchIOS value={this.state.transparent} onValueChange={this._toggleTransparent} />
+        </View>
 
-        <TouchableHighlight underlayColor="#a9d9d4" onPress={this._openNotAnimatedModal}>
-          <Text>Present Without Animation</Text>
-        </TouchableHighlight>
+        <Button onPress={this._setModalVisible.bind(this, true)}>
+          Present
+        </Button>
       </View>
     );
   },
@@ -91,9 +137,36 @@ exports.examples = [
 
 var styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    backgroundColor: '#f5fcff',
     flex: 1,
     justifyContent: 'center',
+    padding: 20,
+  },
+  innerContainer: {
+    borderRadius: 10,
+  },
+  row: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+    marginBottom: 20,
+  },
+  rowTitle: {
+    flex: 1,
+    fontWeight: 'bold',
+  },
+  button: {
+    borderRadius: 5,
+    flex: 1,
+    height: 44,
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  buttonText: {
+    fontSize: 18,
+    margin: 5,
+    textAlign: 'center',
+  },
+  modalButton: {
+    marginTop: 10,
   },
 });

Libraries/Modal/Modal.js

@@ -11,6 +11,7 @@
  */
 'use strict';
 
+var PropTypes = require('ReactPropTypes');
 var React = require('React');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
@@ -24,9 +25,16 @@ class Modal extends React.Component {
       return null;
     }
 
+    if (this.props.transparent) {
+      var containerBackgroundColor = {backgroundColor: 'transparent'};
+    }
+
     return (
-      <RCTModalHostView animated={this.props.animated} style={styles.modal}>
-        <View style={styles.container}>
+      <RCTModalHostView
+        animated={this.props.animated}
+        transparent={this.props.transparent}
+        style={styles.modal}>
+        <View style={[styles.container, containerBackgroundColor]}>
           {this.props.children}
         </View>
       </RCTModalHostView>
@@ -34,6 +42,11 @@ class Modal extends React.Component {
   }
 }
 
+Modal.propTypes = {
+  animated: PropTypes.bool,
+  transparent: PropTypes.bool,
+};
+
 var styles = StyleSheet.create({
   modal: {
     position: 'absolute',

React/Views/RCTModalHostView.h

@@ -9,11 +9,14 @@
 
 #import <UIKit/UIKit.h>
 
+#import "RCTInvalidating.h"
+
 @class RCTBridge;
 
-@interface RCTModalHostView : UIView
+@interface RCTModalHostView : UIView <RCTInvalidating>
 
 @property (nonatomic, assign, getter=isAnimated) BOOL animated;
+@property (nonatomic, assign, getter=isTransparent) BOOL transparent;
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
 

React/Views/RCTModalHostView.m

@@ -81,4 +81,21 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:coder)
   }
 }
 
+- (void)invalidate
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [_modalViewController dismissViewControllerAnimated:self.animated completion:nil];
+  });
+}
+
+- (BOOL)isTransparent
+{
+  return _modalViewController.modalPresentationStyle == UIModalPresentationCustom;
+}
+
+- (void)setTransparent:(BOOL)transparent
+{
+  _modalViewController.modalPresentationStyle = transparent ? UIModalPresentationCustom : UIModalPresentationFullScreen;
+}
+
 @end

React/Views/RCTModalHostViewManager.h

@@ -9,6 +9,8 @@
 
 #import "RCTViewManager.h"
 
-@interface RCTModalHostViewManager : RCTViewManager
+#import "RCTInvalidating.h"
+
+@interface RCTModalHostViewManager : RCTViewManager <RCTInvalidating>
 
 @end

React/Views/RCTModalHostViewManager.m

@@ -14,14 +14,37 @@
 #import "RCTTouchHandler.h"
 
 @implementation RCTModalHostViewManager
+{
+  NSHashTable *_hostViews;
+}
 
 RCT_EXPORT_MODULE()
 
+- (instancetype)init
+{
+  if ((self = [super init])) {
+    _hostViews = [NSHashTable weakObjectsHashTable];
+  }
+
+  return self;
+}
+
 - (UIView *)view
 {
-  return [[RCTModalHostView alloc] initWithBridge:self.bridge];
+  UIView *view = [[RCTModalHostView alloc] initWithBridge:self.bridge];
+  [_hostViews addObject:view];
+  return view;
+}
+
+- (void)invalidate
+{
+  for (RCTModalHostView *hostView in _hostViews) {
+    [hostView invalidate];
+  }
+  [_hostViews removeAllObjects];
 }
 
 RCT_EXPORT_VIEW_PROPERTY(animated, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(transparent, BOOL)
 
 @end