title: How do i make it masonry grid based on card content react native
body: <pre><code>renderMenuCard = (item) =&gt; {
          return (
              &lt;View style={{width: DEVICE_WIDTH/2-moderateScale(22), backgroundColor: '#eee', padding: moderateScale(15), paddingVertical: moderateScale(25), borderRadius: moderateScale(10), marginBottom: moderateScale(15)}}&gt;
                  &lt;View style={{height: moderateScale(30), width: moderateScale(30), borderRadius: moderateScale(15), backgroundColor: '#ddd', marginBottom: moderateScale(10)}}&gt;&lt;/View&gt;
                  &lt;View style={{backgroundColor: 'transparent', flexWrap: 'wrap', alignItems: 'center'}}&gt;
                      &lt;Txt medium&gt;{item.name}&lt;/Txt&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          )
      }
  
  
  
  &lt;FlatList
       contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space- 
       between'}}
       data={this.state.menu_card}
       renderItem={({item}) =&gt; (
       this.renderMenuCard(item))}
  /&gt;
  </code></pre>
  
  <p>i want that grid to look like masonry
  how can i achieve that layout without using 
  react-native-masonry library </p>
  
  <p><a href="https://i.stack.imgur.com/kD1kC.png" rel="nofollow noreferrer">the result i got here</a></p>