SafeAreaView inside ScrollView jitters and maxes out CPU

Description

When a SafeAreaView is placed inside a ScrollView, and the SafeAreaView has a margin, the ScrollView shakes and the CPU goes haywire.

Without the margin, CPU usage hovers at around 0.2%. With the margin, CPU usage sits at over 100%.

I’ve only tested this on my iPhone 11 simulator (running iOS 13.3) in development mode. A minimal reproducible example and gif are provided below.

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz
    Memory: 485.68 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.12.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.4 - /Users/chris/.sdkman/candidates/java/current/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Create a blank app using npx react-native init wiggle.
2. Replace App.js with the code below.
3. Run the app on an iPhone simulator (cd wiggle && npx react-native run-ios)

Note: Any margin value below 35 causes the issue for me. Margins >= 35 work fine. My hunch is that this is the height of the iPhone notch.

Expected Results

No jittering or CPU exhaustion, regardless of the margin applied.

Snack, code example, screenshot, or link to a repository:

Video showing problem: https://imgur.com/a/Bw7qIoq

Contents of App.js:

import React from 'react'
import { SafeAreaView, ScrollView, Text } from 'react-native'

const App = () => {
  return (
    <ScrollView>
      <SafeAreaView style={{ margin: 20 }}>
        <Text>{'wiggle\n'.repeat(100)}</Text>
      </SafeAreaView>
    </ScrollView>
  )
}

export default App

[safaiyeh]

Hi @chrisparton1991, thanks for the issue.

Some observations when I wrap the ScrollView with SafeAreaView

    <SafeAreaView style={{ margin: 20 }}>
      <ScrollView>
          <Text>{'wiggle\n'.repeat(100)}</Text>
      </ScrollView>
    </SafeAreaView>

The jittering stops. So there must be some weird calculations being done with ScrollView children + SafeAreaView

[justindc100]

Seeing this issue still