How to get content height of ScrollView component for contentOffset prop in React Native?
<p>For my current project, I'm creating a Diary/Calendar type component that shows the current day (Diary view) or current month (Calendar view) centered when the user clicks to see that view.</p>

<p>I'm using a ScrollView to hold my content:</p>

<pre><code>_getInitialOffset(h) {
  const FIX = 75; //TODO: Make it less arbitrary
  let percentToScroll = (this.props.viewedDate.month()+1)/12; //12 = number of months per year
  let { height } = this.props;
  let centerFix = height/2;
  let contentHeight = h;
  let yPos = contentHeight*percentToScroll - centerFix - FIX;
  return (yPos &gt; 0) ? yPos : 0;
}



render() {
  var year = this.props.viewedDate.year();
  var cal = Calendar.get(year);
  var contentHeight = this.contentHeight;
  return (
    &lt;View&gt;
      &lt;View style={styles.daysOfWeek}&gt;
        {
          Calendar.days().map(function(day, i) {
            return &lt;Text key={i} style={styles.dayHeader}&gt;{day}&lt;/Text&gt;;
          })
        }
      &lt;/View&gt;
      &lt;ScrollView
        ref={ref =&gt; {this._scrollView = ref}}
        style={{
          height: this.props.height,
          paddingTop: 15
        }}
        onContentSizeChange={(w, h) =&gt; {
          this._scrollView.scrollTo({y: this._getInitialOffset(h), animated: false});
        }}&gt;
        &lt;Year year={year} calendar={cal}/&gt;
      &lt;/ScrollView&gt;
    &lt;/View&gt;
  );
}
</code></pre>

<p>I'm trying to have it center upon render on the current month, but because my current method (using OnContentSizeChange) occurs after render, there's a frame where the user sees it uncentered, which is bad user experience.</p>

<p><strong>Is there a way to get the content height of a ScrollView component before/during render, or delay component visibility until after the onContentSizeChange method has fired?</strong></p>