Space between components in React Native styling : <p><a href="https://i.stack.imgur.com/Mr8uX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Mr8uX.png" alt="enter image description here"></a></p>

<p>I have 6 <code>View</code> components (shown in the picture) , I want to have space between all 6 <code>View</code> components. </p>

<p>My code:</p>

<pre><code>&lt;View style={{flexDirection:'column',flex:6}}&gt;
            &lt;View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}&gt;
                &lt;View style={{backgroundColor:'red',flex:1}}&gt;
                &lt;/View&gt;
                &lt;View style={{backgroundColor:'blue',flex:1}}&gt;
                &lt;/View&gt;
            &lt;/View&gt;


            &lt;View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}&gt;
                &lt;View style={{backgroundColor:'white',flex:1}}&gt;
                &lt;/View&gt;
                &lt;View style={{backgroundColor:'black',flex:1}}&gt;
                &lt;/View&gt;

            &lt;/View&gt;

            &lt;View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}&gt;
                &lt;View style={{backgroundColor:'gray',flex:1}}&gt;
                &lt;/View&gt;
                &lt;View style={{backgroundColor:'yellow',flex:1}}&gt;
                &lt;/View&gt;

            &lt;/View&gt;


 &lt;/View&gt;
</code></pre>
