Need to make design in react-native bottom navigator as below image-CodePudding

I want a UI simillar to the image in which corners above a view should be rounded in as shown in as image.

CodePudding user response：

Something like this should achieve your desired result, just replace the div:before block with the item at the top in your screenshot if it is an image. If no image use div:before changing the color is box-shadow.

div {
  position:relative;
  width: 300px;
  height: 80px;
  background: #522d5b;
}

div:before {
  content: "";
  position:absolute;
  top:-40px;
  left:0;
  height:40px;
  width:300px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  box-shadow: 0 20px 0 0 #fff;
}

CodePudding user response：

You need to use the below style and the image will be the same as per your requirement

borderBottomLeftRadius: number
borderBottomRightRadius: number

Below is the code sample you can refer to.

image: {
  borderBottomLeftRadius: 25,
  borderTopLeftRadius: 25,
}

one more solution is there

borderRadius:0,0,20,0;

Also, you can find more info in the view component docs.