title: React Native Modal Transparent Not Working
body: <p>So I want to use a Modal to disable all interactions on a screen but I still want everything on the screen to be visible. It's odd because it was working just fine for me earlier, then I tried to make the Modal its own component, but as soon as I did that, it stopped working properly. I then went back to what I originally did but still having the same issue. I should've committed it when it worked. </p>
  
  <p>Any idea where I went wrong? </p>
  
  <p>Here's my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Image, Modal, Text, Button, TouchableHighlight } from 'react-native';
  
    constructor(props) {
      super(props);
      this.state = {
        modalVisible: true,
      };
    }
  
    openModal() {
      this.setState({modalVisible: true});
    }
  
    closeModal() {
      this.setState({modalVisible: false});
    }
  
  
  
    render() {
        return (
          &lt;View style={styles.container}&gt;
            &lt;Modal
              visible={this.state.modalVisible}
              onRequestClose={() =&gt; this.closeModal()}
            &gt;
              &lt;TouchableHighlight
              style={styles.modalContainer}
              onPress={() =&gt; this.closeModal()}
              &gt;
                &lt;Text&gt;"Words n stuff"&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
            &lt;/Modal&gt;
            &lt;View
              style={styles.upperContainer}
            /&gt;
            &lt;View
              style={styles.lowerContainer}
            /&gt;
          &lt;/View&gt;
        );
      }
    }
  }
  </code></pre>
  
  <p>Styles:</p>
  
  <pre><code> modalContainer: {
      flexGrow: 1,
      justifyContent: 'center',
      flexDirection: 'row',
      backgroundColor: 'transparent',
    },
  
  
   container: {
      flexGrow: 1,
      justifyContent: 'space-around',
      flexDirection: 'column',
      alignItems: 'center',
    },
    upperContainer: {
      flexGrow: 2,
      alignItems: 'center',
      justifyContent: 'flex-end',
      paddingBottom: 18,
      width: screenWidth,
      marginTop: -140,
    },
  lowerContainer: {
      flexGrow: 2,
      alignItems: 'center',
      justifyContent: 'space-around',
      width: screenWidth,
    },
  </code></pre>