Inverted Border Radius of View in React Native

Question

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.

Answer 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>
    <View
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'black',
        alignItems: 'center',
        justifyContent: 'flex-start',
      }}>
      <View
        style={{
          backgroundColor: 'white',
          height: 50,
          width: 50,
          alignSelf: 'flex-start',
          borderBottomRightRadius: 50,
        }}
      />
    </View>
  </View>

Answer 2

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>
        <View style={{
          width:80,
          height:65,
          backgroundColor:'black',
          alignItems:'center',
          justifyContent:'center' }}>

          <View style={{
            backgroundColor:'white',
            marginTop:25,
            marginEnd:25,
            height:45,
            width:60,
            alignSelf:'center' ,
            borderTopRightRadius:40}}/>

        </View>
      </View>

Result Output:-

Answer 3

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.

    <div id="main">
    <div class="top left"></div>
    <div class="top right"></div>
    <div class="bottom left"></div>
    <div class="bottom right"></div>
    </div>

CSS

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

#main div {
  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