Flatlist scrolls to the opposite direction when content height changes

🐛 Bug Report

FlatList sometimes produces a scrolling glitch when we change the content. That means, scrolling goes to the opposite direction for a bit. We already had made an extra development to make scroll position follow the cursor so it is coming back to visible area. But still the first movement to the opposite direction is sth we don’t directly do and it looks a bit odd.

This sometimes happens when we add new content, scrolling position goes down unnecessarily:

In slow motion:

This sometimes happen when we merge the content so the content height decreases, as noticed here scroll position goes down a bit when the merge happens

Some analysis

when I comment out the method https://github.com/facebook/react-native/blob/13d87e9ad290f2ea55d9eca2c6426b4d215b5c3e/React/Views/ScrollView/RCTScrollView.m#L937 everything works fine, so maybe just being able to turn off the calculateOffsetForContentSize method call would solve this, but any other solutions and workarounds are also very appreciated.

Steps To Reproduce

This repo can be checked out https://github.com/wordpress-mobile/gutenberg-mobile

• cd to repo
• yarn install
• yarn start
• yarn ios

to open the example app and try adding merging text inputs by erase/return buttons at some point it’ll start to glitch.

Expected Behavior

Here is the expected behavior, no scrolling to the opposite side:

Code Example

You can refer to the repo https://github.com/wordpress-mobile/gutenberg-mobile and follow “To Reproduce” steps. Here’s the exact place of the FlatList https://github.com/wordpress-mobile/gutenberg-mobile/blob/5f1a641637a8b26a8354982c8b2b61b39c1f6acb/src/components/keyboard-aware-flat-list.ios.js#L63

Environment

React Native version:

React Native Environment Info: System: OS: macOS 10.14.3 CPU: (12) x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Memory: 427.82 MB / 32.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node Yarn: 1.10.1 - ~/.nvm/versions/node/v10.12.0/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v10.12.0/bin/npm SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 Android SDK: API Levels: 23, 26, 27, 28 Build Tools: 26.0.2, 26.0.3, 27.0.3, 28.0.3 System Images: android-28 | Google Play Intel x86 Atom IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.3 react-native: 0.59.0 => 0.59.0 npmGlobalPackages: react-native-cli: 2.0.1 react-native-create-library: 3.1.2 react-native-git-upgrade: 0.2.7

[prateekchachra]

@pinarol STILL not fixed.

[pinarol]

Yes, and let’s comment on the other issue to prevent it from getting closed automatically because of being stale.