title: Center ScrollView in React Native
body: <p>I've been trying to use React Native lately and I am trying to incorporate a ScrollView in my program. I am having issues centering the <code>ScrollView</code> in the middle of the page. I have looked at many of the posts here on SO and have been unable to get a working implementation. If someone could point me in the right direction, I would really appreciate it!</p>
  <p>Screen:</p>
  <pre><code>&lt;SafeAreaView style={styles.container}&gt;
      &lt;ScrollView style={styles.scrollable}&gt;
          &lt;ProfileGreeting /&gt;
          &lt;DailyGoals goals={GOALS} /&gt;
          &lt;CoursesContainer courses={COURSES} /&gt;
      &lt;/ScrollView&gt;
  &lt;/SafeAreaView&gt;
  </code></pre>
  <p>Styles:</p>
  <pre><code>const styles = {
      container: {
          height: &quot;100%&quot;,
          width: &quot;100%&quot;,
          display: &quot;flex&quot;,
          alignItems: &quot;center&quot;,
          flex: 1
      },
      scrollable: {
          flexGrow : 1,
          justifyContent : 'center'
      }
  }
  </code></pre>
  <p>As suggested in this <a href="https://stackoverflow.com/questions/32664397/react-native-vertical-centering-when-using-scrollview">this post</a> I tried to use flexGrow on the ScrollView, but it still doesn't seem to work - it instead shifts to the side as such:
  <a href="https://i.stack.imgur.com/ZgPzf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZgPzf.png" alt="ScrollView Issue" /></a></p>