height combined with other components.

[mtnoronha]

Hi,

I would like your help.
I have this setup:

render() {
  return (
    <View style={styles.container}>
      <ListView style={styles.container}
        dataSource={this.state.dataSource}
        renderScrollComponent={props => <InvertibleScrollView  {...props} inverted />}
        renderRow={(data) => <MessageRow navigator={this.props.navigator} {...data} />}
        renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />} />
        <Grid>
          <Col size={70}>
            <FormInput placeholderTextColor={placeholderColor} inputStyle={styles.input} placeholder="Add your comment"
                        onChangeText={(val) => this.setState({message : val})}
                        value={this.state.message}
                        multiline={true}
                        numberOfLines={4}
                        editable={true} />
          </Col>
          <Col size={30}>
            <SubmitButton
              buttonStyle={styles.addButton}
              icon={{name: 'comment'}}
              title=''
              screen='Messages'
              onSubmit={this._submitComment} />
          </Col>
        </Grid>
    </View>
  );
}
}


const styles = StyleSheet.create({
container: {
  flex: 1
},
commentContainer: {
  flexDirection: 'row'
}

});

This produces:

As you can see, there's a bunch of void space down there!

If I remove the Grid element, then the listView gets in "full screen mode". I mean, it reaches the bottom of the app.

How can I do this to make room for the input in the end of the app's window ?
thank you