title: how to make background blur when modal open ups in reactnative
body: <p><a href="https://i.stack.imgur.com/GXnwB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GXnwB.png" alt="enter image description here" /></a></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { View, StyleSheet, Text, TouchableOpacity, Modal } from 'react-native'
  
  const ModalContent = ({ visiblity, toggleModal }) =&gt; {
      return (
          &lt;Modal animationType='slide' transparent={true} visible={visiblity} onRequestClose={() =&gt; {
              toggleModal()
          }} &gt;
              &lt;View style={styles.container}&gt;
                  &lt;TouchableOpacity&gt;
                      &lt;Text style={styles.textButton}&gt;Edit&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;TouchableOpacity&gt;
                      &lt;Text style={styles.textButton}&gt;Invite&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;TouchableOpacity&gt;
                      &lt;Text style={styles.textButton}&gt;Delete&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          &lt;/Modal&gt;
      )
  }
  
  const styles = StyleSheet.create({
      container: {
          backgroundColor: 'white',
          borderTopRightRadius: 25,
          borderTopLeftRadius: 25,
          height: 150,
          alignItems: 'center',
          elevation: 10,
          alignItems: 'flex-start',
          justifyContent: 'space-around',
          paddingLeft: 20,
          marginTop: 420
      },
  
      textButton: {
          fontSize: 13,
          color: 'black',
      }
  })
  
  export default ModalContent
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { View, StyleSheet, Text, TouchableOpacity, Modal } from 'react-native'
  
  const ModalContent = ({ visiblity, toggleModal }) =&gt; {
      return (
          &lt;Modal animationType='slide' transparent={true} visible={visiblity} onRequestClose={() =&gt; {
              toggleModal()
          }} &gt;
              &lt;View style={styles.container}&gt;
                  &lt;TouchableOpacity&gt;
                      &lt;Text style={styles.textButton}&gt;Edit&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;TouchableOpacity&gt;
                      &lt;Text style={styles.textButton}&gt;Invite&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;TouchableOpacity&gt;
                      &lt;Text style={styles.textButton}&gt;Delete&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          &lt;/Modal&gt;
      )
  }
  
  const styles = StyleSheet.create({
      container: {
          backgroundColor: 'white',
          borderTopRightRadius: 25,
          borderTopLeftRadius: 25,
          height: 150,
          alignItems: 'center',
          elevation: 10,
          alignItems: 'flex-start',
          justifyContent: 'space-around',
          paddingLeft: 20,
          marginTop: 420
      },
  
      textButton: {
          fontSize: 13,
          color: 'black',
      }
  })
  
  export default ModalContent
  </code></pre>