Enable transparent modal presentation with <Modal />

Summary:
Enable transparent modal backgrounds using `UIModalPresentationCustom` modal presentation style.
This commit is contained in:
Alexsander Akers
2015-08-13 15:09:10 -01:00
parent dc01ecbc98
commit 0f14933948
6 changed files with 168 additions and 37 deletions

View File

@@ -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',