title: Return useState to default afer onPress
body: <p>I'm writing a customised modal for prompts on my react native application. I'd want the modal to appear on click of an image. So, I added an onPress to the image to change a state value. When the state value is true, I'd want the modal to be displayed. The state successfully becomes true. However, I'd want it to switch back to false after the modal closes.</p>
  <p>I tried changing the values from inside the component but it throws an error since I'm importing the component, and passing values as props. Below is what I have:</p>
  <pre><code>const [showPrompt, setShowPrompt] = useState(false)
  </code></pre>
  <pre><code> const show =() =&gt; {
          setShowPrompt(true);
          setShowPrompt(false)
          console.log(showPrompt)
      }
  </code></pre>
  <pre><code>&lt;TouchableOpacity onPress={show}&gt;
                  &lt;Image source={{uri: imageSource}} style={{height:130, width:150}}/&gt;
                  &lt;Text style={{color:'white', textAlign:'center', fontSize:16, fontFamily:fonts.nunitoRegular}}&gt;{title}&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;   
  </code></pre>
  <pre><code>  {showPrompt &amp;&amp; &lt;CustomPrompt 
                              open={modalVisible} 
                              onClose={()=&gt; setModalVisible(!modalVisible)} 
                              openModalText={()=&gt;setModalVisible(true)} 
                              /&gt; 
                              
                              }
  </code></pre>