React Native Half oval on View

Question

I'm new to react-native, I want to create a view with a half oval in the bottom. I can achieve this problem using CSS, but I cannot use it in react-native as it only accepts the single number.

Example result

.halfOval { 
    background-color: #a0C580;
    width: 400px;
    height: 20px;
    border-radius:  0 0 50% 50% / 0 0 100% 100%;
}

<div class="halfOval"></div>

Answer 1

One solution I can say is to create a semicircle and scale it based on your device resolution. Sample code is given below

<View style={styles.ovalBgH}> 
    <View style={styles.ovalBg}>
    </View>
</View>

Stylesheet code

ovalBgH:{
    overflow: 'hidden', 
    width : 50, 
    height:25, 
    position : 'absolute', 
    borderBottomEndRadius:25,
    borderBottomLeftRadius:25,
    left:-25,
    top:10,
    backgroundColor:'transparent',
    transform: [
    {scaleX: 7}
    ]
},
ovalBg:{
    backgroundColor: '#a0c580',
    width : 50, height:50,
    transform: [
    {scaleX: 7}
    ]
}

Screenshot is given below