React Native draw custom rounded edge on View - react-native

Question

I want to create a View which has one rounded edge on it in react native as you can see in the image. I already have the white view as I want it to be. However, it should extend up to the black curve. What are my options and how can it be achieved?
Thank you in advance.

Answer 1

You can make the white view elliptical by adding a bottom border radius and scaling it up using the transform attribute.
Then if you place it partially above the second view, you will end up with the expected output.
Here is an example:
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.first} />
<View style={styles.second} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
width: '100%',
backgroundColor: '#fff',
},
first: {
backgroundColor: '#fff',
alignSelf: 'center',
width: 100,
height: 100,
borderBottomRightRadius: 50,
borderBottomLeftRadius: 50,
transform: [{ scaleX: 4 }],
zIndex: 1,
},
second: {
backgroundColor: '#333',
marginTop: -30,
height: 200,
zIndex: 0,
},
});
Here is the example in action.