React Native ScrollView With growing child

Question

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 ?

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 (
      <TextInput
      {...this.props}
      multiline={true}
      onChange={(event) => {
        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}
      />
    );
  }
}
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(
      <View style={styles.container}>
         <View style={styles.toolbar}>
           <Text style={styles.toolbarButton}>Cancel</Text>
           <Text style={styles.toolbarTitle}>SHARE SOMETHING</Text>
           <Text style={styles.toolbarButton}>Post</Text>
        </View>
        <View style={styles.content}>
          <ScrollView style={styles.attachScrollView} onContentSizeChange={this.onContentSizeChange}>
            <View style={styles.scrollViewChild}>
              <AutoExpandingTextInput
                  placeholder="Write here"
                  enablesReturnKeyAutomatically={true}
                  returnKeyType="done"
                  style={styles.textInput}/>
                  <View style={styles.imageattachHolder}>
                    <Image source = {require('./img/att.jpg')}
                           style={styles.imageattach}
                           resizeMode = {'cover'}/>
                    <TouchableHighlight>
                      <Icon name="close" size={25} color="#eaf0f6" style={styles.closeButton}/>
                    </TouchableHighlight>
                  </View>
            </View>
          </ScrollView>
          <View style={styles.buttomToolBar}>
            <TouchableHighlight>
              <Icon name="picture-o" color="#eaf0f6" size={25}></Icon>
            </TouchableHighlight>
            <TouchableHighlight>
              <Icon name="map-marker" color="#eaf0f6" size={25}></Icon>
            </TouchableHighlight>
          </View>
        </View>
      </View>
    );
  }
  renderInputOnly(){
    return (
      <View style={styles.container}>
        <AutoExpandingTextInput
          placeholder="Share something"
          enablesReturnKeyAutomatically={true}
          returnKeyType="done"
          top={20}
        />
      </View>
    );
  }
  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', () => MultilineTextInput);

Answer 1

This is because you Image has a absolute position. Just remove the absolute positioning form imageattach and you will be good to go.