title: react native scrollView Height always stays static and does not change
body: <p>I build react native app and I use with scrollView for header with list of text horizontal.
  The issue is that the height of the scroll view takes half size of the screen. Even after declared it as a style, it still stays as it is.</p>
  
  <p>screen with the scrollView</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>            &lt;View style={Style.container} &gt;
                  {this.props.ExtendedNavigationStore.HeaderTitle ? &lt;BackHeader header={this.props.ExtendedNavigationStore.HeaderTitle} onPressBack={this.goBack} /&gt; : &lt;Header openDrawer={this.openDrawer} /&gt;}
                  &lt;ScrollView  contentContainerStyle={{flexGrow:1}} style={Style.scrollableView} horizontal showsHorizontalScrollIndicator={false}&gt;
                      {this.renderScrollableHeader()}
                  &lt;/ScrollView&gt;
                  &lt;Routes /&gt; /* stack with dashboard screen */
              &lt;/View&gt;
          &lt;/Drawer&gt;
  
      )
  }
  </code></pre>
  
  <p>styles</p>
  
  <pre class="lang-js prettyprint-override"><code>import {StyleSheet} from 'react-native'
  import {calcSize} from '../../utils'
  
  
  const Styles = StyleSheet.create({
      container : {
          flex:1,  
          backgroundColor:"#e9e7e8"      
      },
      scrollableView:{
          height: calcSize(40),
          backgroundColor: '#000',
  
      },
      textCategory:{
          fontSize: calcSize(25),
          color:'#fff'
      },
      scrollableButton:{
          flex:1,
          margin:calcSize(30)
      }
  })
  
  export default Styles
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YOiAq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YOiAq.png" alt="enter image description here"></a></p>
  
  <p>As you can see the black size is the scroll View, 
  I want it to be small.</p>
  
  <p>In routes stack into dashboard screen, the style:</p>
  
  <pre class="lang-js prettyprint-override"><code>const Style = StyleSheet.create({
      container: {
          backgroundColor: '#9BC53D',
          flex: 1,
          justifyContent: 'space-around',
          alignItems: 'center'
      },
      text: {
          fontSize: 35,
          color: 'white',
          margin: 10,
          backgroundColor: 'transparent'
      },
      button: {
          width: 100,
          height: 75,
          margin: 20,
          borderWidth: 2,
          borderColor: "#ecebeb",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: 40
      }
  })
  </code></pre>