Close React modal that was imported from other custom modal

Question

First I define this component to reuse with modal windows

Template 1:

...
import Modal from 'react-native-modal';
class CustomModal extends Component {

constructor(props){
    super(props);
}

componentWillReceiveProps(nextProps){
    this.setState({
        visible: nextProps.isVisible
    })
}

state = {
    visible: false
}


render() {
    return (
        <TouchableWithoutFeedback
        onPress={()=>{
            this.setState({
                visible: false
            });
        }}
        >
        <Modal
            isVisible={this.state.visible}
        >
            <TouchableWithoutFeedback onPress={() => {}}>
                <View>
                    {this.props.content}
                </View>
            </TouchableWithoutFeedback>
        </Modal>
        </TouchableWithoutFeedback>
    );
}
}

Now in a second component I call it:

import Modal from './common/modal';
return (<Modal
        isVisible={this.state.showModal}
        content={this.renderMyContent()}
        />
    )

Clicking in a button I setState showModal : true, my modal is open, I can click outside the modal and actually the modal disappear but my state.showModal still being : true, how can I update the state in this view?

score 0 · Answer 1 · answered Nov 01 '17 at 18:55

0

Call this.setState({showModal: false}) also in React we refer to these as components not "templates"

answered Nov 01 '17 at 18:55

Maxwelll

2,174
1
17
22

Rob Hogan · Accepted Answer · 2017-11-01T19:01:18.613

You can pass through a callback to the onModalHide prop of react-native-modal.

In your CustomModal: <Modal onModalHide={this.props.onModalHide} ... />

In your "second template"

<Modal onModalHide={() => this.setState({ showModal: false })} ... />.

Note also that there's no need to track visibility within your CustomModal's state, since it already has its visibility in a prop. Just pass the prop down to the inner Modal directly: <Modal isVisible={this.props.isVisible} .../>

Shubhnik Singh · Answer 3 · 2017-11-01T19:09:59.027

Create a function hideModal in the class where you are calling <Modal /> like this:

hideModal = () => {
    this.setState({showModal: false})
}

and pass it to the <Modal /> as a prop follows:

    import Modal from './common/modal';
    return (<Modal
        isVisible={this.state.showModal}
        content={this.renderMyContent()}
        hideModal={this.hideModal}
        />
    )

And for closing call the hideModal prop as passed above from your CustomModal component as follows:

...
import Modal from 'react-native-modal';
class CustomModal extends Component {

constructor(props){
    super(props);
}

componentWillReceiveProps(nextProps){
    this.setState({
        visible: nextProps.isVisible
    })
}

state = {
    visible: false
}


render() {
    return (
        <TouchableWithoutFeedback
        onPress={()=>{
            this.props.hideModal()
        }}
        >
        <Modal
            isVisible={this.state.visible}
        >
            <TouchableWithoutFeedback onPress={() => {}}>
                <View>
                    {this.props.content}
                </View>
            </TouchableWithoutFeedback>
        </Modal>
        </TouchableWithoutFeedback>
    );
}
}

Close React modal that was imported from other custom modal

3 Answers3