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.