How to Make React Native Modal Close Automatically

Last Updated on December 13, 2020.

We use modals to show alerts, messages or any other information to the user. As modals are basically dialog boxes which displayed over parent view, it attracts user attention. Hence, modals are an important component in React Native.

In most of the modals, there will be a close button which makes the modal hide when it is pressed. But in this blogpost, I will show how to automatically close react native modal without close button.

To make the modal close automatically, we use setTimeout method. If you want to know how to use setTimeout method then see this blog post. Let’s go through the react native example given below:

Class based component

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
    };
  }

  showModal = () => {
    this.setState({
      modalVisible: true,
    });
    setTimeout(() => {
      this.setState({
        modalVisible: false,
      });
    }, 5000);
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'white',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Modal
          animationType="slide"
          transparent
          visible={this.state.modalVisible}
          onRequestClose={() => {
            console.log('Modal has been closed.');
          }}>
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              backgroundColor: 'gray',
              justifyContent: 'center',
              margin: 25,
            }}>
            <Text style={{fontSize: 16, color: 'white'}}>
              This modal will close in Five Seconds..
            </Text>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.showModal();
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

export default App;

Function based component

import React, {useState} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const showModal = () => {
    setModalVisible(true);
    setTimeout(() => {
      setModalVisible(false);
    }, 5000);
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Modal
        animationType="slide"
        transparent
        visible={modalVisible}
        onRequestClose={() => {
          console.log('Modal has been closed.');
        }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            backgroundColor: 'gray',
            justifyContent: 'center',
            margin: 25,
          }}>
          <Text style={{fontSize: 16, color: 'white'}}>
            This modal will close in Five Seconds..
          </Text>
        </View>
      </Modal>

      <TouchableHighlight
        onPress={() => {
          showModal();
        }}>
        <Text>Show Modal</Text>
      </TouchableHighlight>
    </View>
  );
};

export default App;

In the react native example, the modal is shown when the touchableHighlight component is pressed. Inside showModal function, we use setTimeout method to show the modal for five seconds and then the modal is hidden by setting modalVisible false.

Te output of the above example is as given below:

1 thought on “How to Make React Native Modal Close Automatically”

Leave a Reply

%d bloggers like this: