react-native: Images fail to render after several minutes of app use [Android, RN 0.24]
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
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 9
- Comments: 45 (5 by maintainers)
It seems that the problem goes away after adding a key to the Image like:
<Image key={some-image-${index}}/>Same issue here. Even using
RN 0.25.1I tested it on 3 devices. WithgetImageCacheSize()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: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!
Hey Kevin, I’m going to request that you keep this issue open. If you look at the code I posted on September 28th, that’s literally my whole react app and the issue still reproduced. This would be your option 2/ from above “this is happening in an app where there’s just one behavior that’s Image-specific”.
Also as a side note, if I load the same number of images in a webview, I don’t run into the issue. So I think the issue is specific to the React Image component logic leaking memory and not just “Your app has too many images”
ok the solution didn’t work for me, adding a key to images (I render around 200 of them) still gives me blank images, any idea anyone?
@Cxxxx100 OK, that does seem like a valid problem, but your comment is also the 17th one on this issue, so I think people coming to this issue will not actually be looking at your sample code in order to reproduce it. Would you mind opening a new issue, and providing the sample code of your app that reproduces this problem up front? I think that will be more effective in getting attention on it.
It sounds like there are a number of different things going on in this thread, and it’s somewhat of a guess, but all of it sounds like a symptom of the app running out of memory. There isn’t going to be one solution to that, though, so it’s hard to make progress on this overall issue. I think if people can reproduce this on a small app where there isn’t some other part of the app making it run out of memory, it would be pretty good evidence that there really is a problem specifically with images. Otherwise, I think the most reasonable thing to assume with these symptoms is that your app is leaking memory or just using too much, and the thing to do is profile your memory usage. I am going to close this thread, but I think people should feel free to reopen a new issue if 1/ this problem is happening in a situation where the app is clearly not running out of memory overall or 2/ this is happening in an app where there’s just one behavior that’s Image-specific.