react-native: Cannot scroll smoothly on a page with a lot images (Android 9.0 only, fine for 8.x, 7.x)
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® Core™ 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:
react-native init AwesomeProject- Edit App.js .
- Change View to ScrollView
- Add 100 different images under the ScrollView for example https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/blob/master/App.js
- Open an Android emulator with Android 9.0 (Pie) installed
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
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 35
- Comments: 68 (8 by maintainers)
If it helps, I encountered the same problem with Flatlist and when setting removeClippedSubviews to true the scrolling becomes smooth.
Same problem I fixed by adding
resizeMethod={"resize"}props to imagecontinuous concern
Using react-native-gesture-handler in combination with FlatList does not solve the problem for me.
This only seems to happen (at least for me) if the images are loaded from remote. With local images everything works fine.
Maybe react-native-screens is a solution with react-navigation and big list(with removeClippedSubviews prop).
To be 100% sure, I actually created simple Android application with the same images. My assumptions were correct this is not React Native bug neither it is Android bug.
The code I posted above IS actual solution and not a workaround. FlatList doesn’t reuse already drawn views it only unmounts them to reduce CPU overhead, though views are still in memory. Loading many images in ScrollView should never be done, since you don’t have huge amounts of resources on phones like you have on computers.
The issue will also be reproducible on iOS as well if you load many more than 100 images. I bet it even will crash the app.
Look at the memory usage: https://imgur.com/a/jyRB3ZM
Here’s the result https://youtu.be/XgxCzdo7H9I
Here’s the source code:
I gave up using FlatList. I instead use this library.
https://github.com/Flipkart/recyclerlistview
Also interesting: If you repeat the same picture 100x it doesn’t lag. It has to be 100 different pictures.
@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.
@danilobuerger Try loading 100 images with Native Android code. You will get same result. And as I’ve said ScrollView, FlatList and SectionList doesn’t recycle the items!
There probably was some memory optimizations done with latest Android 9. So there’s good chance memory just got more constrained.
I bet you would get the same issue loaded 1000 images on Android <9.
However RN team should consider adding recycling functionality to FlatList.
Basically you shouldn’t load many images in ScrollView anyway. I don’t think this is React Native bug.
Loading many images should be done with List component but since FlatList doesn’t recycle the items we need to use https://github.com/Flipkart/recyclerlistview or https://github.com/bolan9999/react-native-largelist
@sunshineo Here’s the solution with RecyclerListView:
Thank you @genogeno . I’ll try
@vforvasile https://github.com/facebook/react-native/issues/22925 I opened the issue we are experiencing