Unable to create curved view in react-native - react-native

Question

<View style={{
width: window.width,
height: window.width / 7,
backgroundColor: colors.white}}>
<View style={{
backgroundColor: colors.primary,
borderBottomLeftRadius: 80,
borderBottomRightRadius: 80,
height: window.width / 7,
width: window.width,
flex: 1,
}}>
<View style={{
backgroundColor: '#000',
height: window.width / 7,
width: window.width / 3,
borderRadius: 100,
alignSelf: 'center',
position: 'absolute',
bottom: 0,
overflow: 'hidden',
}}>
</View>
</View>

Answer 1

Check the below solution
import * as React from "react";
import { View, StyleSheet } from "react-native";
export default function Curve() {
return (
<View style={{ margin: 50 }}>
<View style={styles.squreStyle} />
<View style={styles.arcStyle} />
</View>
);
}
const styles = StyleSheet.create({
squreStyle: {
width: "100%",
height: 75,
borderRadius: 12,
backgroundColor: "black",
},
arcStyle: {
width: "20%",
height: 70,
position: "absolute",
bottom: -25,
left: "40%",
borderRadius: 35,
backgroundColor: "black",
transform: [{ scaleX: 5 }, { scaleY: 1 }],
},
});
Sample image of the working code
Edit - Modified according to the requirements of Scroll & Write content inside header.
import * as React from "react";
import { View, StyleSheet, Text, ScrollView } from "react-native";
export default function Curve() {
return (
<ScrollView>
<View style={{marginVertical: 50}}>
<View style={styles.squreStyle}>
<Text style={{ color: "white", textAlign: "center" }}>Sample Header</Text>
</View>
<View style={styles.arcStyle} />
</View>
<View style={{ height: 500, backgroundColor: "green" }} />
<View style={{ height: 500, backgroundColor: "yellow" }} />
</ScrollView>
);
}
const styles = StyleSheet.create({
squreStyle: {
width: "100%",
height: 75,
borderRadius: 12,
backgroundColor: "black",
zIndex: 1,
},
arcStyle: {
width: "20%",
height: 70,
position: "absolute",
bottom: -25,
left: "40%",
borderRadius: 35,
backgroundColor: "black",
transform: [{ scaleX: 5 }, { scaleY: 1 }],
},
});
Hope this helps you. Feel free for doubts.

Answer 2

The thing is react native doesnt let us add border radius to sides unless of same height and width so that it can be a circle. What i did is exactly created a circle and pushed it upwards with top so that it seems like this. You can control the curvature by fixing the height and width and make it dynamic so that in every screen it looks the same.
Please check code below and also the expo snack:
expo-snack
Code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.newD}></View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
newD:{
height:500,
width:500,
backgroundColor:'red',
marginLeft:-70,
borderRadius:500,
top:-280
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Hope it helps. feel free for doubts

Answer 3

You can use react-native-canvas for draw it
import {Dimensions} from 'react-native';
import Canvas from 'react-native-canvas';
const {width} = Dimensions.get('window');
...
drawArc = (canvas) => {
const height = 150;
const ctx = canvas.getContext('2d');
context.moveTo(0,height/2);
context.quadraticCurveTo(width/2, height, width, height/2);
};
...
<Canvas
ref={canvas => drawArc(canvas) />
...
Hope this helps to you.