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

How to create curve triangle in react native

Hi all I am new to react native and try to develop below UI.Is they any ways to create a curve triangle.I tried but unable curve edge of triangle.
enter image description here

Here is my code.

 notch: {
    width: 32,
    height: 5,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 30 / 2,
    borderRightWidth: 30 / 2,
    borderBottomWidth: 20,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#7B1B67',
    position: 'absolute',
    right: 15,
    top: -15,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    borderBottomLeftRadius: 95,
    borderBottomRightRadius: 95,
    overflow:'visible'


},
Tags:

2

Answers


  1. 0

    You can use a simple square element, round the border then rotate it. Here’s an example where::after is just for preview

    .wrapper {
  position: relative;
  background: purple;
  border-radius: .5rem;
  padding: .75rem;
  color:white;
  margin-top: 2rem;
}

.wrapper::before, .wrapper::after {
  content: "";
  display:block;
  width: 30px;
  aspect-ratio:1/1;
  position: absolute;
  right: 20px;
  top: -10px;
  background: linear-gradient(to bottom right, purple 50%, transparent 50%);
  border-radius: 30%;
  transform: rotate(45deg);
}

.wrapper::after {
  left: 20px;
  background: linear-gradient(to bottom right, orange 50%, transparent 50%);
}
    <br>
<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolor veritatis, cum accusantium fugit modi, exercitationem, accusamus unde assumenda illum aperiam laborum dignissimos voluptatem explicabo optio praesentium quae veniam tempora.</div>

    Note

    linear-gradient is just to fill half so it doesn’t hide the text, you may use z-index and simply push it below text

    background: linear-gradient(to bottom right, purple 50%, transparent 50%);
    Login or Signup to reply.
  2. 0

    To create a curved triangle shape in React Native, you can use a combination of View and Image components. Here’s an example code that you can modify according to your needs:

    <View style={{ position: 'relative' }}>
  <Image
    source={require('./triangle.png')}
    style={{ width: 100, height: 100, resizeMode: 'contain' }}
  />
  <View
    style={{
      position: 'absolute',
      top: 50,
      left: 0,
      right: 0,
      height: 50,
      backgroundColor: 'white',
      borderTopLeftRadius: 25,
      borderTopRightRadius: 25,
    }}
  />
</View>

    In this example, we are using an Image component with a transparent background to display the triangle shape, and we are positioning a View component on top of it to create the curved edge. The borderTopLeftRadius and borderTopRightRadius styles of the View component are set to half the height of the component, which creates a semi-circle shape at the top. You can adjust the dimensions and styles of the Image and View components to achieve the desired shape and color.

    You can also use SVG or other libraries such as react-native-svg to create more complex shapes and curves.

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

Back To Top
Search