Skip to content

Commit

Permalink
Merge pull request #144 from prtkkmrsngh/master
Browse files Browse the repository at this point in the history
Add coverScreen prop to fit parent components
  • Loading branch information
maxs15 authored Jun 28, 2017
2 parents 32b0e9d + 15488d4 commit 3b69b71
Showing 1 changed file with 26 additions and 5 deletions.
31 changes: 26 additions & 5 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ var {
BackAndroid,
BackHandler,
Platform,
Modal
} = require('react-native');

var BackButton = BackHandler || BackAndroid;
Expand Down Expand Up @@ -58,6 +59,7 @@ var ModalBox = React.createClass({
animationDuration: React.PropTypes.number,
backButtonClose: React.PropTypes.bool,
easing: React.PropTypes.func,
coverScreen: React.PropTypes.bool,

onClosed: React.PropTypes.func,
onOpened: React.PropTypes.func,
Expand All @@ -78,6 +80,7 @@ var ModalBox = React.createClass({
animationDuration: 400,
backButtonClose: false,
easing: Easing.elastic(0.8),
coverScreen: false,
};
},

Expand Down Expand Up @@ -396,11 +399,11 @@ var ModalBox = React.createClass({
var size = {height: this.state.containerHeight, width: this.state.containerWidth};
var offsetX = (this.state.containerWidth - this.state.width) / 2;
var backdrop = this.renderBackdrop(size);

if (!visible) return <View/>

return (
<View style={[styles.transparent, styles.absolute]} pointerEvents={'box-none'} onLayout={this.onContainerLayout}>
var coverScreen = this.props.coverScreen;
var modalContainer = [];
modalContainer = (
<View style={{ flex: 1 }} pointerEvents={'box-none'} onLayout={this.onContainerLayout}>
{backdrop}
<Animated.View
onLayout={this.onViewLayout}
Expand All @@ -410,6 +413,24 @@ var ModalBox = React.createClass({
</Animated.View>
</View>
);

if (!visible) return <View/>

if (coverScreen) {
return (
<Modal onRequestClose={() => this.close()} supportedOrientations={['landscape', 'portrait']} transparent visible={visible}>
<View style={[styles.transparent, styles.absolute]}>
{modalContainer}
</View>
</Modal>
);
}

return (
<View style={[styles.transparent, styles.absolute]}>
{modalContainer}
</View>
);
},

/****************** PUBLIC METHODS **********************/
Expand Down

0 comments on commit 3b69b71

Please sign in to comment.