how to create react native header as svg/ and manipulating the svg?

Question

I'm trying to create my custom header component for a react native app,

import React from 'react'
import { StatusBar } from 'react-native'
import Svg, { Path } from 'react-native-svg'

export default function App () {
  StatusBar.setHidden(true)
  return (
    <Svg
      xmlns='http://www.w3.org/2000/svg'
      xlink='http://www.w3.org/1999/xlink'
      width='100%'
      height='186.919'
      viewBox='0 0 574.211 186.919'
    >
      <Path
        id='Path_2524-2'
        data-name='Path 2524'
        class='cls-1'
        d='M-815.085,1.627-985.466,25.151a739.285,739.285,0,0,1-202.451,0L-1358.3,1.627V-123.778h543.212Z'
        transform='translate(1373.8 134.28)'
        fill={'red'}
      />
    </Svg>
  )
}

I have attached my code, as well as the outcome photo. I've tried changing the values of height and width in the svg component with no luck,I have also tried containing it in a view with absolute position, it's not getting the full width as well, can someone help me to accomplish what is in the second photo?