title: React native flexbox - how to do percentages || columns || responsive || grid etc
body: <p>After working with react native on iOS for the last couple of weeks, I seem to have come across some shortcomings of flex styling... Particularly when it comes to "responsive" behavior. </p>
  
  <p>For instance, lets say you want to create a view that contains cards (the metadata for these cards comes from an API). You want the cards to be 50% of the view width minus the margin &amp; padding, and to wrap after each 2.</p>
  
  <p><a href="https://i.stack.imgur.com/IKGF1.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/IKGF1.jpg" alt="enter image description here"></a></p>
  
  <p>The current implementation I have for this view splits the returned array into rows with 2 items. The list container has <code>flex: 1, flexDirection: 'column</code>, the rows have <code>flex: 1</code> and then each card has <code>flex: 1</code>. The end result is each row has 2 columns which evenly take up half the view width. </p>
  
  <p>It seems like there is no trivial way to do this in React Native styles, without using javascript to do some sort of pre-processing on the data so that it comes out styled correctly. Does anyone have any suggestions? </p>