title: Dynamic height with infinite scroll (react-virtualized)
body: <p>I'm using 'react-virtualized' to render an infinite scrolling list.</p>
  
  <p>However, I am having trouble rendering the <code>rowHeight</code> dynamically. I made an attempt, but it only is relevent for desktop, and feels wrong.</p>
  
  <p>I tried following the examples, but had no success.</p>
  
  <p>What is the correct way to calculate the true row height?</p>
  
  <p>It should be responsive to mobile.</p>
  
  <p>Here is an example:</p>
  
  <p><a href="https://codesandbox.io/s/ADARgvlxB" rel="nofollow noreferrer">https://codesandbox.io/s/ADARgvlxB</a></p>
  
  <pre><code>class App extends React.Component {
  
    render() {
  
      return (
        &lt;div&gt;
  
          &lt;AutoSizer&gt;
          {({ height, width }) =&gt; (
          &lt;List
            height={600}
            width={width}
            rowCount={foo.length}
            rowHeight={({ index }) =&gt; {
              const x = foo[index];
              if (x.name.length &lt; 10) { return 20; } 
              else if (x.name.length &gt; 9) { return 40;}
            }}
            rowRenderer={({ index, style }) =&gt; {
              const x = foo[index];
              return (
                &lt;div key={index} style={style}&gt;
                  {x.name}
                &lt;/div&gt;
              );
            }}
          /&gt;
          )}
          &lt;/AutoSizer&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>