React-Native Parent View opacity inherit in child View

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,

  },

Please provide the code for the markup as well – appostolis Jun 19 '21 at 09:02 — appostolis, Jun 19 '21 at 09:02
added please check and give some solution – chetan sharma Jun 19 '21 at 09:08 — chetan sharma, Jun 19 '21 at 09:08

score 0 · Answer 1 · answered Jun 19 '21 at 09:10

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>

React-Native Parent View opacity inherit in child View

1 Answers1