ScrollView minHeight to take up all the space
<p>I have a <code>ScrollView</code> which content doesn't necessarily exceeds it's size. Let's say it's a form where, upon errors, it expands to add error messages and then it exceeds the <code>ScrollView</code> size and thus is why I'm using that scroll.</p>

<p>The thing is that I want the content to always be at least of the same size of the ScrollView. I'm aware of the <code>minHeight</code> property, but the only way I found to use it is re-rendering, which I'd like to avoid.</p>

<p>I'm using redux for state management and this is what I have</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ScrollView
  contentContainerStyle={[ownStyles.container, {minHeight: this.props.scrollHeight}]}
  style={this.props.style}
  showsVerticalScrollIndicator={false}
  onLayout={(event) =&gt; {
    scrollHeight = event.nativeEvent.layout.height;
    this.props.setScrollContentHeight(scrollHeight);
  }}
&gt;</code></pre>
</div>
</div>
</p>

<p>Where the <code>this.props.setScrollContentHeight</code> triggers an action which enters the height on the state, and <code>this.props.scrollHeight</code> is said height. So that after the first render where the onLayout function is triggered, the state is updated with the ScrollView's <code>height</code>, which I then assign as <code>minHeight</code> to its content.</p>

<p>If I set the content's style to <code>flex: 1</code> then the ScrollView won't scroll.</p>

<p>Can you think of a way to avoid that second render for performance purposes?</p>

<p>Thank you!</p>