Touchable Highlight not getting blurry when modal opens in react native - react-native

Question

I have a modal which blurs the background view when it opens up.But the background has a Touchable Highlight which is not getting blurred.My code for the background View looks like this:
import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, TouchableHighlight} from 'react-native';
import ModalContent from './modalView';
export default class Customquotesconfirmation extends Component {
constructor(props) {
super(props);
this.state={
modalVisible: false,
phoneNumber: '9018938260',
clearTextInputValue: false
}
this.hideModal=this.hideModal.bind(this);
this.showModal=this.showModal.bind(this);
}
showModal(modalState) {
this.setState({ modalVisible: modalState});
}
hideModal(modalState) {
this.setState({modalVisible: modalState});
}
render(){
return(
<View style={(this.state.modalVisible == true) ? styles.modalStyle : styles.modalCloseStyle }>
<Text style={{textAlign:'center', color: '#097543', fontSize: 28, fontFamily: 'SourceSansPro-Black', marginTop:40, marginLeft:40, marginRight:40}}>Thank you for your interest!</Text>
<Text style={{textAlign: 'center', color: '#666666',fontSize: 18, fontFamily: 'SourceSansPro-Black', marginLeft: 40, marginRight:40, marginTop:20 }}>Tap "Submit" and a lawn care professional will contact you with information about tailored service.</Text>
<Image style={{width: 150, height:150, justifyContent:'center', alignItems:'center', marginLeft:150, marginTop: 40}}
source={require('../../../assets/img/mobile_image.png')}></Image>
<Text style={{marginLeft: 20, marginRight:20, marginTop:20, fontSize:8, color:'#666666'}}>By tapping "Submit" I provide my personal information including phone number and consent to: (1) receive autodialed calls, texts, and prerecorded messages from Trygreen regarding my account, including current and possible future services, customer service and billing; and (2) Trugreen's Privacy Policy and Terms and Conditions(including this arbitration provision).I understand that my consent is not required to purchase TruGreen services and that I may revoke consent for automated communications at any time.</Text>
<TouchableHighlight
onPress={() => {this.setState({ modalVisible: true})}}
underlayColor="#FFFFFF">
<View style={styles.submitButtonStyle}>
<Text style={{color: '#FFFFFF', fontSize:25, textAlign: 'center',marginTop:10, fontStyle:'SourceSansPro-Bold'}}>Submit</Text>
</View>
</TouchableHighlight>
{/* Modal Content */}
{
this.state.modalVisible ?
<ModalContent
modalVisible={this.state.modalVisible}
showModal={this.showModal}
hideModal={this.hideModal}
phoneNumber={this.state.phoneNumber}
/> : null
}
</View>
);
}
}
const styles = StyleSheet.create({
modalStyle: {
backgroundColor: 'rgba(0,0,0,0.5)', height:800
},
modalCloseStyle: {
backgroundColor:'rgba(0,0,0,0)'
},
modalViewStyle:{
flex: 1, flexDirection:'column' , marginTop:200, marginBottom:200, marginLeft:80, marginRight:80, height:220, backgroundColor:'#FFFFFF'
},
submitButtonStyle: {
width:200, height:50, backgroundColor: '#ff9933', marginLeft:120, borderRadius:2, marginTop:20
},
blurButtonOnModalOpen: {
width:200, height:50, marginLeft:120, borderRadius:2, marginTop:20, backgroundColor: 'rgba(0,0,0,0.5)',
}
})
And my modal view code is:
import React, { Component } from 'react';
import {View, Text, TouchableHighlight, Modal, TextInput, StyleSheet} from 'react-native';
export default class ModalPopup extends Component {
constructor(props) {
super(props);
this.state={
modalVisible: this.props.modalVisible,
}
}
render() {
return(
<View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
<Modal
animationType='slide'
visible={this.state.modalVisible}
transparent={true}
onRequestClose={() => {
this.props.hideModal(false);
}
}
>
<View style={ (this.state.modalVisible ? styles.modalViewStyle : null )}>
<View style={{ backgroundColor: '#32CD32', height: 100}}>
<TouchableHighlight
onPress={() => {this.setState({ clearTextInputValue: true})}}
underlayColor="##32CD32">
<Text style={{ marginLeft:10, marginTop:10, color:'#FFFFFF', fontSize: 20}}> x </Text>
</TouchableHighlight>
<Text style={{ marginLeft:60, color:'#FFFFFF', fontSize: 15, marginTop: -25}}> Contact Info </Text>
<Text style={{ marginLeft:40, marginTop:10, color:'#FFFFFF', fontSize: 20, fontStyle: 'SourceSansPro-Bold' }}> Phone Number </Text>
</View>
<View style={{backgroundColor:'#FFFFFF'}}>
<Text style={{ marginLeft:20, marginTop:10, color:'grey', fontSize: 20, fontStyle: 'SourceSansPro-Bold', marginRight:20 }}> Please confirm best contact number. </Text>
<TextInput
style={{fontSize:20, height:40, justifyContent:'center', borderTopWidth: 2, borderLeftWidth: 2, borderColor:'grey', width:200, height: 50, marginLeft: 20, marginTop: 20}}
keyboardType= 'numeric'
defaultValue={this.state.clearTextInputValue ? '' : this.props.phoneNumber}
maxLength={10}></TextInput>
<TouchableHighlight
onPress={() => {this.props.hideModal(false)}}
underlayColor="#FFFFFF">
<View style={{ width:200, height:50, backgroundColor: '#ff9933', marginLeft:20, borderRadius:2, marginTop:20}}>
<Text style={{color:'#FFFFFF', fontSize:25, textAlign: 'center',marginTop:10, fontStyle:'SourceSansPro-Bold'}}>Submit</Text>
</View>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
modalViewStyle:{
flex: 1, flexDirection:'column' , marginTop:200, marginBottom:200, marginLeft:80, marginRight:80, height:220, backgroundColor:'#FFFFFF'
},
submitButtonStyle: {
width:200, height:50, backgroundColor: '#ff9933', marginLeft:120, borderRadius:2, marginTop:20
},
})
Now when the modal opens up, the screen looks like this:
Can someone please help me with this issue.