Having a SafeAreaView inside ScrollView breaks scrolling

[WesSouza]

Environment

Scanning folders for symlinks in /Users/wesley/Sites/do-app/node_modules (15ms)

Environment:
  OS: macOS High Sierra 10.13.5
  Node: 10.3.0
  Yarn: 1.7.0
  npm: 6.1.0
  Watchman: 4.9.0
  Xcode: Xcode 9.4 Build version 9F1027a
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: ~0.55.2 => 0.55.4

Description

SafeAreaView is dynamic, if the first element on a screen is a ScrollView, and has children SafeAreaViews, when the user scrolls down, the SafeAreaView reduces in height because it's not touching the safe area anymore, which in contrast scrolls the content back up.

Steps to Reproduce

Create an example such as

const App = () => (
  <ScrollView>
    <SafeAreaView>
      {longVerticalContent}
    </SafeAreaView>
  </ScrollView>
);

Expected Behavior

Content should scroll normally.

Actual Behavior

When you scroll slowly, the scrolling stutters and the content moves back up. If you scroll fast enough you don't see such a bad effect.

Video:

I'd love to be able to get that information from a different source, such as Dimensions.get, so I could apply it here manually.

[hramos]

Why is your SafeAreaView inside a ScrollView? SAV should wrap your top level view.

[WesSouza]

@hramos yes, that would work better, but won't have the expected visuals. The contents wouldn't overflow behind the notification bar, like the first item background.

[brunolemos]

Duplicate of #16997 that should not have been closed

[hramos]

Duplicate of #16997 (needs write access to successfully mark as a dupe).

[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'
  ),