How do I close a React Native Modal?

Question

I am currently running into an issue where I can open my react-native modal just fine but once it's open I can't seem to close it. I just started using react-native about three weeks ago so I am extremely new to this.

I have tried implementing solutions that I've found online but nothing seemed to work for me. The opening functionality is great and seems to be working perfectly but when it comes to closing the modal none of the things I've tried have seemed to give the modal that ability. I have not been able to find a solid solution for my exact problem anywhere!

This is how I am opening the modal.

constructor(props) {
 super(props);
  this.state = {
   refreshing: false,
    display: false
  };
}

triggerModal() {
 this.setState(prevState => {
  return {
    display: true
   }
  });
}

<View>
  <Button onPress = { () => this.triggerModal() } title = "Open Modal"></Button>

  <DisplayModal display = { this.state.display } />
</View>

This is the modal itself, I am trying to use a button to close it.

import React from 'react'
import { Modal, View, Image, Text, StyleSheet, Button } from 'react-native';

const DisplayModal = (props) => (
  <Modal visible={ props.display } animationType = "slide" 
onRequestClose={ this.display }>
<View>
  <Button title="close" onPress = { () => !props.display }></Button>
</View>
</Modal>
)

export default DisplayModal;

As my familiarity with react-native is limited, it has been difficult wrapping my head around how some aspects of the framework function... I'm probably just making a dumb mistake somewhere in the code.

I appreciate any help with this problem!

Answer 1

You've almost got it, however we can make a few tweaks to get it working as you want.

As your DisplayModal has no state of its own, the state must be controlled by its parent component. So with that in mind we can do the following. Firstly pass an additional prop called closeDisplay to the DisplayModal. We're going to pass a function that sets the display property in state to false.

<DisplayModal 
  display={this.state.display} 
  closeDisplay={() => this.setState({display: false})} // <- we are passing this function
/>

Then in our DisplayModal component we are going to call that function to close the modal. So your DisplayModal component should look like this:

const DisplayModal = (props) => (
  <Modal 
    visible={ props.display } 
    animationType = "slide" 
    onRequestClose={ this.display }>
    <View>
      <Button 
       title="close" 
       onPress = { () => props.closeDisplay() }> // <- here we call the function that we passed
    </Button>
    </View>
  </Modal>
)

Notice that the onPress function of the Button in the DisplayModal component, we are calling the function closeDisplay(). This function then sets the state in the parent component, which in turn gets passed back down to the DisplayModal component causing it to hide.