Curve of backgroundcolor on React Native - css

Question

I am having trouble on how to make my background color to be curve on top (header part) here is my design
and i am aiming for this curve design on my header part
here is my code
<View style={{backgroundColor: "#BF3EFF", height: "20%", width: "100%",
borderbbottom: "50px"}}>

Answer 1

Here is the one way you can achieve this effect with: Expo Snack
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
import Constants from 'expo-constants';
const screen = Dimensions.get('screen');
export default function App() {
return (
<View style={styles.container}>
<View style={styles.banner}>
<View style={styles.profile}>
<Image
source={{ uri: 'https://i.stack.imgur.com/SXxvF.jpg' }}
style={{width: 100, height: 100, overflow: "hidden"}}
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
alignItems: 'center',
},
banner: {
backgroundColor: '#BF3EFF',
height: screen.width * 2,
width: screen.width * 2,
borderWidth: 5,
borderColor: 'orange',
borderRadius: screen.width,
position: 'absolute',
bottom: screen.height - screen.height*0.3,
alignItems: 'center',
},
profile: {
width: 100,
height: 100,
backgroundColor: 'pink',
position: 'absolute',
bottom: -50,
borderRadius: 50,
borderWidth: 2,
borderColor: 'white',
overflow: "hidden"
},
});