Poor Android Performance - ListView/ScrollView

[ammichael]

Hi guys!

First of all.. awesome starter kit 👏

I've started building an app, but I've got some poor perfomance problems. I'm building an image list, using ListView, but the render is really slow, and navigation transition is even worse.

I've made a gif, but it's larger than 10MB. Here: https://www.dropbox.com/s/60z3hrs76ijs96c/SlowPepperoni.gif?dl=0

Btw, I've tried disabling dev mode in developer menu. Also, I've located this: https://github.com/facebook/react-native/issues/5034

Any ideas how it could be better implemented?

Thanks!

[krivachy]

Hi @ammichael, is this issue still outstanding? Performance bugs can be hard to debug as they're dependent on the details of the implementation. I.e. one common issue is that if you are doing animations while scrolling or transitioning, that kills the performance. If you provide more info we can help, but at this point it would be very hard to provide any meaningful answer.

[ammichael]

Hello @krivachy!

Thanks for trying help me out. What I've noticed is that the the listview is just slow when you use images on it. So the problem, probably, is related to image rendering. Also, I've found out that it's not related with the image size; first I've tried a full row size, then a 50px circle image.. It doesn't change at all.

When I remove the image from the List, it gets smooth as butter.

I wonder if there is no React Native app using images on lists..

[krivachy]

We have another open source RN app at Futurice which uses images in a ListView: https://github.com/futurice/event-app-client

The two sources that would be of interest to you: https://github.com/futurice/event-app-client/blob/master/app/components/feed/FeedList.js https://github.com/futurice/event-app-client/blob/master/app/components/feed/FeedListItem.js

You could maybe compare to see if you're missing something. This app has super fluid scrolling on my Nexus 6P, although the images are less condensed.

[ammichael]

I've tried to run it on Android emulator but couldn't get it working. What is that keystore filename that it asks when I run?

:app:processDebugResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/Users/michael/Library/Android/sdk/build-tools/23.0.1/aapt'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 1 mins 26.687 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

I've checked the emulator and seems fine.

Just npm install && react-native run-android?

[FruitieX]

I'm having the same problem in my application. Hopefully a fix is on its way: https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html