0

Hi I want to draw like below curve triangle with use View or something but white area must be a transparent it should only look red how can I do that thanks for suggestions

enter image description here

Alisan26
  • 323
  • 2
  • 12

2 Answers2

1

The best way to achieve this is a Round view over a square view.

  1. set position: absolute for parent view (Parent)
  2. set position: relative for square view (child of parent)
  3. set position: relative for round view (child of parent)
Milan Chauhan
  • 27
  • 3
0

<View style={{ flex: 1, paddingTop: 50, backgroundColor: 'orange' }}>
      <View style={{
        height: 300,
        width: "100%",
        backgroundColor: 'red'
      }}/>

      <View
        style={{
          height: 300,
          width: 300,
          borderRadius: 150,
          backgroundColor: 'white',
          bottom: 300
        }}
      />
    </View>

enter image description hereI can think of two possibilities:

  1. You could have a View as a white circle and with position absolute, you can position it like that by also having a red rectangular View and the white one comes on top of the red one (but here it is quite important how the rest of the screen looks like in
  2. By using an svg triangle drawn like that (you can use react-native-svg for that)

  <Svg style={{
      height: '100%',
      width: '100%',
      backgroundColor: 'red'
    }}>
      <Path

        stroke={2}
        fill={'white'}
        d={'M 100 126 l -101 -1 l 0 100 l -1 -2 l 1 2 q 13 -88 103 -99'}
      />
    </Svg>
dianaqqq
  • 633
  • 6
  • 12
  • Thanks for suggessions, I tried the first situtation you said but not work, white area is not transparent like this draw – Alisan26 May 07 '21 at 12:48
  • Oh, I understand. Therefore you'll need an svg for that shape – dianaqqq May 07 '21 at 12:53
  • I used an svg editor (https://yqnn.github.io/svg-path-editor/) to obtain that shape and by changing the first two coordinates `M 100 126` you can move your curved triangle wherever you want – dianaqqq May 07 '21 at 13:01
  • this svg not what I want, thanks anyway – Alisan26 May 07 '21 at 13:16