Elliptical Border Radius in React Native

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