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

@ -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>
</Modal>
<View style={styles.row}>
<Text style={styles.rowTitle}>Animated</Text>
<SwitchIOS value={this.state.animated} onValueChange={this._toggleAnimated} />
</View>
<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,
},
});

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

View File

@ -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;

View File

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

View File

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

View File

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