title: How to dim a background in react native modal?
body: <p>Following is my created react native Modal and still couldn't find how to dim the background and transparent around pop-up modal.I am not using any external libraries and trying to find solution without libraries.Is it possible to do with on this way?</p>
  
  <p><a href="https://i.stack.imgur.com/dOxSC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dOxSC.png" alt="enter image description here"></a></p>
  
  <h1>My Modal Component</h1>
  
  <pre><code>render() {
  let modal = this.state.modalType=='skill'? &lt;SkillModal /&gt; : &lt;TrialModal /&gt;;
  return (
    &lt;View style={styles.container}&gt;
      &lt;Modal
        animationType='slide'
        onRequestClose={() =&gt; console.log('no warning')}
        presentationStyle="FormSheet"
        transparent
        visible={this.state.showModal}
      &gt;
        &lt;View&gt;
          &lt;View style={styles.modalView} &gt;
            &lt;TouchableOpacity
              onPress={this.closeModalFunc}
            &gt;
              &lt;Text style={styles.closeText}&gt;X&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;View&gt;
              {modal}
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/Modal&gt;
    &lt;/View&gt;
    );
  }
  </code></pre>
  
  <h1>Modal Component Style</h1>
  
  <pre><code>import {StyleSheet} from 'react-native';
  import colors from '../../../theme/colors';
  import metrics from '../../../theme/metrics';
  import {container} from '../../../theme/base';
  
  const styles = StyleSheet.create({
  container: {
   backgroundColor: colors.background.gray,
  },
  modalView: {
   backgroundColor: colors.background.white,
   margin: 40,
  },
  closeText: {
    backgroundColor: colors.background.purpleishBlue,
    color: colors.background.white,
    borderRadius: metrics.avatar.small,
    width: 32,
    padding: 6,
    alignSelf: 'flex-end',
    textAlign: 'center',
    borderWidth: 1,
    borderColor: colors.background.white,
   },
  });
  
  export default styles;
  </code></pre>