React-Native Parent View opacity inherit in child View - css

Question

I am trying to build Screen like below but in the result parent view opacity inherit inside child view too.is anyone knows how to resolve this issue
below are the what am i trying to create and the result what i get.
what i want:
result what i get:
Code
<View style={styles.container} >
<Image
source={{
uri: 'http://i.imgur.com/sIaHZ9i.png',
}}
style={styles.image} >
</Image>
<View style={styles.subcontainer} >
<View style={styles.locationview}>
<View
style={styles.lastcircle}>
<View
style={styles.last} /></View>
<Entypo
name="location-pin"
style={styles.icon}
size={35}
/>
</View>
<View style={styles.contentContainer} >
<Text style={styles.title}>DELIVERING TO</Text>
<Text style={styles.text}>Locating...</Text>
</View>
</View>
</View>
CSS
subcontainer:{
flex:1,
backgroundColor:'rgba(255, 255, 255,0.8)',
alignItems:'center',
justifyContent:'center'
},
locationview:{
height:130,
width:130,
borderColor:'#CAD5E2',
borderWidth:1,
borderRadius:70,
marginBottom:20,
},

Answer 1

If you post to and join the Geographic Information Systems Stack Exchange they might have some helpful tips in CSS and supply more people understanding your map related problem https://gis.stackexchange.com/
Here are a few other resources that might help:
https://gis.stackexchange.com/questions/106811/make-leaflet-map-background-transparent
change opacity of image.map area
https://www.sitepoint.com/community/t/change-opacity-of-an-area-of-an-image/274316
Check out Codepen.io too which had a solution by Paul O'Brien on spot opacity in CSS , but StackOverflow won't allow me to link it here.
This is not my code, This is the code from Paul O Brien on Codepen
CSS :
.hole {
position: relative;
display: inline-table;
margin:10px;
}
.hole img {
opacity: 0.5;
}
.hole:after{
content: "";
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://picsum.photos/300/300) no-repeat 0 0;
border-radius: 50%;
}
.hole2 img,.hole3 img{
filter: blur(2px);
}
.hole3:after{
width:100px;
height:100px;
margin:auto;
background-size:300px 300px;
background-position:50% 50%;
}
.hole4:after{
transition:all 2s ease;
margin:0;
background-position:0% 0%;
}
.hole4:hover:after{
background-position:100% 100%;
margin:calc(100% - 100px) 0 0 calc(100% - 100px);
}
.hole5:after{
transition:all 1s ease;
height:0;
width:0;
}
.hole5:hover:after{
width:150px;
height:150px;
}
<div class="hole hole1">
<img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>
<div class="hole hole2">
<img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>
<div class="hole hole3">
<img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>
<div class="hole hole3 hole4">
<img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>
<div class="hole hole3 hole5">
<img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>
<p>(Hover the last 2 images)</p>