iOS refresh control jump after upgrading to v0.64.1

[dandre-hound]

Description

After upgrading to react-native v0.64.1, there is a 42px-ish jump when pulling to refresh a scrollable list on iOS devices (see screen recording below). Android is fine. This was not an issue on previous versions, and I'm able to reproduce on a fresh react-native init app.

I say "42px-ish" because the only way I could calculate this is taking screen recordings, capturing still frames, measuring heights relative to the screenshot height, applying that percentage to the virtual height of the iPhone 12, which came out to be 42.6666px. The only UI element that somewhat correlates to this 42px jump is the iPhone X status bar (44px), but I've observed the same 42px-ish jump on iPhone models without a notch (tested on iPhone 8).

I noticed that this only happens when the swipe-down pan gesture is active and the refreshing prop has become false during the gesture. This sounds a little confusing, but the repro steps below should hopefully make this clear. It also sounds like an edge case, but it's not -- for anything that would quickly set the refreshing prop to false while the gesture is still active (like a very fast network response), this makes for a very janky experience.

React Native version:

System:
    OS: macOS 11.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.05 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.18.3/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.10.1 - /Users/drewandre/.rvm/gems/ruby-2.7.2/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6858069
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 12.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.1 => 0.64.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Pull to refresh, but do not lift your finger up while it's spinning. Pull down far enough that it triggers the refresh spinner, but then leave your finger still in that spot while it continues to spin. Leave the gesture active until the method to set refreshing state to false is invoked. In our repro example below, this happens after 1.5s.
2. With the gesture still active and refreshing now set to false, move your finger up or down. Notice what I calculated to be a 42px-ish jump.

Note that this is reproducible whether you use the <RefreshControl /> component directly, or if you just use the refreshing and onRefresh <FlatList /> props.

Also note that this behavior was observed when using both <FlatList /> and <ScrollView />. I didn't test any other list components.

Expected Results

Pull to refresh should be smooth: it should not jump when the refreshing props is set to false mid-gesture.

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

EDIT: This is not reproducible in the expo snack below because expo 41 uses react-native 0.63.x and this issue is only reproducible on react-native 0.61.x.
Expo snack link

Gist link

Simulator.Screen.Recording.-.iPhone.8.-.2021-05-20.at.14.43.42.mp4

[dandre-hound]

This is actually a duplicate of #31461 -- closing.