title: React Native ScrollView With growing child
body: <p>I am implementing a compose screen : A growing input text with ability to attach an image. When the input Text grow in height(it take the half of the screen for example) the scrollView is not scrolling even if its contentSize is bigger than it's frame. how can i make it scroll ?</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    TouchableHighlight,
    ScrollView,
    Dimensions
  } from 'react-native';
  import Icon from 'react-native-vector-icons/FontAwesome';
  
  
  var {width, height} = Dimensions.get('window');
  class AutoExpandingTextInput extends React.Component {
    constructor(props) {
      super(props);
      this.state = {text: '', height: 0};
    }
    render() {
      return (
        &lt;TextInput
        {...this.props}
        multiline={true}
        onChange={(event) =&gt; {
          this.setState({
            text: event.nativeEvent.text,
            height: event.nativeEvent.contentSize.height,
          });
        }}
        style={[styles.default, {height: Math.max(35, this.state.height)},this.props.style]}
        value={this.state.text}
        /&gt;
      );
    }
  }
  class MultilineTextInput extends Component {
    constructor(props){
      super(props);
      this.state = {
        renderImage : true,
        attachedImage:null
      }
      this.onContentSizeChange = this.onContentSizeChange.bind(this);
    }
    onContentSizeChange(a,b){
      console.log("content size changed")
      console.log(a)
      console.log(b)
    }
    renderInputWithImage(){
      return(
        &lt;View style={styles.container}&gt;
           &lt;View style={styles.toolbar}&gt;
             &lt;Text style={styles.toolbarButton}&gt;Cancel&lt;/Text&gt;
             &lt;Text style={styles.toolbarTitle}&gt;SHARE SOMETHING&lt;/Text&gt;
             &lt;Text style={styles.toolbarButton}&gt;Post&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.content}&gt;
            &lt;ScrollView style={styles.attachScrollView} onContentSizeChange={this.onContentSizeChange}&gt;
              &lt;View style={styles.scrollViewChild}&gt;
                &lt;AutoExpandingTextInput
                    placeholder="Write here"
                    enablesReturnKeyAutomatically={true}
                    returnKeyType="done"
                    style={styles.textInput}/&gt;
                    &lt;View style={styles.imageattachHolder}&gt;
                      &lt;Image source = {require('./img/att.jpg')}
                             style={styles.imageattach}
                             resizeMode = {'cover'}/&gt;
                      &lt;TouchableHighlight&gt;
                        &lt;Icon name="close" size={25} color="#eaf0f6" style={styles.closeButton}/&gt;
                      &lt;/TouchableHighlight&gt;
                    &lt;/View&gt;
              &lt;/View&gt;
            &lt;/ScrollView&gt;
            &lt;View style={styles.buttomToolBar}&gt;
              &lt;TouchableHighlight&gt;
                &lt;Icon name="picture-o" color="#eaf0f6" size={25}&gt;&lt;/Icon&gt;
              &lt;/TouchableHighlight&gt;
              &lt;TouchableHighlight&gt;
                &lt;Icon name="map-marker" color="#eaf0f6" size={25}&gt;&lt;/Icon&gt;
              &lt;/TouchableHighlight&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
    renderInputOnly(){
      return (
        &lt;View style={styles.container}&gt;
          &lt;AutoExpandingTextInput
            placeholder="Share something"
            enablesReturnKeyAutomatically={true}
            returnKeyType="done"
            top={20}
          /&gt;
        &lt;/View&gt;
      );
    }
    render() {
      if(this.state.renderImage){
        console.log(width)
        return this.renderInputWithImage()
      }else{
        return this.renderInputOnly()
      }
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor:'#ebeef0'
    },
    attachScrollView:{
      backgroundColor:'green'
    },
    imageattach:{
      //width: width,
      position:'absolute',
      height:402,
      left:0,
      right:0,
      top:0
    },
    toolbar:{
          backgroundColor:'#fff',
          paddingTop:30,
          paddingBottom:10,
          flexDirection:'row'
      },
      buttomToolBar:{
        backgroundColor:'#fff',
        flexDirection:'row',
        padding:5,
        backgroundColor:'red'
      },
      toolbarButton:{
          width: 50,
          color:'#000',
          textAlign:'center'
      },
      toolbarTitle:{
          color:'#000',
          textAlign:'center',
          fontWeight:'bold',
          flex:1
      },
      content:{
          backgroundColor:'#fff',
          flex:1,
          marginTop:5
      },
      textInput:{
         left:10,
         color:"#2C3E50",
         fontSize:15,
         textAlign : 'left',
         marginTop:5
      },
      imageattachHolder:{
        alignItems:'flex-start',
        flex:1
      },
      closeButton:{
        backgroundColor : 'rgba(0,0,0,0)'
      }
  });
  
  AppRegistry.registerComponent('MultilineTextInput', () =&gt; MultilineTextInput);
  </code></pre>