Flex styling is messed up.

Here is my code.

render() {
    return (
      <View style={{flex:1,backgroundColor:'black'}}>
      <KeyboardAwareScrollView viewIsInsideTabBar={false}>
        <View style={{backgroundColor:'white', flex:1}}>
          <TouchableOpacity onPress={this.props.onClosePanel}>
            <Text>{'This is my drawer'}</Text>
          </TouchableOpacity>
        </View>
        {this.renderWriteMessage()}
      </KeyboardAwareScrollView>
      </View>
    );
  }

I have given the top box flex 1. Then in that view I have created another view with flex value one. What it should do is extend that subview to bottom and the textinput should be at bottom.

If i remove KeyboardAwareScrollView element from the code it renders this.

[ShayanJavadi]

If anyone is still having this issue try adding {flexGrow: 1} to the contentContainerStyle prop like so:

<KeyboardAwareScrollView
  contentContainerStyle={{flexGrow: 1}}
>
   // children go here
</KeyboardAwareScrollView>

[davidvpe]

▲ This should be on the doc really…