title: Two column layout in react native
body: <p>I want to display multiple elements in two columns in a react native application. This is what I have so far:</p>
  
  <pre><code>class App extends Component {
    render() {
      const { viewStyle, childStyle } = style;
  
      return (
        &lt;View style={viewStyle}&gt;
          &lt;View style={childStyle} /&gt;
          &lt;View style={childStyle} /&gt;
          &lt;View style={childStyle} /&gt;
          &lt;View style={childStyle} /&gt;
          &lt;View style={childStyle} /&gt;
          &lt;View style={childStyle} /&gt;
          &lt;View style={childStyle} /&gt;
          &lt;View style={childStyle} /&gt;
          &lt;View style={childStyle} /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const space = 5;
  const style = {
    viewStyle: {
      flex: 1,
      flexWrap: 'wrap',
      flexDirection: 'row',
      padding: space,
      marginTop: 20,
      backgroundColor: 'green'
    },
    childStyle: {
      width: '50%',
      height: 100,
      backgroundColor: 'red',
      borderWidth: 1,
      borderColor: 'black',
      marginBottom: space
    }
  }
  </code></pre>
  
  <p>And here is a screenshot: <a href="https://imgur.com/a/wKgDR" rel="noreferrer">https://imgur.com/a/wKgDR</a></p>
  
  <blockquote>
    <p>My problem is: <strong>How can I get some space in the middle (between the left and the right elements)?</strong> And is it possible, that this also works when the user rotates the device?</p>
  </blockquote>