React Native Modal Transparent Not Working - css

Question

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.
Any idea where I went wrong?
Here's my 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 (
<View style={styles.container}>
<Modal
visible={this.state.modalVisible}
onRequestClose={() => this.closeModal()}
>
<TouchableHighlight
style={styles.modalContainer}
onPress={() => this.closeModal()}
>
<Text>"Words n stuff"</Text>
</TouchableHighlight>
</Modal>
<View
style={styles.upperContainer}
/>
<View
style={styles.lowerContainer}
/>
</View>
);
}
}
}
Styles:
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,
},

Answer 1

Try to add transparentproperty to your Modal.
Example:
<Modal
transparent
...>
...
</Modal>
Doc: https://facebook.github.io/react-native/docs/modal.html#transparent

Answer 2

Try transparent={true} on <Modal />