How To Make Custom Shape In React Native

Question

Can anybody help to make such kind of shape in React Native? I highlighted with red in picture shape.

I tried in this way

const Header = memo(() => {
  return (
    <View
      style={{
        width: '100%',
        height: 120,
        borderRadius: 30,
        backgroundColor: 'orange',
        transform: [{ scaleX: 1 }]
      }}
    />
  )
})

Answer 1

I know this is not react native. However I do think you will get a far end with the CSS in here:

 body { overflow-x: hidden; }.header { position: relative; top: -75px; left: -10%; height: 250px; width: 120%; background-color: #555; border-radius: 50%; background-image: linear-gradient(to top right, red, yellow) }

 <div class="header"> <div>

Answer 2

I solved this. Here is solution

import { Dimensions } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
const { width: W } = Dimensions.get('window')

   <LinearGradient
    start={{ x: 0.8, y: 0.2 }}
    end={{ x: 0.5, y: 1.0 }}
    locations={[0.1, 0.9]}
    colors={[colors.HEADER_GRADIENT_1, colors.HEADER_GRADIENT_2]}
    style={{
      height: 245,
      width: W - 120,
      left: 50,
      backgroundColor: 'red',
      top: -85,
      borderRadius: 150,
      transform: [{ scaleX: 3 }]
    }}
  >
    <StatusBar translucent={true} backgroundColor={'transparent'} />
  </LinearGradient>