React Native 上的背景颜色曲线

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"
  },
});