How to make curve design in react native? - react-native

Question

I'm creating a react native app and I need to create a curved screen design. How to create a curve design like the below screen.
This is what I tried here,
My sample codes,
import React from 'react';
import {
StyleSheet,
Text,
View,
StatusBar,
} from 'react-native';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
export default class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<StatusBar hidden={true} />
<View style={styles.container1}>
<Text style={styles.name}>Container1</Text>
</View>
<View style={styles.container2}>
<Text style={styles.name}>Container1</Text>
</View>
<View style={styles.container3}>
<Text style={styles.name}>Container1</Text>
</View>
<View style={styles.container4}>
<Text style={styles.name}>Container1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
container1: {
backgroundColor: '#3d06d6',
height: hp('25%'),
padding: 10,
borderBottomLeftRadius:100,
},
container2: {
backgroundColor: '#0cad95',
height: hp('25%'),
padding: 10,
borderBottomLeftRadius:100,
},
container3: {
backgroundColor: '#d6a606',
height: hp('25%'),
padding: 10,
borderBottomLeftRadius:100,
},
container4: {
backgroundColor: '#06bad6',
height: hp('25%'),
padding: 10,
borderBottomLeftRadius:100,
},
});
I want to curve my container edges like the first picture. I am able to make curves of the bottom edges. And How can I make curve designs like the first image? and also how can I add some animations into the container when I touch the container to open another screen? Is there any way to do this design using any style with "borderRadius" or any other way? And I don't want to use any library like react-native-svg.

Answer 1

If you need a Linear Gradient as the background. Just giving the color of the next box will not be the best option.
Assume "value" as the border-radius. ie the curve
Give a marginTop and paddingTop for each container.
marginTop : -value,
paddingTop : value,
Also assign zIndex in decending order for each container.
You can set zIndex with respect to the index, if you are looping through an array.
Result
Sample code
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
const data = ['', '', ''];
const App = () => {
return (
<View style={styles.container}>
{data.map((item, index) => (
<View style={[styles.item, {zIndex: data.length - index}]}> // setting zIndex here
<LinearGradient
style={StyleSheet.absoluteFill}
colors={['#4c669f', '#3b5998', '#192f6a']}
/>
</View>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
zIndex: 1,
},
item: {
height: 250,
borderBottomLeftRadius: 100, // logic goes here
marginTop: -100, // move container
paddingTop: 100, // move inner item down
overflow: 'hidden',
},
});
export default App;

Answer 2

You can simply wrap your view inside a normal view and set the background colour of the next box which will give the output you need.
<View style={{ backgroundColor: '#0cad95' }}>
<View style={styles.container1}>
<Text style={styles.name}>Container1</Text>
</View>
</View>
<View style={{ backgroundColor: '#d6a606' }}>
<View style={styles.container2}>
<Text style={styles.name}>Container1</Text>
</View>
</View>