Scrolling interacts strangely with SafeAreaView on iPhone X

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

(Expo) Packages: (wanted => installed) react: 16.0.0 => 16.0.0 react-native: https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz => 0.50.3

Steps to Reproduce

1. Put a SafeAreaView around content inside of a ScrollView.
2. Make sure there is plenty of content to scroll through.
3. Run the app on an iPhone X or in the iPhone X Simulator.

Expected Behavior

Scrolling should behave as normally, with the SafeAreaView in effect when the scroll position is at the beginning and end of the content.

Actual Behavior

Scrolling is difficult, and often results in janky behavior. The more complex and long the content, the worse it is.

Here’s a gif of the behavior:

Note how the content continuously changes position, even when not scrolling.

Reproducible Demo

https://snack.expo.io/rkiomUcgz

Make sure to use an iPhone X device, or download and open in XDE to install it on the iPhone X Simulator.

[ceciliaschiebel]

I had the same situation, and contentInsetAdjustmentBehavior worked for me

<ScrollView contentInsetAdjustmentBehavior="automatic">
      <SafeAreaView>
            {/* long content here */}
      </SafeAreaView>
</ScrollView>

from react-native repo, ScrollView code says:

/**
   * This property specifies how the safe area insets are used to modify the
   * content area of the scroll view. The default value of this property is
   * "never". Available on iOS 11 and later.
   * @platform ios
   */
  contentInsetAdjustmentBehavior?: ?(
    | 'automatic'
    | 'scrollableAxes'
    | 'never'
    | 'always'
  ),

[david-arteaga]

I am on react-native 0.59.9 and when I set contentInsetAdjustmentBehavior="automatic" on ScrollView, FlatList or SectionList, the padding is correctly added at the bottom and the content is allowed to scroll beneath the bottom part where the “home button” is. There is no need to use a SafeAreaView to achieve this.