diff --git a/index.js b/index.js index 0b715a0..d998ff9 100644 --- a/index.js +++ b/index.js @@ -15,6 +15,7 @@ var { var Button = require('./button.js'); var Overlay = require('./overlay.js'); +var ModalActionSheet = require('./modal.js'); var Sheet = require('./sheet.js'); module.exports = React.createClass({ @@ -46,6 +47,7 @@ module.exports = React.createClass({ }, }); module.exports.Button = Button; +module.exports.ModalActionSheet = ModalActionSheet; var styles = StyleSheet.create({ actionSheetContainer: { diff --git a/modal.js b/modal.js new file mode 100644 index 0000000..aa6e9e6 --- /dev/null +++ b/modal.js @@ -0,0 +1,56 @@ +import React, {Modal} from 'react-native'; + +import ActionSheet from '@remobile/react-native-action-sheet'; + +//The idea behind this thin wrapper is that it allows you to put action sheet's anywhere in your component tree, +//not just in a component that consumes the entire screen. + +export default class ModalActionSheet extends React.Component { + constructor(props, context) { + super(props, context); + this.state = { + modalVisible: this.props.visible || false, + sheetVisible: false, + } + } + + componentWillReceiveProps(nextProps) { + if(nextProps.visible && !this.props.visible) this.show(); + else if(!nextProps.visible && this.props.visible) this.hide(); + } + + show() { + console.log('SHOW') + this.setState({modalVisible: true}); + } + hide() { + this.setState({sheetVisible: false}); + //allow ActionSheet to slide down animation to be seen before hiding modal + + setTimeout(() => { + this.setState({modalVisible: false}); + }, 300); + } + + render() { + return ( + this.setState({sheetVisible: true})} + //onDismiss={this.onDismiss} //not working in RN 22, so timers used instead; ideally onDismiss and onCancel are used in combination similar to onShow/show; perhaps in RN 23+ when onRequestClose works + > + + {this.props.children} + + + ); + } +} + +ModalActionSheet.Button = ActionSheet.Button;