0

I wanna create a specific form with my view. The view is supposed to do this

enter image description here

But i struggling with react native.

Also my code

return StyleSheet.create({
    parent: {
      height: '30%',
      width: '30%',
      transform: [{ skewX: '50deg' }, { skewY: '65deg' }],
      borderBottomStartRadius: 200,
      borderBottomEndRadius: 200,
      overflow: 'hidden',
    },
    child: {
      flex: 12,
      transform: [{ skewX: '10deg' }, { skewY: '50deg' }],

      backgroundColor: 'blue',
      alignItems: 'center',
      justifyContent: 'center',
    },

<View style={styles.parent}>
          <View style={styles.child}></View>
        </View>

enter image description here

TylerH
  • 20,799
  • 66
  • 75
  • 101
Xwingoga06
  • 99
  • 1
  • 10

1 Answers1

1

Use SVG for this. I don't think its even possible with basic Views. Also you can animate the SVG if needed by modifying its path.

For more information check out the react-native-svg package

Bojke
  • 646
  • 1
  • 6
  • 21