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

[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[bot]]

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[bot]]

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[bot]]

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