Dismiss modal when navigating to another screen

Question

I have an App with Home Screen, in this screen I'm rendering a Modal which opens on button press, inside the Modal I have a button that is supposed to navigate me to another screen, it's navigating correctly but when I navigate to another screen the modal doesn't disappear, how can i hide it?

Adding the code to demonstrate

Home:

import React, { Component } from 'react';
import Modal from './Modal';

class Home extends Component {
  state = {
    isModalVisible: false
  };

  toggleModal = () =>
    this.setState({ isModalVisible: !this.state.isModalVisible });

  render() {
    const { navigate } = this.props.navigation;

    <Modal
    visible={this.state.isModalVisible}
    navigation={this.props.navigation}
    />
    );
  }
}

export default Home;

Modal:

import React, { Component } from "react";
import Modal from "react-native-modal";

class Modal extends Component {

  render() {
    const { navigate } = this.props.navigation;

    return (
        <Modal
        isVisible={this.props.visible}>
          <Button onPress={() => {navigate('Main')}}>
            >Button</Text>
          </Button>
        </Modal>
    );
  }
}

export default Modal;

score 5 · Accepted Answer · answered Sep 18 '18 at 17:20

Ideally you should wait for the setState to finish inside the callback and then navigate to the screen, since the methods are async and may disrupt the state if navigate is called before setState has finished completing.

Also parent should control the state of the child.

Home

onNavigate = () => {
  this.setState({isModalVisible: false}, () => this.props.navigation.navigate('Main')
}

<Modal
    visible={this.state.isModalVisible}
    onNavigate={this.onNavigate}
 />

Modal

<Modal
  isVisible={this.props.visible}>
    <Button onPress={this.props.onNavigate}>
      <Text>Button</Text>
    </Button>
</Modal>

Aseem Upadhyay · Answer 2 · 2018-09-18T17:13:01.487

You should provide a reference to the variable that defines the visibility state of the modal component. You'll need to define a function hides the modal and pass the function reference to the modal component and execute it on press of the button along side with the navigation action.

Something on the lines of -

Your home screen should have a function like -

onModalClose = () => {this.setState({isModalVisible: false})}

then pass this as reference to the modal component like -

  <Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
onModalClose={this.onModalClose}
/>

and call it on the onPress() method of the <Button/> component like-

          <Button onPress={() => {this.props.onModalClose(); navigate('Main')}}>

EDIT

Just noticed, since you already have a function that toggles the visibility of your modal, you need not define a new function. You can pass that function reference to the modal component itself.

  <Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
onModalClose={this.toggleModal}
/>

when i click on the button i get this error: _this2.props.onModalClose() is not a function — Judy M., Sep 18 '18 at 17:20

score 0 · Answer 3 · answered Sep 11 '19 at 03:24

I took Pritish Vaidya answer and made it usable for any screen.

Home

import React, { Component } from 'react';
import Modal from './Modal';

class Home extends Component {
  state = {
    isModalVisible: false
  };

  toggleModal(screenName) {
    this.setState({isModalVisible: !this.state.isModalVisible });
    if (screenName && screenName != '') {
       this.props.navigation.navigate(screenName);
    }
  }

  render() {
    <Modal
      visible={this.state.isModalVisible}
      onDismiss={(screenName) => { this.toggleModal(screenName); }}
    />
    );
  }
}

export default Home;

Modal:

class Modal extends Component {

    dismissScreen(screenName) {
        const dismissAction = this.props.onDismiss;
        dismissAction(screenName);
    }

    render() {
      return(
        <View style={{ flex: 1, padding: 20 }}>
            <Button
            title="Dismiss Modal"
            onPress={() => {this.dismissScreen();}}
            />
            <Button
            title="Navigate to Other Screen"
            onPress={() => {this.dismissScreen('ScreenName');}}
            />
        </View>
      );
    }
}

Dismiss modal when navigating to another screen

3 Answers3

Home

Modal