Question 35227 in React native Question posted in
The official React Native documentation can be found here.

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

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

Make design with this corner squared in image

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search