How can i add the curved bottom to a View in react-native? See curved example
I'f tried to a add an second view like this:
headerBottom: { width: width / 2, height: width / 2, backgroundColor: 'red', position: 'absolute', bottom: -35, left: width / 4 - 15, borderRadius: width / 4, transform: [ {scaleX: 2}, {scaleY: 0.25} ] },
I've been able to get above but rather have a less bad solution right in the same view, not as in the example in a second view.
Here is the result. I used Dimensions (const window = Dimensions.get('window');) here to make it more dynamic to different screen sizes.
const styles = StyleSheet.create({
containerStyle: {
alignSelf: 'center',
width: window.width,
overflow: 'hidden',
height: window.width / 1.7
},
sliderContainerStyle: {
borderRadius: window.width,
width: window.width * 2,
height: window.width * 2,
marginLeft: -(window.width / 2),
position: 'absolute',
bottom: 0,
overflow: 'hidden'
},
slider: {
height: window.width / 1.7,
width: window.width,
position: 'absolute',
bottom: 0,
marginLeft: window.width / 2,
backgroundColor: '#9DD6EB'
}});
render() {
return(
<View style={styles.containerStyle} >
<View style={styles.sliderContainerStyle} >
<Slider/>
</View>
</View>
);
}
I ended up with using react-native-svg.:
<Circle
cx={screenWidth / 2}
cy={`-${898 - headerHeight + 2}`}
r="898.5"
fill="#EFF2F3"
stroke="#C5CACD"
strokeWidth="2"
/>
I don't know whether this is a proper way or not. However this works for me and hope this will help someone.
<View style={styles.parent}>
<View style={styles.child}>
<Text>Hello World</Text>
</View>
</View>
Insert your code to child View
const styles = StyleSheet.create({
parent : {
height : '80%',
width : '100%',
transform : [ { scaleX : 2 } ],
borderBottomStartRadius : 200,
borderBottomEndRadius : 200,
overflow : 'hidden',
},
child : {
flex : 1,
transform : [ { scaleX : 0.5 } ],
backgroundColor : 'yellow',
alignItems : 'center',
justifyContent : 'center'
}
})
i use border bottom radius. this is work.
class Home extends Component {
render() {
return (
<View style={styles.oval} />
)
}
}
const styles= StyleSheet.create({
oval: {
height: 100,
borderBottomLeftRadius: 50,
borderBottomRightRadius: 50,
backgroundColor: 'red'
},
});