React Native style view having sharp edges

Question

How can I make my view look like this, (the sharp edges below Karamel in red)

Answer 1

You should use react-native-canvas for it.

This is my previous code with canvas so you can reference it.

import Canvas from 'react-native-canvas';

  handleHeader(canvas, color) {
    if (canvas) {
      const height = 230;
      console.log(width, height);
      canvas.width = width;
      canvas.height = height;

      const context = canvas.getContext('2d');

      context.fillStyle = color;
      context.moveTo(0, 0);
      context.lineTo(0, height - 40);
      context.quadraticCurveTo(width / 4, height - 80, width / 2, height - 40);
      context.quadraticCurveTo((width / 4) * 3, height, width, height - 40);
      context.lineTo(width, 0);
      context.fill();
    }
  }

  render() {
    return (
      <Canvas ref={canvas => this.handleHeader(canvas, this.props.color)} />
    );
  }