To create a unique elliptical shape
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'
}
});
Check out the result on this link
This could be a shape similar to what you have described.
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'
}
});
`
See the updated design on this link
UPDATE
If you want different border-radius for each corner, you can achieve that like so:
borderTopLeftRadius: '10%',
borderTopRightRadius: '30%',
borderBottomLeftRadius: '50%',
borderBottomRightRadius: '70%',
Try it out on this playground link