title: Responsive grid in React Native
body: <p>My app home page is composed by a nav bar and six big round buttons.<br>
  I would like to place the buttons in a (responsive) grid of 2x3 in portrait, and 3x2 in landscape. 
  Something like this, visually:</p>
  
  <pre><code>portrait:
  +-----------+
  |   navbar  |
  |           |
  | +--+ +--+ |
  | |B1| |B2| |
  | +--+ +--+ |
  | +--+ +--+ |
  | |B3| |B4| |
  | +--+ +--+ |
  | +--+ +--+ |
  | |B5| |B6| |
  | +--+ +--+ |
  +-----------+
  
  landscape:
  +-------------------------+
  |         navbar          |
  |   +--+   +--+   +--+    |
  |   |B1|   |B2|   |B3|    |
  |   +--+   +--+   +--+    |
  |   +--+   +--+   +--+    |
  |   |B4|   |B5|   |B6|    |
  |   +--+   +--+   +--+    |
  +-------------------------+
  </code></pre>
  
  <p>My current solution is not satisfactory, since it doesn't resize correctly when changing orientation:</p>
  
  <p>On portrait (fine):
  <a href="https://i.stack.imgur.com/JdCp7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JdCp7.png" alt="enter image description here"></a></p>
  
  <p>but, on landscape:
  <a href="https://i.stack.imgur.com/TJqB2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TJqB2.png" alt="enter image description here"></a></p>
  
  <p>This is my component render method:</p>
  
  <pre><code>const rows = 3;
  const cols = 2;
  const marginHorizontal = 4;
  const marginVertical = 4;
  const width = (Dimensions.get('window').width / cols) - (marginHorizontal * (cols + 1));
  const height = (Dimensions.get('window').height / rows) - (marginVertical * (rows + 1));
  
  render() {
    return (
    &lt;Container ref="root"&gt;
      &lt;ScrollView style={stylesGrid.scrollContainer}&gt;
        &lt;View style={stylesGrid.sectionContainer}&gt;
          &lt;View style={stylesGrid.boxContainer}&gt;&lt;Text&gt;B1&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={stylesGrid.boxContainer}&gt;&lt;Text&gt;B2&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={stylesGrid.boxContainer}&gt;&lt;Text&gt;B3&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={stylesGrid.boxContainer}&gt;&lt;Text&gt;B4&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={stylesGrid.boxContainer}&gt;&lt;Text&gt;B5&lt;/Text&gt;&lt;/View&gt;
          &lt;View style={stylesGrid.boxContainer}&gt;&lt;Text&gt;B6&lt;/Text&gt;&lt;/View&gt;
        &lt;/View&gt;
      &lt;/ScrollView&gt;
    &lt;/Container&gt;
  );
  }
  
  const stylesGrid = StyleSheet.create({
    scrollContainer: {
      flex: 1,
    },
    sectionContainer: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'center',
      alignItems: 'center',
    },
    boxContainer: {
      marginTop: marginVertical,
      marginBottom: marginVertical,
      marginLeft: marginHorizontal,
      marginRight: marginHorizontal,
      width: width,
      height: height,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'gold',
    },
  });
  </code></pre>
  
  <p>Even worse things happen when loading in landscape: 3x2 layout is not even kept when changing orientation...</p>
  
  <p><em>Any suggestion for a consistent responsive layout in react-native?</em></p>