Elliptical Border Radius in React Native - css

Question

I'm trying to recreate this shape in React Native. It's made with 2 overlapping shapes, one square and one with a border-radius on the top and bottom (the square is there to hide the border radius on the top).
Here's the CSS used to generate it:
#square {
width: 200px;
height: 180px;
background: red;
}
#tv {
position: relative;
margin-top: 100px;
width: 200px;
height: 200px;
margin: 20px 0;
background: red;
border-radius: 100px / 20px;
}
But I can't find any documentation on the border-radius property, so I don't know if it's possible to do elliptical radii like you can in CSS.

Answer 1

To construct an elliptical view
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
//import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.oval}/>
</View>
);
}
}
const styles = StyleSheet.create({
oval: {
width: 100,
height: 100,
borderRadius: 50,
//backgroundColor: 'red',
borderWidth:2,
borderColor:'black',
transform: [
{scaleX: 2}
]
},
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});
Playground: https://snack.expo.io/BJd-9_Fbb
This may be the shape similar to the one you have given.`
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
//import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.oval}/>
<View style={styles.square}/>
</View>
);
}
}
const styles = StyleSheet.create({
square:{
width:200,
height:180,
backgroundColor:'red',
position:'absolute',
top:160
},
oval: {
position:'absolute',
width: 100,
height: 200,
borderRadius: 50,
backgroundColor: 'red',
//borderWidth:2,
//borderColor:'black',
transform: [
{scaleX: 2}
]
},
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});
`
https://snack.expo.io/r11PnOK-Z``
EDIT
You can add different border-radius to different vertices like below
borderTopLeftRadius: '10%',
borderTopRightRadius: '30%',
borderBottomLeftRadius: '50%',
borderBottomRightRadius: '70%',
Playground: https://snack.expo.io/BJd-9_Fbb