title: React Native: vertical centering when using ScrollView
body: <p>I'm using React Native and I'm having trouble retaining vertical centering of elements as soon as I introduce a ScrollView.  To demonstrate, I created 3 apps with React Native Playground.  All examples have 2 pages, and they can be toggled by tapping the blue button.</p>
  
  <p><strong>Example 1:</strong></p>
  
  <p>This first example shows blocks centered vertically on page 2.  This happens because the container has these styles applied to it:</p>
  
  <pre><code>flex: 1,
  flexDirection: 'column',
  justifyContent: 'center',
  </code></pre>
  
  <p><a href="https://rnplay.org/apps/lb5wSQ" rel="noreferrer">https://rnplay.org/apps/lb5wSQ</a></p>
  
  <p>However, there's a problem as soon as you switch to page 2, because the entire content of the page doesn't fit, so we need a <code>ScrollView</code>.</p>
  
  <p><strong>Example 2</strong></p>
  
  <p>In this example, I wrap everything inside of a ScrollView.  This allows page 2 to scroll, but now I lost the vertical centering of Page 1.</p>
  
  <p><a href="https://rnplay.org/apps/DCgOgA" rel="noreferrer">https://rnplay.org/apps/DCgOgA</a></p>
  
  <p><strong>Example 3</strong></p>
  
  <p>In order to try and get back the vertical centering of Page 1, I apply <code>flex: 1</code> to the <code>contentContainerStyle</code> of ScrollView.  This fixes the vertical centering on page 1, but I'm no longer able to scroll all the way down to the bottom on page 2.</p>
  
  <p><a href="https://rnplay.org/apps/LSgbog" rel="noreferrer">https://rnplay.org/apps/LSgbog</a></p>
  
  <p>How can I fix this so that I get vertical centering of elements on page 1 yet still get ScrollView to scroll all the way to the bottom on page 2?</p>