как сосредоточить мое реагировать родной svg на мой взгляд и все мои экраны

Question

,

Я бы хотел центрировать эллипс SVG в va vue, чтобы сделать закругление на полпути вниз по моему экрану.Я могу получить рассматриваемый эллипс, но не могу центрировать мой svg ......

мой svg-компонент: const SvgComponent = props => (

<Svg
    height="50%"
    width="100%"
>
    <Ellipse
        cx="185"
        cy="145"
        rx="200"
        ry="130"
        stroke="black"
        strokeWidth="2"
        fill="white"
     />
</Svg>
)

и мой взгляд:

  <View style={{backgroundColor: '#3C4550', flex:1, height:'100%', width:'100%', justifyContent: 'center', }} >
      <View style={{ height: '50%' , width: '100%', justifyContent: 'center', alignItems: 'center' ,backgroundColor: '#FFF'}}>
        <Image style={{height: '40%', width:'45%', backgroundColor:'grey', borderRadius: 80 }}/>
      </View>  
      <SvgComponent />
  </View>

Я много чего пробовал, даже с простым видом, но не могу получить ожидаемый результат, разделив экран пополам с нижней частьюзакругленной верхней части

Идея?