React-native-keyboard-aware-scroll-view: Flex styling is messed up.

[rohitgoyal]

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.

[alvaromb]

If you change the KeyboardAwareScrollView component to a ScrollView, you'll experience the same issue because a scroll view needs a size if its children doesn't fill the entire screen.

Please give a size to the KeyboardAwareScrollView component and ping me if that doesn't solve the issue.

[crazy4groovy]

I ran into this issue as well. Is there something better that KeyboardAwareScrollView is this case which will fill up all the space? (I just need to tap on the screen to remove the input focus/keyboard).

[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...

[cborjah]

@ShayanJavadi This solved my issue of content at the bottom of the KeyboardAwareScrollView being covered when the keyboard is open. Initially I was using contentContainerStyle={{ flex: 1 }}.

[julioxavierr]

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>

This is awesome! Thanks @ShayanJavadi !

[WhaSukGO]

@ShayanJavadi Fabulous! This is exactly what I've been looking for! Thanks!!