Images fail to render after several minutes of app use [Android, RN 0.24]

[sampurcell93]

Hi, I am in the process of building an app that relies on a relatively large amount of network-based images, loaded with the source={{uri: uri}} prop. This works well for a while, but after several minutes of using the app, it seems to have run out of memory for these images. At that point, instead of rendering, new images will either remain blank, or render a black box. The app also starts slowing down and becoming jittery. I have tried to debug with systrace, but I can't for the life of me get the newest version to show traces in any browser,

Since my app is image heavy, I have added the largeHeap directive to my manifest, which helped, but I know that there is a better solution. I also am making sure to request smaller-dimensioned versions of the images. Does anyone have experience freeing memory from network images? This is fairly urgent, and any advice would be most appreciated.

Sam

[timsuchanek]

Same issue here. Even using RN 0.25.1
I tested it on 3 devices.
With getImageCacheSize() from react-native-http-cache I logged the image cache size every second.
After a while the cache stops growing.
On each device it stops at different cache sizes:

Device	Limit
One Plus	40659781
Samsung Galaxy S4	24892319
Nexus 5	22600605

Now I just bruteforce called clearImageCache() every 10 sec.
Didn't solve the problem.
Still after loading many pictures (maybe around 100 - 150), it stops.

So it's probably not related to the image cache, what was my first assumption.
So the problem probably lies in fresco / the bindings to fresco.

New <Image> elements just stay white. No error.

@foghina You implemented some of the RN Android fresco stuff. Have any idea what could cause the problem?

Thanks in advance!

[sampurcell93]

Good thinking, tim. I ran a similar profile on my app, checking the http cache size, the image cache size, and the total, and I noticed that the cache does seem to be regulating itself pretty well. So I think it's a memory problem with something other than the cache.

[holyxiaoxin]

I am too having this problem recently, I'm using RN 0.25.1.

After using the app for a while, some images renders blank. I simply have to reset content and settings and install the app into my simulator again. All images render fine now.

[andyfen]

"react-native": "^0.25.1",
getting this as well rendering 10 images, rendering blank in a ListView, black image otherwise
EDIT: IOS

[sampurcell93]

Update: I've been using Android memory monitor to profile my image-heavy ListView, and no combination of overflow: hidden, removeClippedSubviews, or manual image destruction is yielding a memory reduction. It also doesn't help that onChangeVisibleRows doesn't fire on Android, so building a workaround seems exceedingly difficult. I noticed that images on a route that is then popped from the navigator can indeed be garbage collected, but for routes that are never popped, Images consume a pretty significant chunk of memory.

[holyxiaoxin]

Any chance that this would fix it?

[sampurcell93]

The solution to that issue was for iOS it looks like - and at this point I am more inclined to believe this is an application-level memory problem, not necessarily one limited to Images. They're just the easiest targets since they consume the largest amount of memory.

[timsuchanek]

Hmm so one "Fix" would be to use WebView for those pictures.
I found this library called react-virtualized so one could use that if you have a ListView with huge amounts of Images.

[sampurcell93]

@timsuchanek how would a webview help? Better memory footprint??

[timsuchanek]

No, but I think that uses the integrated Browser, which should be able to
handle a lot of images without crashing
Am 18.05.2016 2:49 vorm. schrieb "Samuel Purcell" <notifications@github.com

:

@timsuchanek https://github.com/timsuchanek how would a webview help?
Better memory footprint??

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#7408 (comment)

[sampurcell93]

Hmmm, that seems like a pretty good solution memory-wise, but I can't seem to get the images to resize, since I don't have control over that from WebView. Any advice?

[holyxiaoxin]

It seems that the problem goes away after adding a key to the Image like:
<Image key={some-image-${index}}/>

[cyphire]

I have been plagued with this problem as well, especially in debug mode running on Genymotion emulator. I have an app where doing an item selection in a scrollview gets data and shows other images. Sometimes it works, sometimes I get blank images as well. I also do a complex render of up to 200 images in my scrollview and over time will see large numbers of them coming up blank.

As a lot of react-native is based on poking around the internet and using the almost non-existent code examples, I know that I am not rendering correctly. Probably need to do a more (if image has loaded, good, if not get it loaded approach similar to the listview datachanged examples). I've spent a lot of time on this issue, but it is getting too time consuming to find it. Hopefully others will see this post and perhaps show the way they are rendering images.