title: How to overlap in react-native
body: <p>Hi want to create UI in my react-native app like this</p>
  
  <p><a href="https://i.stack.imgur.com/IJOJp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IJOJp.png" alt="enter image description here"></a></p>
  
  <p>but I am getting like this </p>
  
  <p><a href="https://i.stack.imgur.com/RmI3i.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/RmI3i.jpg" alt="enter image description here"></a></p>
  
  <p>here is my code</p>
  
  <pre><code>&lt;View style={{flex: 1,flexDirection:'row'}}&gt;
              &lt;View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}&gt;
                  &lt;View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}&gt;
                      &lt;Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}&gt;&lt;/Item&gt;
                  &lt;/View&gt;
                  &lt;View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}&gt;
                      &lt;Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}&gt;&lt;/Item&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
              &lt;View style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}}&gt;
                  &lt;Item style={{backgroundColor:AppColors.colorPrimaryDark,
                      borderRadius:10,height:100, width:100, borderRadius:100/2}}&gt;&lt;/Item&gt;
              &lt;/View&gt;
              &lt;View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}&gt;
                  &lt;View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}&gt;
                      &lt;Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}&gt;&lt;/Item&gt;
                  &lt;/View&gt;
                  &lt;View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}&gt;
                      &lt;Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}&gt;&lt;/Item&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          &lt;/View&gt;
  </code></pre>