title: React Native: Make Each Child of ScrollView Full Height
body: <p>I have a <code>ScrollView</code> which has two children, and I want each of the children to be the full height of the available space on the screen, meaning view 1 fills the whole screen, and then I scroll down to start to see part of slide 2. If I scroll all the way down, I should only see slide 2.</p>
  <p>I can't figure out how to get this to happen. What is currently happening is that each child is filling half of the available vertical space, so I don't get any scrolling.</p>
  <p>Any ideas how I can achieve this layout? Thanks!</p>
  <p><strong>Current UI:</strong> <a href="https://i.imgur.com/fZdbUSo.png" rel="nofollow noreferrer">https://i.imgur.com/fZdbUSo.png</a></p>
  <p><strong>Desired UI:</strong></p>
  <ul>
  <li>Before scrolling: <a href="https://i.imgur.com/EsQpVMm.png" rel="nofollow noreferrer">https://i.imgur.com/EsQpVMm.png</a></li>
  <li>After scrolling all the way down: <a href="https://i.imgur.com/PfXQyfI.png" rel="nofollow noreferrer">https://i.imgur.com/PfXQyfI.png</a></li>
  </ul>
  <p><strong>Code:</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import {
      StyleSheet,
      ScrollView,
      Text,
      View
  } from &quot;react-native&quot;;
  
  const Home = () =&gt; {return (
      &lt;ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContainer}&gt;
          &lt;View style={styles.slide1}&gt;
              &lt;Text&gt;this should be full height&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.slide2}&gt;
              &lt;Text&gt;this should also be full height, but only be visible once i scroll down&lt;/Text&gt;
          &lt;/View&gt;
      &lt;/ScrollView&gt;
  )};
  
  const styles = StyleSheet.create({
      slide1: {
          justifyContent: &quot;center&quot;,
          flexGrow: 1,
          backgroundColor: &quot;blue&quot;
      },
      slide2: {
          justifyContent: &quot;center&quot;,
          flexGrow: 1,
          backgroundColor: &quot;green&quot;
      },
      scrollView: {
          flex: 1
      },
      scrollViewContainer: {
          flexGrow: 1
      }
  });
  
  export default Home;
  
  </code></pre>