React-native-keyboard-aware-scroll-view: After showing keyboard KeyboardAwareScrollView seems to compensate for the StatusBar

[gkrinc]

When I first load my scene whose render method looks like this:

render() {
  return (
    <KeyboardAwareScrollView style={{ backgroundColor: 'red' }}
                             keyboardShouldPersistTaps={true}
                             extraScrollHeight={170}>
      <View style={{ flex: 1 }}>
        ...
      </View>
    </KeyboardAwareScrollView>
  );
},

This is what the top of the app looks like:

The component inside the KeyboardAwareScrollView has a background color of blue, therefore we are scrolled right to the top, because we can't see the red background color of the KeyboardAwareScrollView.

After focusing a TextField and showing the keyboard then hiding the keyboard and scrolling to the top of the scene this is what the top of the app looks like:

It seems as though the KeyboardAwareScrollView is suddenly trying to compensate for the Status Bar?! What's weird in that when I use the inspector and select the KeyboardAwareScrollView/ScrollView they both show a width/height of 375x667 (iPhone6), no padding, no margins so I have no idea why when I'm scrolled to the top the KeyboardAwareScrollview it's showing part of it's background color the exact height of the Status Bar.

I'm using KeyboardAwareScrollView in other scenes in my app without experiencing this issue. Has anyone else run across this? Is it KeyboardAwareScrollView or something else within react-native?

Versions

• react-native: 0.37.0
• react-native-keyboard-aware-scroll-view: 0.2.4

[gkrinc]

Gah!! I always find the solution after taking the time to submit an issue :s

This problem is resolved using automaticallyAdjustContentInsets={false} like this

As per: https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/45#issuecomment-244439514

[jpokrzyk]

Whoa good timing. Just had the same issue/question. Glad this was documented here in the issues. This would have been a pain to track down in the react docs.

[sospedra]

You da real MVP @gkrinc 🙌