Inverted Border Radius Of View In React Native

I tried to search lot related to inverted border radius for view in react native but not find anything. Please find below the image for reference.

Solution 1:

Try using 2 Views, one wrapped under another and achieve the same, Because inverted borderradius is still not supported in react native. Check the updated EXPO link for detailed view. Expo link

<View><Viewstyle={{width:100,height:100,backgroundColor:'black',alignItems:'center',justifyContent:'flex-start',}}><Viewstyle={{backgroundColor:'white',height:50,width:50,alignSelf:'flex-start',borderBottomRightRadius:50,}}/></View></View>

Solution 2:

Using pure CSS I have come up with an approach, elements inside your container, and to a position outside of the element itself. apply a border-radius which gives the effect.

<divid="main"><divclass="top left"></div><divclass="top right"></div><divclass="bottom left"></div><divclass="bottom right"></div></div>

CSS

#main {
  margin: 40px;
  height: 100px;
  background-color: #000000;
  position: relative;
  overflow: hidden;
}

#maindiv {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #FFFFFF;
}

.top {
  top: -10px;
}

.bottom {
  bottom: -10px;
}

.left {
  left: -10px;
}

.right {
  right: -10px;
}

for more check here: https://jsfiddle.net/kishore328/gs3nv9ty/5

Solution 3:

Using following code you can achieve inverted border radius. React Native provided borderTopRightRadius props. For more detail you can follow this link I also added snack expo example

https://snack.expo.io/S1JmKJp3S

<View><Viewstyle={{width:80,
          height:65,
          backgroundColor:'black',
          alignItems:'center',
          justifyContent:'center' }}><Viewstyle={{backgroundColor:'white',
            marginTop:25,
            marginEnd:25,
            height:45,
            width:60,
            alignSelf:'center' ,
            borderTopRightRadius:40}}/></View></View>

Result Output:-