title: React Native, How to make a ScrollView load minimum fullscreen without scrollbar but then scroll as content grows
body: <p>I have a <code>ScrollView</code> that is being problematic because I need to put a bottom border on it, so I need it to load initially as fullscreen, but be able to have the ScrollView automatically increase in height when an <code>&lt;ErrorSection /&gt;</code> component is added.</p>
  
  <p>It doesn't seem to work with just <code>flex: 1</code>, so I am trying to explicitly declare the <code>height</code> and <code>width</code> of the ScrollView, but that is also yielding unpredictable results.</p>
  
  <p>Here's my current code for the ScrollView:</p>
  
  <pre><code>import React from 'react'
  import { StyleSheet, ScrollView, Dimensions } from 'react-native'
  import * as Animatable from 'react-native-animatable'
  
  const E1ScrollView = ({ children, animation, style, bottomBorder }) =&gt; {
      const { container, E1bottomBorder } = styles
  
      const { height, width } = Dimensions.get('window')
      // const pxHeight = height * PixelRatio.get()
      // const pxWidth = width * PixelRatio.get()
  
      return (
          &lt;ScrollView style={[container, style]}&gt;
              &lt;Animatable.View
                  style={[{ height, width }, (bottomBorder) ? E1bottomBorder : null]}
                  animation={animation}
                  iterationCount={1}&gt;
  
                  {children}
              &lt;/Animatable.View&gt;
          &lt;/ScrollView&gt;
      )
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#F0F0F0',
          flexDirection: 'column'
      },
      E1bottomBorder: {
          borderBottomWidth: 5,
          borderColor: '#DD0426',
      }
  })
  
  export { E1ScrollView }
  </code></pre>