Cannot scroll smoothly on a page with a lot images (Android 9.0 only, fine for 8.x, 7.x)

[gsunsnackv]

Environment

Run react-native info in your terminal and paste its contents here.
React Native Environment Info:
System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 223.26 MB / 16.00 GB
Shell: 4.4.23 - /usr/local/bin/bash
Binaries:
Node: 11.5.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.npm-packages/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-24 | Google Play Intel x86 Atom, 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.6.3 => 16.6.3
react-native: 0.57.8 => 0.57.8
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.
A simple page that has a ScrollView with 100 Image in it cannot scroll smoothly on emulator or device with Android 9.0 . It can scroll smoothly on Android 8.x or 7.x

Reproducible Demo

Reproduce project
https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/master

You should also be able to reproduce using the following simple steps:

1. react-native init AwesomeProject
2. Edit App.js .
3. Change View to ScrollView
4. Add 100 different images under the ScrollView for example https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/blob/master/App.js
5. Open an Android emulator with Android 9.0 (Pie) installed
6. react-native run-android

=== New information 2019-01-09 ===
FlatList does not work either. Here is the same project above changing ScrollView to FlatList
https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/flatlist

[alexandrius]

Is there any workaround for this issue?

[gsunsnackv]

@alexandrius I do not have any work around. Are you experiencing the same issue? Can you click on the thumb up to upvote this issue?

[alexandrius]

@gsunsnackv Yes fling stops working if it looses focus (navigating to another page and back)

[vforvasile]

I experience the same issue using Flatlist on a physical device running Android 9.0. No problems with android 8 and below. I cannot scroll once and see multiple items go up, it's just scroll and stop at the item.

[alexandrius]

@vforvasile Exactly me too. I have PixelExperience installed on my phone

[danilobuerger]

This only seems to happen (at least for me) if the images are loaded from remote. With local images everything works fine.

[danilobuerger]

@kelset is this related to the work done for #13413 ?

[kelset]

Uhm I'm not sure, he mentions ScrollView which has a different and less performant approach from FlatList.

That said, my comment there may help.

[danilobuerger]

@kelset The same happens with FlatList. I read through your comments, and non of them help as this is related to Android 9 only, other versions of Android are unaffected and work smoothly with the example provided.

[alexandrius]

@vforvasile what phone do you have. I think we are describing a different problem. I will open another issue with recorded video

[alexandrius]

@vforvasile #22925 I opened the issue we are experiencing

[gsunsnackv]

@kelset , I tried to use FlatList and it does not work. https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/flatlist . It still brings down the fps to < 5 on Android 9.0 but never below 40 on Android 8.0

[danilobuerger]

Also interesting: If you repeat the same picture 100x it doesn't lag. It has to be 100 different pictures.

[gsunsnackv]

@danilobuerger Thank you! I forgot to mention that in the original post. It seems to be something related to memory management

[gsunsnackv]

HELP! This bug is killing us. Can someone save us?
New information: even if you navigate away from a page that has a lot of images, those images are still impacting the performance of the new page. Here is an example https://github.com/gsunsnackv/expo-video-choppy-on-android-9.0/tree/new-choppy-issue

[genogeno]

I gave up using FlatList. I instead use this library.

https://github.com/Flipkart/recyclerlistview

[gsunsnackv]

Update: It seems that adding https://github.com/kmagiera/react-native-gesture-handler helps. So maybe the bug is in the area where react-native handles gesture . Code: https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/gesture

[gsunsnackv]

Thank you @genogeno . I'll try

[gsunsnackv]

Update: I confirm https://github.com/Flipkart/recyclerlistview works . Code https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/recyclerlistview

[danilobuerger]

Using react-native-gesture-handler in combination with FlatList does not solve the problem for me.

[hejun041]

continuous concern

[mhirst]

@smeekmeister thanks! we tried this in our app and helped on Android 9.

[wkmcyz]

I tried it on Android 9 with v0.57.0 of react-native, and it works, the FlatList could scroll normally but seems slower when pagingEnabled is set than on OS versions <9 .

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[kunwarshivam]

still a problem

[chitswe]

@smeekmeister thanks! it works on Android 9.

[fukuball]

Same issue on Android 9, react-native 0.60.5

[egislook]

Still, have the same issue on 0.61.2

[mtahir08]

same issue on 0.61.4

[Mersall]

this work for me thank you , you saved my day

If it helps, I encountered the same problem with Flatlist and when setting removeClippedSubviews to true the scrolling becomes smooth.

[SageWu]

Same issue, - -.
My app also depends on react-navigation. The app become slow when I open two or more stack pages that has its own FlatList or ScrollView of image items(maybe 10 - 15).

[fangrm]

So what can i do... My app use react-navigation, it can open multiple pages and every page has the image item list.

[SageWu]

Maybe react-native-screens is a solution with react-navigation and big list(with removeClippedSubviews prop).

[PhanQuy97]

Is there any way to fix this problem? Please show me.... :(( "removeClippedSubviews.It did not help me"

[sagarv1997]

If it helps, I encountered the same problem with Flatlist and when setting removeClippedSubviews to true the scrolling becomes smooth.

Worked for me!

[olanMbakop]

Having many images into scrollview really causes to lag. I have android 8.

[fabOnReact]

[nguyenduy2392]

I use FastImage to fix this problem image inside scrollview. but it too lag on RecyclerListView. use Image on RecyclerListView is better. i need more solution better

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[frzkn]

Did anyone manage to fix this issue? I face this issue too on Android 10 AOSP ROM. (react-native version 0.63.4)
Just like #22925 mentions page loses momentum once the screen loses focus.
Both removeClippedSubviews prop and react-native-screens didn't work for me.

[nathanguigui]

Same problem I fixed by adding resizeMethod={"resize"} props to image

[hejun041]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.