title: How to make curve design in react native?
body: <p>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.<a href="https://i.stack.imgur.com/n8cq3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n8cq3.jpg" alt="Image scree design"></a></p>
  
  <p><strong>This is what I tried here,</strong></p>
  
  <p><a href="https://i.stack.imgur.com/gXUWc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gXUWc.png" alt="This is my sample screen"></a></p>
  
  <p><strong>My sample codes,</strong></p>
  
  <pre><code>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 (
        &lt;View style={styles.container}&gt;
          &lt;StatusBar hidden={true} /&gt;
          &lt;View style={styles.container1}&gt;
          &lt;Text style={styles.name}&gt;Container1&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.container2}&gt;
          &lt;Text style={styles.name}&gt;Container1&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.container3}&gt;
          &lt;Text style={styles.name}&gt;Container1&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.container4}&gt;
          &lt;Text style={styles.name}&gt;Container1&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  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,
    },
  });
  </code></pre>
  
  <p>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.</p>